style: prettier format

pull/4977/head
tangjinzhou 2021-12-05 01:06:31 +08:00
parent 9ed73529a6
commit b19c8dd650
87 changed files with 449 additions and 510 deletions

View File

@ -1,10 +1,7 @@
const fs = require('fs'); const fs = require('fs');
module.exports = function getChangelog(file, version) { module.exports = function getChangelog(file, version) {
const lines = fs const lines = fs.readFileSync(file).toString().split('\n');
.readFileSync(file)
.toString()
.split('\n');
const changeLog = []; const changeLog = [];
const startPattern = new RegExp(`^## ${version}`); const startPattern = new RegExp(`^## ${version}`);
const stopPattern = /^## /; // 前一个版本 const stopPattern = /^## /; // 前一个版本

View File

@ -11,13 +11,7 @@ module.exports = function getRunCmdEnv() {
const nodeModulesBinDir = path.join(__dirname, '../../node_modules/.bin'); const nodeModulesBinDir = path.join(__dirname, '../../node_modules/.bin');
Object.entries(env) Object.entries(env)
.filter( .filter(v => v.slice(0, 1).pop().toLowerCase() === 'path')
v =>
v
.slice(0, 1)
.pop()
.toLowerCase() === 'path',
)
.forEach(v => { .forEach(v => {
const key = v.slice(0, 1).pop(); const key = v.slice(0, 1).pop();
env[key] = env[key] ? `${nodeModulesBinDir}:${env[key]}` : nodeModulesBinDir; env[key] = env[key] ? `${nodeModulesBinDir}:${env[key]}` : nodeModulesBinDir;

View File

@ -30,9 +30,7 @@ Please note that Affix should not cover other content on the page, especially wh
**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself: **Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
```html ```html
<a-affix :style="{ position: 'absolute', top: y, left: x}"> <a-affix :style="{ position: 'absolute', top: y, left: x}">...</a-affix>
...
</a-affix>
``` ```
## FAQ ## FAQ

View File

@ -25,15 +25,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | 版本 | | 事件名称 | 说明 | 回调参数 | 版本 |
| -------- | ---------------------------- | ----------------- | ---- | | -------- | ---------------------------- | ----------------- | ---- | --- |
| change | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | | | change | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | |
**注意:**`Affix` 内的元素不要使用绝对定位,如需要绝对定位的效果,可以直接设置 `Affix` 为绝对定位: **注意:**`Affix` 内的元素不要使用绝对定位,如需要绝对定位的效果,可以直接设置 `Affix` 为绝对定位:
```html ```html
<a-affix :style="{ position: 'absolute', top: y, left: x}"> <a-affix :style="{ position: 'absolute', top: y, left: x}">...</a-affix>
...
</a-affix>
``` ```
## FAQ ## FAQ

View File

@ -32,7 +32,7 @@ For displaying anchor hyperlinks on page and jumping between them.
### Events ### Events
| Events Name | Description | Arguments | Version | | Events Name | Description | Arguments | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| click | set the handler to handle `click` event | Function(e: Event, link: Object) | | | click | set the handler to handle `click` event | Function(e: Event, link: Object) | |
| change | Listening for anchor link change | (currentActiveLink: string) => void | | 1.5.0 | | change | Listening for anchor link change | (currentActiveLink: string) => void | | 1.5.0 |

View File

@ -33,7 +33,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | 版本 | | 事件名称 | 说明 | 回调参数 | 版本 |
| -------- | ---------------------- | ----------------------------------- | ---- | | -------- | ---------------------- | ----------------------------------- | ---- | ----- |
| click | `click` 事件的 handler | Function(e: Event, link: Object) | | | click | `click` 事件的 handler | Function(e: Event, link: Object) | |
| change | 监听锚点链接改变 | (currentActiveLink: string) => void | | 1.5.0 | | change | 监听锚点链接改变 | (currentActiveLink: string) => void | | 1.5.0 |

View File

@ -25,20 +25,20 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
### Breadcrumb.Item ### Breadcrumb.Item
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | -------- | ------------------- | -------------------------------------- | ------- | ------- |
| href | Target of hyperlink | string | - | | | href | Target of hyperlink | string | - | |
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | | | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
#### Events #### Events
| Events Name | Description | Arguments | Version | | Events Name | Description | Arguments | Version |
| -------- | -------- | -------------------- | ---- | | ----------- | ----------------------------- | -------------------- | ------- | ----- |
| click | handler to handle click event | (e:MouseEvent)=>void | - | 1.5.0 | | click | handler to handle click event | (e:MouseEvent)=>void | - | 1.5.0 |
### Breadcrumb.Separator `1.5.0` ### Breadcrumb.Separator `1.5.0`
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| -------- | ---------------- | --------- | ------- | ------- | | -------- | ----------- | ---- | ------- | ------- |
| - | - | - | - | - | | - | - | - | - | - |
> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear. > When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
@ -64,12 +64,8 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to
<template> <template>
<a-breadcrumb :routes="routes"> <a-breadcrumb :routes="routes">
<template #itemRender="{ route, params, routes, paths }"> <template #itemRender="{ route, params, routes, paths }">
<span v-if="routes.indexOf(route) === routes.length - 1"> <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
{{route.breadcrumbName}} <router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link>
</span>
<router-link v-else :to="paths.join('/')">
{{route.breadcrumbName}}
</router-link>
</template> </template>
</a-breadcrumb> </a-breadcrumb>
</template> </template>
@ -115,8 +111,8 @@ export default defineComponent({
]); ]);
return { return {
routes, routes,
} };
} },
}); });
</script> </script>
``` ```

View File

@ -33,7 +33,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
#### 事件 #### 事件
| 事件名称 | 说明 | 回调参数 | 版本 | | 事件名称 | 说明 | 回调参数 | 版本 |
| -------- | -------- | -------------------- | ---- | | -------- | -------- | -------------------- | ---- | ----- |
| click | 单击事件 | (e:MouseEvent)=>void | - | 1.5.0 | | click | 单击事件 | (e:MouseEvent)=>void | - | 1.5.0 |
### Breadcrumb.Separator `1.5.0` ### Breadcrumb.Separator `1.5.0`
@ -65,12 +65,8 @@ interface Route {
<template> <template>
<a-breadcrumb :routes="routes"> <a-breadcrumb :routes="routes">
<template #itemRender="{ route, params, routes, paths }"> <template #itemRender="{ route, params, routes, paths }">
<span v-if="routes.indexOf(route) === routes.length - 1"> <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
{{route.breadcrumbName}} <router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link>
</span>
<router-link v-else :to="paths.join('/')">
{{route.breadcrumbName}}
</router-link>
</template> </template>
</a-breadcrumb> </a-breadcrumb>
</template> </template>
@ -116,8 +112,8 @@ export default defineComponent({
]); ]);
return { return {
routes, routes,
} };
} },
}); });
</script> </script>
``` ```

View File

@ -36,4 +36,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

View File

@ -115,4 +115,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

View File

@ -107,4 +107,3 @@ export default defineComponent({
font-size: 28px; font-size: 28px;
} }
</style> </style>

View File

@ -45,4 +45,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

View File

@ -17,10 +17,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
```html ```html
// The default locale is en-US, if you want to use other locale, just set locale in entry file // The default locale is en-US, if you want to use other locale, just set locale in entry file
globally. globally. // import dayjs from 'dayjs'; // import 'dayjs/locale/zh-cn'; // dayjs.locale('zh-cn');
// import dayjs from 'dayjs';
// import 'dayjs/locale/zh-cn';
// dayjs.locale('zh-cn');
<a-calendar v-model:value @panelChange="onPanelChange" @select="onSelect"></a-calendar> <a-calendar v-model:value @panelChange="onPanelChange" @select="onSelect"></a-calendar>
``` ```

View File

@ -17,10 +17,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
**注意:**Calendar 部分 locale 是从 value 中读取,所以请先正确设置 dayjs 的 locale。 **注意:**Calendar 部分 locale 是从 value 中读取,所以请先正确设置 dayjs 的 locale。
```html ```html
// 默认语言为 en-US所以如果需要使用其他语言推荐在入口文件全局设置 locale // 默认语言为 en-US所以如果需要使用其他语言推荐在入口文件全局设置 locale // import dayjs from
// import dayjs from 'dayjs'; 'dayjs'; // import 'dayjs/locale/zh-cn'; // dayjs.locale('zh-cn');
// import 'dayjs/locale/zh-cn';
// dayjs.locale('zh-cn');
<a-calendar v-model:value="value" @panelChange="onPanelChange" @select="onSelect"></a-calendar> <a-calendar v-model:value="value" @panelChange="onPanelChange" @select="onSelect"></a-calendar>
``` ```

View File

@ -6,7 +6,6 @@ subtitle: 走马灯
cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
--- ---
旋转木马,一组轮播的区域。 旋转木马,一组轮播的区域。
## 何时使用 ## 何时使用

View File

@ -19,7 +19,7 @@ Checkbox component.
#### Checkbox #### Checkbox
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| ---------------- | ------------------------------------------- | ------- | ------- | ------- | | --- | --- | --- | --- | --- |
| autofocus | get focus when component mounted | boolean | false | | | autofocus | get focus when component mounted | boolean | false | |
| checked(v-model) | Specifies whether the checkbox is selected. | boolean | false | | | checked(v-model) | Specifies whether the checkbox is selected. | boolean | false | |
| disabled | Disable checkbox | boolean | false | | | disabled | Disable checkbox | boolean | false | |

View File

@ -20,7 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
#### Checkbox #### Checkbox
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ---------------- | --------------------------------------- | ------- | ------ | ---- | | --- | --- | --- | --- | --- |
| autofocus | 自动获取焦点 | boolean | false | | | autofocus | 自动获取焦点 | boolean | false | |
| checked(v-model) | 指定当前是否选中 | boolean | false | | | checked(v-model) | 指定当前是否选中 | boolean | false | |
| disabled | 失效状态 | boolean | false | | | disabled | 失效状态 | boolean | false | |

View File

@ -37,7 +37,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
### Collapse.Panel ### Collapse.Panel
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------------------------------ | ---------------- | ------ | ----- | | ----------- | ------------------------------ | ---------------------- | ------ | ----- |
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 | | collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
| header | 面板头内容 | string\|slot | 无 | | | header | 面板头内容 | string\|slot | 无 | |

View File

@ -25,15 +25,8 @@ Disabled part of dates and time by `disabledDate` and `disabledTime` respectivel
:disabled-time="disabledDateTime" :disabled-time="disabledDateTime"
:show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }" :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
/> />
<a-date-picker <a-date-picker v-model:value="value2" :disabled-date="disabledDate" picker="month" />
v-model:value="value2" <a-range-picker v-model:value="value3" :disabled-date="disabledDate" />
:disabled-date="disabledDate"
picker="month"
/>
<a-range-picker
v-model:value="value3"
:disabled-date="disabledDate"
/>
<a-range-picker <a-range-picker
v-model:value="value4" v-model:value="value4"
style="width: 400px" style="width: 400px"

View File

@ -33,10 +33,7 @@ export default defineComponent({
return { return {
value1: ref<Dayjs>(dayjs('2015-06-06', dateFormat)), value1: ref<Dayjs>(dayjs('2015-06-06', dateFormat)),
value2: ref<Dayjs>(dayjs('2015-06', 'YYYY-MM')), value2: ref<Dayjs>(dayjs('2015-06', 'YYYY-MM')),
value3: ref<Dayjs[]>([ value3: ref<Dayjs[]>([dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]),
dayjs('2015-06-06', dateFormat),
dayjs('2015-06-06', dateFormat),
]),
value4: ref<Dayjs[]>([dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]), value4: ref<Dayjs[]>([dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]),
}; };
}, },

View File

@ -71,4 +71,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

View File

@ -22,7 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
``` ```
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | -------------------------------------------- | ---------------- | ------ | ----- | | ----------- | -------------------------------------------- | ---------------- | ------ | ---- |
| description | 自定义描述内容 | string \| v-slot | - | | | description | 自定义描述内容 | string \| v-slot | - | |
| imageStyle | 图片样式 | CSSProperties | - | | | imageStyle | 图片样式 | CSSProperties | - | |
| image | 设置显示图片,为 string 时表示自定义图片地址 | string \| v-slot | false | | | image | 设置显示图片,为 string 时表示自定义图片地址 | string \| v-slot | false | |

View File

@ -40,7 +40,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
### Col ### Col
| 成员 | 说明 | 类型 | 默认值 | 版本 | | 成员 | 说明 | 类型 | 默认值 | 版本 |
| ------ | -------------------------------------------------------- | -------------- | ------ | --- | | --- | --- | --- | --- | --- |
| flex | flex 布局填充 | string\|number | - | | | flex | flex 布局填充 | string\|number | - | |
| offset | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | 0 | | | offset | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | 0 | |
| order | 栅格顺序,`flex` 布局模式下有效 | number | 0 | | | order | 栅格顺序,`flex` 布局模式下有效 | number | 0 | |

View File

@ -16,7 +16,7 @@ A list can be used to display content related to a single subject. The content c
### List ### List
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false | | | bordered | Toggles rendering of the border around the list | boolean | false | |
| footer | List footer renderer | string\|slot | - | | | footer | List footer renderer | string\|slot | - | |
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | | | grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | |
@ -44,7 +44,7 @@ More about pagination, please check [`Pagination`](https://www.antdv.com/compone
### List grid props ### List grid props
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| -------- | ------------------------ | ---------------------------------------- | --------- | --------- | | --- | --- | --- | --- | --- |
| column | column of grid | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | | | column | column of grid | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | |
| gutter | spacing between grid | number | 0 | | | gutter | spacing between grid | number | 0 | |
| size | Size of list | `default` \| `middle` \| `small` | `default` | | | size | Size of list | `default` \| `middle` \| `small` | `default` | |

View File

@ -17,7 +17,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
### List ### List
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false | | | bordered | 是否展示边框 | boolean | false | |
| footer | 列表底部 | string\|slot | - | | | footer | 列表底部 | string\|slot | - | |
| grid | 列表栅格配置 | object | - | | | grid | 列表栅格配置 | object | - | |
@ -46,7 +46,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
### List grid props ### List grid props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------ | -------------------- | ---------------------------------------- | ------ | ------ | | ------ | -------------------- | ---------------------------------------- | ------ | ---- |
| column | 列数 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | | | column | 列数 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | |
| gutter | 栅格间隔 | number | 0 | | | gutter | 栅格间隔 | number | 0 | |
| xs | `<576px` 展示的列数 | number | - | | | xs | `<576px` 展示的列数 | number | - | |
@ -60,7 +60,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
### List.Item ### List.Item
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| actions | 列表操作组,根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array\<vNode>/ | slot | - | | actions | 列表操作组,根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array\<vNode>/ | slot | - |
| extra | 额外内容, 通常用在 `itemLayout``vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|slot | - | | extra | 额外内容, 通常用在 `itemLayout``vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|slot | - |

View File

@ -57,7 +57,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
### Menu.Item ### Menu.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | ------- | ------ | ----- | | -------- | ------------------------ | ----------- | ------ | ----- |
| disabled | 是否禁用 | boolean | false | | | disabled | 是否禁用 | boolean | false | |
| key | item 的唯一标志 | string | | | | key | item 的唯一标志 | string | | |
| title | 设置收缩时展示的悬浮标题 | string/slot | | | | title | 设置收缩时展示的悬浮标题 | string/slot | | |

View File

@ -48,7 +48,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
- `message.loading(config)` - `message.loading(config)`
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | --------------------------------------------- | -------------- | ------ | ----- | | -------- | --------------------------------------------- | -------------- | ------ | ---- |
| content | 提示内容 | string\| VNode | - | | | content | 提示内容 | string\| VNode | - | |
| duration | 自动关闭的延时,单位秒。设为 0 时不自动关闭。 | number | 3 | | | duration | 自动关闭的延时,单位秒。设为 0 时不自动关闭。 | number | 3 | |
| onClose | 关闭时触发的回调函数 | Function | - | | | onClose | 关闭时触发的回调函数 | Function | - | |

View File

@ -9,11 +9,10 @@ Display a notification message globally.
## When To Use ## When To Use
To display a notification message at any of the four corners of the viewport. Typically it can be To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
used in the following cases:
- A notification with complex content. - A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details - A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
about upcoming steps the user may have to follow.
- A notification that is pushed by the application. - A notification that is pushed by the application.
## API ## API

View File

@ -11,6 +11,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg
## 何时使用 ## 何时使用
在系统四个角显示通知提醒信息。经常用于以下情况: 在系统四个角显示通知提醒信息。经常用于以下情况:
- 较为复杂的通知内容。 - 较为复杂的通知内容。
- 带有交互的通知,给出用户下一步的行动点。 - 带有交互的通知,给出用户下一步的行动点。
- 系统主动推送。 - 系统主动推送。

View File

@ -41,6 +41,6 @@ A long list can be divided into several pages using `Pagination`, and only one p
### events ### events
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
| --- | --- | --- | | --- | --- | --- | --- |
| change | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop | | change | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop |
| showSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop | | showSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop |

View File

@ -35,6 +35,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
| -------------- | -------------------------------------------- | ------------------------ | | -------------- | -------------------------------------------- | ------------------------ | ---- |
| change | 页码改变的回调,参数是改变后的页码及每页条数 | Function(page, pageSize) | noop | | change | 页码改变的回调,参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
| showSizeChange | pageSize 变化的回调 | Function(current, size) | noop | | showSizeChange | pageSize 变化的回调 | Function(current, size) | noop |

View File

@ -10,8 +10,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
## 何时使用 ## 何时使用
目标元素的操作需要用户进一步的确认时,在目标元素附近弹出浮层提示,询问用户。 目标元素的操作需要用户进一步的确认时,在目标元素附近弹出浮层提示,询问用户。和 'confirm' 弹出的全屏居中模态对话框相比,交互形式更轻量。
和 'confirm' 弹出的全屏居中模态对话框相比,交互形式更轻量。
## API ## API

View File

@ -14,7 +14,7 @@ Use when important operations need to inform the user to process the results and
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
| --- | --- | --- | --- | | -------- | ------------------------------------- | ---------------------------- | ------- | ------ | --------- | ----- | ----- | ------ | ------ |
| title | title string | string \| VNode \| #title | - | | title | title string | string \| VNode \| #title | - |
| subTitle | subTitle string | string \| VNode \| #subTitle | - | | subTitle | subTitle string | string \| VNode \| #subTitle | - |
| status | result status,decide icons and colors | `'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'` | 'info' | | status | result status,decide icons and colors | `'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'` | 'info' |

View File

@ -15,7 +15,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
## API ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | -------- | ------------------------- | ---------------------------- | ------- | ------ | --------- | ----- | ----- | ------ | ------ |
| title | title 文字 | string \| VNode \| #title | - | | title | title 文字 | string \| VNode \| #title | - |
| subTitle | subTitle 文字 | string \| VNode \| #subTitle | - | | subTitle | subTitle 文字 | string \| VNode \| #subTitle | - |
| status | 结果的状态,决定图标和颜色 | `'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'` | 'info' | | status | 结果的状态,决定图标和颜色 | `'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'` | 'info' |

View File

@ -24,14 +24,12 @@ Using the [Cascader](/components/cascader) component is strongly recommended ins
v-model:value="province" v-model:value="province"
style="width: 120px" style="width: 120px"
:options="provinceData.map(pro => ({ value: pro }))" :options="provinceData.map(pro => ({ value: pro }))"
> ></a-select>
</a-select>
<a-select <a-select
v-model:value="secondCity" v-model:value="secondCity"
style="width: 120px" style="width: 120px"
:options="cities.map(city => ({ value: city }))" :options="cities.map(city => ({ value: city }))"
> ></a-select>
</a-select>
</a-space> </a-space>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -23,8 +23,7 @@ Hide already selected options in the dropdown.
placeholder="Inserted are removed" placeholder="Inserted are removed"
style="width: 100%" style="width: 100%"
:options="filteredOptions.map(item => ({ value: item }))" :options="filteredOptions.map(item => ({ value: item }))"
> ></a-select>
</a-select>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, ref } from 'vue'; import { computed, defineComponent, ref } from 'vue';

View File

@ -24,8 +24,7 @@ Multiple selection, selecting from existing items (scroll the menu).
placeholder="Please select" placeholder="Please select"
:options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))" :options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))"
@change="handleChange" @change="handleChange"
> ></a-select>
</a-select>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';

View File

@ -29,8 +29,7 @@ Search with remote data.
:options="data" :options="data"
@search="handleSearch" @search="handleSearch"
@change="handleChange" @change="handleChange"
> ></a-select>
</a-select>
</template> </template>
<script lang="ts"> <script lang="ts">
import jsonp from 'fetch-jsonp'; import jsonp from 'fetch-jsonp';

View File

@ -24,8 +24,7 @@ Select with tags, transform input to tag (scroll the menu)
placeholder="Tags Mode" placeholder="Tags Mode"
:options="options" :options="options"
@change="handleChange" @change="handleChange"
> ></a-select>
</a-select>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';

View File

@ -29,7 +29,7 @@ Provide a placeholder while you wait for content to load, or to visualise conten
## SkeletonAvatarProps ## SkeletonAvatarProps
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------------------- | --------------------------------------------- | ------- | | -------- | ----------------------- | ----------------------------------------- | ------- |
| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - | | size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
| shape | Set the shape of avatar | `circle` \| `square` | - | | shape | Set the shape of avatar | `circle` \| `square` | - |

View File

@ -30,7 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
### SkeletonAvatarProps ### SkeletonAvatarProps
| 属性 | 说明 | 类型 | 默认值 | | 属性 | 说明 | 类型 | 默认值 |
| ----- | -------------------- | --------------------------------------------- | ------ | | ----- | -------------------- | ----------------------------------------- | ------ |
| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - | | size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
| shape | 指定头像的形状 | `circle` \| `square` | - | | shape | 指定头像的形状 | `circle` \| `square` | - |

View File

@ -36,7 +36,7 @@ To input a value in a range.
### events ### events
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
| --- | --- | --- | | --- | --- | --- | --- |
| afterChange | Fire when `mouseup` is fired. | Function(value) | NOOP | | afterChange | Fire when `mouseup` is fired. | Function(value) | NOOP |
| change | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP | | change | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP |

View File

@ -37,7 +37,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
| --- | --- | --- | | --- | --- | --- | --- |
| afterChange | 与 `mouseup` 触发时机一致,把当前值作为参数传入。 | Function(value) | NOOP | | afterChange | 与 `mouseup` 触发时机一致,把当前值作为参数传入。 | Function(value) | NOOP |
| change | 当 Slider 的值发生改变时,会触发 change 事件,并把改变后的值作为参数传入。 | Function(value) | NOOP | | change | 当 Slider 的值发生改变时,会触发 change 事件,并把改变后的值作为参数传入。 | Function(value) | NOOP |

View File

@ -31,7 +31,7 @@ Display statistic number.
### Statistic.Countdown ### Statistic.Countdown
| Property | Description | Type | Default | | Property | Description | Type | Default |
| ---------- | ---------------------------------------- | ---------------- | ---------- | | ---------- | -------------------------------------- | ---------------- | ---------- |
| format | Format as [dayjs](https://day.js.org/) | string | 'HH:mm:ss' | | format | Format as [dayjs](https://day.js.org/) | string | 'HH:mm:ss' |
| prefix | prefix node of value | string \| v-slot | - | | prefix | prefix node of value | string \| v-slot | - |
| suffix | suffix node of value | string \| v-slot | - | | suffix | suffix node of value | string \| v-slot | - |

View File

@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg
### Statistic.Countdown ### Statistic.Countdown
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | ---------- | --------------------------------------------------- | ---------------- | ---------- |
| format | 格式化倒计时展示,参考 [dayjs](https://day.js.org/) | string | 'HH:mm:ss' | | format | 格式化倒计时展示,参考 [dayjs](https://day.js.org/) | string | 'HH:mm:ss' |
| prefix | 设置数值的前缀 | string \| v-slot | - | | prefix | 设置数值的前缀 | string \| v-slot | - |
| suffix | 设置数值的后缀 | string \| v-slot | - | | suffix | 设置数值的后缀 | string \| v-slot | - |

View File

@ -38,7 +38,7 @@ The whole of the step bar.
#### Steps Events #### Steps Events
| Events Name | Description | Arguments | Version | | Events Name | Description | Arguments | Version |
| ----------- | ---------------------------- | ----------------- | ------- | | ----------- | ---------------------------- | ----------------- | ------- | ----- |
| change | Trigger when Step is changed | (current) => void | - | 1.5.0 | | change | Trigger when Step is changed | (current) => void | - | 1.5.0 |
### Steps.Step ### Steps.Step

View File

@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
#### Steps 事件 #### Steps 事件
| 事件名称 | 说明 | 回调参数 | 版本 | | 事件名称 | 说明 | 回调参数 | 版本 |
| -------- | ------------------ | ----------------- | ---- | | -------- | ------------------ | ----------------- | ---- | ----- |
| change | 点击切换步骤时触发 | (current) => void | - | 1.5.0 | | change | 点击切换步骤时触发 | (current) => void | - | 1.5.0 |
### Steps.Step ### Steps.Step

View File

@ -1,7 +1,6 @@
// mixins for clearfix // mixins for clearfix
// ------------------------ // ------------------------
.clearfix() { .clearfix() {
&::before, &::before,
&::after { &::after {
display: table; display: table;

View File

@ -32,7 +32,6 @@ With text and icon.
import { defineComponent, reactive, toRefs } from 'vue'; import { defineComponent, reactive, toRefs } from 'vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'; import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
export default defineComponent({ export default defineComponent({
components: { components: {
CheckOutlined, CheckOutlined,
CloseOutlined, CloseOutlined,

View File

@ -29,7 +29,7 @@ Switching Selector.
### Events ### Events
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
| --- | --- | --- | | --- | --- | --- | --- |
| change | trigger when the checked state is changing | Function(checked: boolean \| string \| number, event: Event) | | | change | trigger when the checked state is changing | Function(checked: boolean \| string \| number, event: Event) | |
| click | trigger when clicked | Function(checked: boolean \| string \| number, event: Event) | | | click | trigger when clicked | Function(checked: boolean \| string \| number, event: Event) | |

View File

@ -34,4 +34,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

View File

@ -60,5 +60,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

View File

@ -30,4 +30,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

View File

@ -33,4 +33,3 @@ export default defineComponent({
}, },
}); });
</script> </script>

View File

@ -61,10 +61,11 @@ By clicking the input box, you can select a time from a popup panel.
Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicker. And includes additional props: Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicker. And includes additional props:
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | -------- | ------------------------ | ------- | ------- | ------- |
| order | Order start and end time | boolean | true | | | order | Order start and end time | boolean | true | |
## FAQ ## FAQ
### How to use DatePicker with customize date librarylike moment.js \| dayjs \| date-fns ### How to use DatePicker with customize date librarylike moment.js \| dayjs \| date-fns
Please refer [replace date](/docs/vue/replace-date) Please refer [replace date](/docs/vue/replace-date)

View File

@ -14,7 +14,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
## API ## API
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| allowClear | 是否展示清除按钮 | boolean | true | | | allowClear | 是否展示清除按钮 | boolean | true | |
@ -47,7 +46,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
| ---------- | --------------------- | ---------------------------------------------------------- | | ---------- | --------------------- | --------------------------------------------------------- |
| change | 时间发生变化的回调 | function(time: dayjs \| string, timeString: string): void | | change | 时间发生变化的回调 | function(time: dayjs \| string, timeString: string): void |
| openChange | 面板打开/关闭时的回调 | (open: boolean): void | | openChange | 面板打开/关闭时的回调 | (open: boolean): void |
@ -58,16 +57,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
| blur() | 移除焦点 | | blur() | 移除焦点 |
| focus() | 获取焦点 | | focus() | 获取焦点 |
### TimeRangePicker ### TimeRangePicker
属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性: 属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性:
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | ----- | -------------------- | ------- | ------ | ---- |
| order | 始末时间是否自动排序 | boolean | true | | | order | 始末时间是否自动排序 | boolean | true | |
## FAQ ## FAQ
### 如何在 DatePicker 中使用自定义日期库(如 moment.js \| dayjs \| date-fns ### 如何在 DatePicker 中使用自定义日期库(如 moment.js \| dayjs \| date-fns
请参考[《自定义日期库》](/docs/vue/replace-date-cn) 请参考[《自定义日期库》](/docs/vue/replace-date-cn)

View File

@ -40,7 +40,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
时间轴的每一个节点。 时间轴的每一个节点。
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ----------------------------------------------- | ----------------- | ------ | ----- | | -------- | ----------------------------------------------- | ----------------- | ------ | ---- |
| color | 指定圆圈颜色 `blue, red, green`,或自定义的色值 | string | blue | | | color | 指定圆圈颜色 `blue, red, green`,或自定义的色值 | string | blue | |
| dot | 自定义时间轴点 | string\|slot | - | | | dot | 自定义时间轴点 | string\|slot | - | |
| position | 自定义节点位置 | `left` \| `right` | - | | | position | 自定义节点位置 | `left` \| `right` | - | |

View File

@ -42,7 +42,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
### events ### events
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
| --- | --- | --- | | --- | --- | --- | --- |
| visibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - | | visibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
## Note ## Note

View File

@ -22,8 +22,7 @@ Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` sel
v-model:selectedKeys="selectedKeys" v-model:selectedKeys="selectedKeys"
multiple multiple
:tree-data="treeData" :tree-data="treeData"
> ></a-directory-tree>
</a-directory-tree>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { TreeProps } from 'ant-design-vue'; import type { TreeProps } from 'ant-design-vue';

View File

@ -18,7 +18,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
## API ## API
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | | | accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |
| action | Uploading URL | string\|(file) => `Promise` | - | | | action | Uploading URL | string\|(file) => `Promise` | - | |
| method | http method of upload request | string | 'post' | 1.5.0 | | method | http method of upload request | string | 'post' | 1.5.0 |
@ -43,7 +43,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
### events ### events
| Events Name | Description | Arguments | Version | | Events Name | Description | Arguments | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| change | A callback function, can be executed when uploading state is changing. See [change](#change) | Function | - | | | change | A callback function, can be executed when uploading state is changing. See [change](#change) | Function | - | |
| preview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - | | | preview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - | |
| download | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | Function(file): void | Jump to new TAB | 1.5.0 | | download | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | Function(file): void | Jump to new TAB | 1.5.0 |

View File

@ -19,7 +19,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
## API ## API
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | 无 | | | accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | 无 | |
| action | 上传的地址 | string\|(file) => `Promise` | 无 | | | action | 上传的地址 | string\|(file) => `Promise` | 无 | |
| method | 上传请求的 http method | string | 'post' | 1.5.0 | | method | 上传请求的 http method | string | 'post' | 1.5.0 |
@ -44,7 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | 版本 | | 事件名称 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| change | 上传文件改变时的状态,详见 [change](#change) | Function | 无 | | | change | 上传文件改变时的状态,详见 [change](#change) | Function | 无 | |
| preview | 点击文件链接或预览图标时的回调 | Function(file) | 无 | | | preview | 点击文件链接或预览图标时的回调 | Function(file) | 无 | |
| download | 点击下载文件时的回调,如果没有指定,则默认跳转到文件 url 对应的标签页。 | Function(file): void | 跳转新标签页 | 1.5.0 | | download | 点击下载文件时的回调,如果没有指定,则默认跳转到文件 url 对应的标签页。 | Function(file): void | 跳转新标签页 | 1.5.0 |

View File

@ -148,7 +148,7 @@
"eslint-plugin-jest": "^25.3.0", "eslint-plugin-jest": "^25.3.0",
"eslint-plugin-markdown": "^2.0.0", "eslint-plugin-markdown": "^2.0.0",
"eslint-plugin-no-explicit-type-exports": "^0.12.0", "eslint-plugin-no-explicit-type-exports": "^0.12.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^8.1.1", "eslint-plugin-vue": "^8.1.1",
"fast-glob": "^3.2.7", "fast-glob": "^3.2.7",
"fetch-jsonp": "^1.1.3", "fetch-jsonp": "^1.1.3",

View File

@ -131,6 +131,7 @@ module.exports = {
## 使用暗黑主题 ## 使用暗黑主题
方式一:在样式文件全量引入 [antd.dark.less](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.less)。 方式一:在样式文件全量引入 [antd.dark.less](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.less)。
```less ```less
@import '~ant-design-vue/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件 @import '~ant-design-vue/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件
``` ```

View File

@ -33,7 +33,7 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
- [Electron](https://electronjs.org/) - [Electron](https://electronjs.org/)
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Electron | | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Electron |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --- | --- | --- | --- | --- | --- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Version ## Version
@ -71,14 +71,14 @@ We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `ant-desi
## Usage ## Usage
```jsx ```jsx
import { DatePicker } from "ant-design-vue"; import { DatePicker } from 'ant-design-vue';
app.use(DatePicker); app.use(DatePicker);
``` ```
And import stylesheets manually: And import stylesheets manually:
```jsx ```jsx
import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less' import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
``` ```
### Use modularized antd ### Use modularized antd
@ -100,18 +100,19 @@ import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
```jsx ```jsx
// import js and css modularly, parsed by babel-plugin-import // import js and css modularly, parsed by babel-plugin-import
import { DatePicker } from "ant-design-vue"; import { DatePicker } from 'ant-design-vue';
``` ```
- Manually import - Manually import
```jsx ```jsx
import DatePicker from "ant-design-vue/lib/date-picker"; // for js import DatePicker from 'ant-design-vue/lib/date-picker'; // for js
import "ant-design-vue/lib/date-picker/style/css"; // for css import 'ant-design-vue/lib/date-picker/style/css'; // for css
// import 'ant-design-vue/lib/date-picker/style'; // that will import less // import 'ant-design-vue/lib/date-picker/style'; // that will import less
``` ```
- For Vite - For Vite
```js ```js
// vite.config.js // vite.config.js
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'; import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
@ -126,6 +127,8 @@ import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
}; };
``` ```
```
## Links ## Links
- [Home Page](https://www.antdv.com/) - [Home Page](https://www.antdv.com/)
@ -155,3 +158,4 @@ Ant Design Vue is committed to providing programmers with a ** pleasant ** devel
## THANK YOU ## THANK YOU
[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt) [Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)
```

View File

@ -1,4 +1,3 @@
# Ant Design of Vue # Ant Design of Vue
这里是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。 这里是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。
@ -34,7 +33,7 @@
- [Electron](https://electronjs.org/) - [Electron](https://electronjs.org/)
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Electron | | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Electron |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --- | --- | --- | --- | --- | --- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 版本 ## 版本
@ -72,14 +71,14 @@ $ yarn add ant-design-vue@next
## 示例 ## 示例
```jsx ```jsx
import { DatePicker } from "ant-design-vue"; import { DatePicker } from 'ant-design-vue';
app.use(DatePicker); app.use(DatePicker);
``` ```
引入样式: 引入样式:
```jsx ```jsx
import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less' import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
``` ```
### 按需加载 ### 按需加载
@ -103,18 +102,19 @@ import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
```jsx ```jsx
// babel-plugin-import 会帮助你加载 JS 和 CSS // babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from "ant-design-vue"; import { DatePicker } from 'ant-design-vue';
``` ```
- 手动引入 - 手动引入
```jsx ```jsx
import DatePicker from "ant-design-vue/lib/date-picker"; // 加载 JS import DatePicker from 'ant-design-vue/lib/date-picker'; // 加载 JS
import "ant-design-vue/lib/date-picker/style/css"; // 加载 CSS import 'ant-design-vue/lib/date-picker/style/css'; // 加载 CSS
// import 'ant-design-vue/lib/date-picker/style'; // 加载 LESS // import 'ant-design-vue/lib/date-picker/style'; // 加载 LESS
``` ```
- Vite 按需 - Vite 按需
```js ```js
// vite.config.js // vite.config.js
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'; import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';

View File

@ -44,7 +44,8 @@ In `ant-design-vue@1.2.0`, we introduced the svg icon ([Why use the svg icon?](h
The old way of using Icon will be obsolete: The old way of using Icon will be obsolete:
```html ```html
<a-icon type="smile" /> <a-button icon="smile" /> <a-icon type="smile" />
<a-button icon="smile" />
``` ```
In 2.0, an on-demand introduction method will be adopted: In 2.0, an on-demand introduction method will be adopted:

View File

@ -2,8 +2,8 @@
Starting from the V3 version, the momentjs library is replaced by dayjs by default. If you need to use the momentjs or date-fns date library, you can replace it as follows: Starting from the V3 version, the momentjs library is replaced by dayjs by default. If you need to use the momentjs or date-fns date library, you can replace it as follows:
### 替换 DatePicker ### 替换 DatePicker
```js ```js
// moment or date-fns // moment or date-fns
import DatePicker from 'ant-design-vue/es/date-picker/moment'; import DatePicker from 'ant-design-vue/es/date-picker/moment';
@ -16,12 +16,7 @@ import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import antd from 'ant-design-vue'; import antd from 'ant-design-vue';
const app = createApp(App); const app = createApp(App);
app app.use(DatePicker).use(TimePicker).use(Calendar).use(antd).mount('#app');
.use(DatePicker)
.use(TimePicker)
.use(Calendar)
.use(antd)
.mount('#app');
``` ```
> Note: If you need to register the ant-design-vue component library globally, then `use(DatePicker)` `use(TimePicker)` `use(Calendar)` must be executed before `use(antd)`, otherwise the default cannot be overridden dayjs version. > Note: If you need to register the ant-design-vue component library globally, then `use(DatePicker)` `use(TimePicker)` `use(Calendar)` must be executed before `use(antd)`, otherwise the default cannot be overridden dayjs version.

View File

@ -2,8 +2,8 @@
在 V3 版本开始,默认使用 dayjs 替换了 momentjs 库,如果你需要使用 momentjs 或者 date-fns 日期库,你可以通过如下方式替换: 在 V3 版本开始,默认使用 dayjs 替换了 momentjs 库,如果你需要使用 momentjs 或者 date-fns 日期库,你可以通过如下方式替换:
### 替换 DatePicker ### 替换 DatePicker
```js ```js
// moment 或者 date-fns // moment 或者 date-fns
import DatePicker from 'ant-design-vue/es/date-picker/moment'; import DatePicker from 'ant-design-vue/es/date-picker/moment';
@ -16,12 +16,7 @@ import { createApp } from 'vue';
import App from './App.vue'; import App from './App.vue';
import antd from 'ant-design-vue'; import antd from 'ant-design-vue';
const app = createApp(App); const app = createApp(App);
app app.use(DatePicker).use(TimePicker).use(Calendar).use(antd).mount('#app');
.use(DatePicker)
.use(TimePicker)
.use(Calendar)
.use(antd)
.mount('#app');
``` ```
> 注意: 如果你需要全局注册 ant-design-vue 组件库,那么 `use(DatePicker)` `use(TimePicker)` `use(Calendar)` 必须在 `use(antd)` 之前执行,否则无法覆盖默认的 dayjs 版本。 > 注意: 如果你需要全局注册 ant-design-vue 组件库,那么 `use(DatePicker)` `use(TimePicker)` `use(Calendar)` 必须在 `use(antd)` 之前执行,否则无法覆盖默认的 dayjs 版本。