github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antd-tools/getTSCommonConfig.js
View File

@ -4,7 +4,7 @@ const fs = require('fs');
const assign = require('object-assign');
const { getProjectPath } = require('./utils/projectHelper');
module.exports = function() {
module.exports = function () {
let my = {};
if (fs.existsSync(getProjectPath('tsconfig.json'))) {
my = require(getProjectPath('tsconfig.json'));

5
antd-tools/utils/getChangelog.js
View File

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

8
antd-tools/utils/getRunCmdEnv.js
View File

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

2
antd-tools/utils/projectHelper.js
View File

@ -20,7 +20,7 @@ function injectRequire() {
const Module = require('module');
const oriRequire = Module.prototype.require;
Module.prototype.require = function(...args) {
Module.prototype.require = function (...args) {
const moduleName = args[0];
try {
return oriRequire.apply(this, args);

4
components/affix/index.en-US.md
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:
```html
<a-affix :style="{ position: 'absolute', top: y, left: x}">
...
</a-affix>
<a-affix :style="{ position: 'absolute', top: y, left: x}">...</a-affix>
```
## FAQ

8
components/affix/index.zh-CN.md
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` 为绝对定位：
```html
<a-affix :style="{ position: 'absolute', top: y, left: x}">
...
</a-affix>
<a-affix :style="{ position: 'absolute', top: y, left: x}">...</a-affix>
```
## FAQ

2
components/anchor/index.en-US.md
View File

@ -32,7 +32,7 @@ For displaying anchor hyperlinks on page and jumping between them.
### Events
| Events Name | Description | Arguments | Version |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| 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 |

2
components/anchor/index.zh-CN.md
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) | |
| change | 监听锚点链接改变 | (currentActiveLink: string) => void | | 1.5.0 |

2
components/badge/index.zh-CN.md
View File

@ -45,4 +45,4 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
| --- | --- | --- | --- | --- |
| color | 自定义缎带的颜色 | string | - | |
| placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` | |
| text | 缎带中填入的内容 | string \| VNode \| slot | - | |
| text | 缎带中填入的内容 | string \| VNode \| slot | - | |

110
components/breadcrumb/index.en-US.md
View File

@ -24,22 +24,22 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
### Breadcrumb.Item
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| href | Target of hyperlink | string | - | |
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
| Property | Description | Type | Default | Version |
| -------- | ------------------- | -------------------------------------- | ------- | ------- |
| href | Target of hyperlink | string | - | |
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
#### Events
| Events Name | Description | Arguments | Version |
| -------- | -------- | -------------------- | ---- |
| click | handler to handle click event | (e:MouseEvent)=>void | - | 1.5.0 |
| Events Name | Description | Arguments | Version |
| ----------- | ----------------------------- | -------------------- | ------- | ----- |
| click | handler to handle click event | (e:MouseEvent)=>void | - | 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.
@ -64,59 +64,55 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to
<template>
<a-breadcrumb :routes="routes">
<template #itemRender="{ route, params, routes, paths }">
<span v-if="routes.indexOf(route) === routes.length - 1">
{{route.breadcrumbName}}
</span>
<router-link v-else :to="paths.join('/')">
{{route.breadcrumbName}}
</router-link>
<span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
<router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link>
</template>
</a-breadcrumb>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
interface Route {
path: string;
breadcrumbName: string;
children?: Array<{
import { defineComponent, ref } from 'vue';
interface Route {
path: string;
breadcrumbName: string;
}>;
}
export default defineComponent({
setup () {
const routes = ref<Route[]>([
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
]);
return {
routes,
}
children?: Array<{
path: string;
breadcrumbName: string;
}>;
}
});
export default defineComponent({
setup() {
const routes = ref<Route[]>([
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
]);
return {
routes,
};
},
});
</script>
```

94
components/breadcrumb/index.zh-CN.md
View File

@ -33,14 +33,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
#### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| -------- | -------- | -------------------- | ---- |
| -------- | -------- | -------------------- | ---- | ----- |
| click | 单击事件 | (e:MouseEvent)=>void | - | 1.5.0 |
### Breadcrumb.Separator `1.5.0`
| 参数 | 类型 | 默认值 | 版本 |
| ---- | ---- | ------ | ---- |
| - | - | - | - |
| - | - | - | - |
> 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
@ -65,59 +65,55 @@ interface Route {
<template>
<a-breadcrumb :routes="routes">
<template #itemRender="{ route, params, routes, paths }">
<span v-if="routes.indexOf(route) === routes.length - 1">
{{route.breadcrumbName}}
</span>
<router-link v-else :to="paths.join('/')">
{{route.breadcrumbName}}
</router-link>
<span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}</span>
<router-link v-else :to="paths.join('/')">{{route.breadcrumbName}}</router-link>
</template>
</a-breadcrumb>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
interface Route {
path: string;
breadcrumbName: string;
children?: Array<{
import { defineComponent, ref } from 'vue';
interface Route {
path: string;
breadcrumbName: string;
}>;
}
export default defineComponent({
setup () {
const routes = ref<Route[]>([
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
]);
return {
routes,
}
children?: Array<{
path: string;
breadcrumbName: string;
}>;
}
});
export default defineComponent({
setup() {
const routes = ref<Route[]>([
{
path: 'index',
breadcrumbName: 'home',
},
{
path: 'first',
breadcrumbName: 'first',
children: [
{
path: '/general',
breadcrumbName: 'General',
},
{
path: '/layout',
breadcrumbName: 'Layout',
},
{
path: '/navigation',
breadcrumbName: 'Navigation',
},
],
},
{
path: 'second',
breadcrumbName: 'second',
},
]);
return {
routes,
};
},
});
</script>
```

1
components/calendar/demo/basic.vue
View File

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

1
components/calendar/demo/customize-header.vue
View File

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

1
components/calendar/demo/notice-calendar.vue
View File

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

1
components/calendar/demo/select.vue
View File

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

5
components/calendar/index.en-US.md
View File

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

8
components/calendar/index.zh-CN.md
View File

@ -17,10 +17,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 dayjs 的 locale。
```html
// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
// import dayjs from 'dayjs';
// import 'dayjs/locale/zh-cn';
// dayjs.locale('zh-cn');
// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale // import dayjs from
'dayjs'; // import 'dayjs/locale/zh-cn'; // dayjs.locale('zh-cn');
<a-calendar v-model:value="value" @panelChange="onPanelChange" @select="onSelect"></a-calendar>
```
@ -38,7 +36,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
| validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | 无 | |
| value(v-model) | 展示日期 | [dayjs](https://day.js.org/) | 当前日期 | |
| headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | |
| valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
| valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
### 事件

3
components/carousel/index.zh-CN.md
View File

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

14
components/checkbox/index.en-US.md
View File

@ -18,13 +18,13 @@ Checkbox component.
#### Checkbox
| Property | Description | Type | Default | Version |
| ---------------- | ------------------------------------------- | ------- | ------- | ------- |
| autofocus | get focus when component mounted | boolean | false | |
| checked(v-model) | Specifies whether the checkbox is selected. | boolean | false | |
| disabled | Disable checkbox | boolean | false | |
| indeterminate | indeterminate checked state of checkbox | boolean | false | |
| value | value of checkbox in CheckboxGroup | boolean \| string \| number | - | |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autofocus | get focus when component mounted | boolean | false | |
| checked(v-model) | Specifies whether the checkbox is selected. | boolean | false | |
| disabled | Disable checkbox | boolean | false | |
| indeterminate | indeterminate checked state of checkbox | boolean | false | |
| value | value of checkbox in CheckboxGroup | boolean \| string \| number | - | |
#### events

14
components/checkbox/index.zh-CN.md
View File

@ -19,13 +19,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
#### Checkbox
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ---------------- | --------------------------------------- | ------- | ------ | ---- |
| autofocus | 自动获取焦点 | boolean | false | |
| checked(v-model) | 指定当前是否选中 | boolean | false | |
| disabled | 失效状态 | boolean | false | |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
| value | 与 CheckboxGroup 组合使用时的值 | boolean \| string \| number | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autofocus | 自动获取焦点 | boolean | false | |
| checked(v-model) | 指定当前是否选中 | boolean | false | |
| disabled | 失效状态 | boolean | false | |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
| value | 与 CheckboxGroup 组合使用时的值 | boolean \| string \| number | - | |
#### 事件

16
components/collapse/index.zh-CN.md
View File

@ -36,11 +36,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
### Collapse.Panel
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------------------------------ | ---------------- | ------ | ----- |
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
| header | 面板头内容 | string\|slot | 无 | |
| key | 对应 activeKey | string \| number | 无 | |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` | |
| extra | 自定义渲染每个面板右上角的内容 | VNode \| slot | - | 1.5.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------------------ | ---------------------- | ------ | ----- |
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
| header | 面板头内容 | string\|slot | 无 | |
| key | 对应 activeKey | string \| number | 无 | |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` | |
| extra | 自定义渲染每个面板右上角的内容 | VNode \| slot | - | 1.5.0 |

8
components/date-picker/demo/basic.vue
View File

@ -19,10 +19,10 @@ Basic use case. Users can select or input a date in panel.
<template>
<a-space direction="vertical" :size="12">
<a-date-picker v-model:value="value1" />
<a-date-picker v-model:value="value2" picker="week"/>
<a-date-picker v-model:value="value3" picker="month"/>
<a-date-picker v-model:value="value4" picker="quarter"/>
<a-date-picker v-model:value="value5" picker="year"/>
<a-date-picker v-model:value="value2" picker="week" />
<a-date-picker v-model:value="value3" picker="month" />
<a-date-picker v-model:value="value4" picker="quarter" />
<a-date-picker v-model:value="value5" picker="year" />
</a-space>
</template>
<script lang="ts">

10
components/date-picker/demo/bordered.vue
View File

@ -18,11 +18,11 @@ Bordered-less style component.
<template>
<a-space direction="vertical" :size="12">
<a-date-picker v-model:value="value1" :bordered="false"/>
<a-date-picker v-model:value="value2" picker="week" :bordered="false"/>
<a-date-picker v-model:value="value3" picker="month" :bordered="false"/>
<a-date-picker v-model:value="value4" picker="quarter" :bordered="false"/>
<a-date-picker v-model:value="value5" picker="year" :bordered="false"/>
<a-date-picker v-model:value="value1" :bordered="false" />
<a-date-picker v-model:value="value2" picker="week" :bordered="false" />
<a-date-picker v-model:value="value3" picker="month" :bordered="false" />
<a-date-picker v-model:value="value4" picker="quarter" :bordered="false" />
<a-date-picker v-model:value="value5" picker="year" :bordered="false" />
<a-range-picker v-model:value="value6" :bordered="false" />
<a-range-picker v-model:value="value7" picker="week" :bordered="false" />

11
components/date-picker/demo/disabled-date.vue
View File

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

5
components/date-picker/demo/disabled.vue
View File

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

4
components/date-picker/demo/index.vue
View File

@ -1,8 +1,8 @@
<template>
<demo-sort>
<Basic />
<RangePicker/>
<Bordered/>
<RangePicker />
<Bordered />
<Format />
<Time />
<Disabled />

6
components/date-picker/demo/range-picker.vue
View File

@ -20,9 +20,9 @@ Set range picker type by `picker` prop.
<a-space direction="vertical" :size="12">
<a-range-picker v-model:value="value1" />
<a-range-picker v-model:value="value2" show-time />
<a-range-picker v-model:value="value3" picker="week"/>
<a-range-picker v-model:value="value4" picker="month"/>
<a-range-picker v-model:value="value5" picker="year"/>
<a-range-picker v-model:value="value3" picker="week" />
<a-range-picker v-model:value="value4" picker="month" />
<a-range-picker v-model:value="value5" picker="year" />
</a-space>
</template>
<script lang="ts">

1
components/date-picker/demo/select-in-range.vue
View File

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

4
components/date-picker/demo/suffix.vue
View File

@ -39,9 +39,9 @@ Customize the suffix icon through `suffixIcon`
</template>
</a-date-picker>
<a-date-picker suffix-icon="ab" @change="onChange" />
<a-date-picker suffix-icon="ab" placeholder="Select month" picker="month" @change="onChange"/>
<a-date-picker suffix-icon="ab" placeholder="Select month" picker="month" @change="onChange" />
<a-range-picker suffix-icon="ab" @change="onChange" />
<a-date-picker suffix-icon="ab" placeholder="Select week" picker="week" @change="onChange"/>
<a-date-picker suffix-icon="ab" placeholder="Select week" picker="week" @change="onChange" />
</a-space>
</template>
<script lang="ts">

10
components/empty/index.zh-CN.md
View File

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

30
components/grid/index.zh-CN.md
View File

@ -39,20 +39,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
### Col
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| ------ | -------------------------------------------------------- | -------------- | ------ | --- |
| flex | flex 布局填充 | string\|number | - | |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 | |
| pull | 栅格向左移动格数 | number | 0 | |
| push | 栅格向右移动格数 | number | 0 | |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xxxl | `≥2000px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | 3.0 |
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| flex | flex 布局填充 | string\|number | - | |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 | |
| pull | 栅格向左移动格数 | number | 0 | |
| push | 栅格向右移动格数 | number | 0 | |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xxxl | `≥2000px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | 3.0 |
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

26
components/list/index.en-US.md
View File

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

24
components/list/index.zh-CN.md
View File

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

14
components/menu/index.zh-CN.md
View File

@ -56,12 +56,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
### Menu.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | ------- | ------ | ----- |
| disabled | 是否禁用 | boolean | false | |
| key | item 的唯一标志 | string | | |
| title | 设置收缩时展示的悬浮标题 | string/slot | | |
| icon | 菜单图标 | slot | | 2.8.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | ----------- | ------ | ----- |
| disabled | 是否禁用 | boolean | false | |
| key | item 的唯一标志 | string | | |
| title | 设置收缩时展示的悬浮标题 | string/slot | | |
| icon | 菜单图标 | slot | | 2.8.0 |
### Menu.SubMenu
@ -72,7 +72,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
| key | 唯一标志 | string | | |
| title | 子菜单项值 | string\|slot | | |
| expandIcon | 自定义 Menu 展开收起图标 | slot | 箭头图标 | |
| icon | 菜单图标 | slot | | 2.8.0 |
| icon | 菜单图标 | slot | | 2.8.0 |
Menu.SubMenu 的子元素必须是 `MenuItem` 或者 `SubMenu`.

14
components/message/index.zh-CN.md
View File

@ -47,13 +47,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
- `message.warn(config)` // alias of warning
- `message.loading(config)`
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | --------------------------------------------- | -------------- | ------ | ----- |
| content | 提示内容 | string\| VNode | - | |
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 | |
| onClose | 关闭时触发的回调函数 | Function | - | |
| icon | 自定义图标 | VNode | - | |
| key | 当前提示的唯一标志 | string\|number | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | --------------------------------------------- | -------------- | ------ | ---- |
| content | 提示内容 | string\| VNode | - | |
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 | |
| onClose | 关闭时触发的回调函数 | Function | - | |
| icon | 自定义图标 | VNode | - | |
| key | 当前提示的唯一标志 | string\|number | - | |
### 全局方法

7
components/notification/index.en-US.md
View File

@ -9,11 +9,10 @@ Display a notification message globally.
## When To Use
To display a notification message at any of the four corners of the viewport. Typically it can be
used in the following cases:
To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
- A notification with complex content.
- 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.
- 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.
- A notification that is pushed by the application.
## API

1
components/notification/index.zh-CN.md
View File

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

2
components/pagination/index.en-US.md
View File

@ -41,6 +41,6 @@ A long list can be divided into several pages using `Pagination`, and only one p
### events
| 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 |
| showSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop |

2
components/pagination/index.zh-CN.md
View File

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

4
components/popconfirm/index.en-US.md
View File

@ -25,9 +25,9 @@ The difference with the 'confirm' modal dialog is that it's more lightweight tha
| okButton | custom render confirm button | slot | - | 3.0 |
| okType | Button `type` of the Confirm button | string | `primary` | |
| title | title of the confirmation box | string\|slot | - | |
| visible (v-model) | hide or show | boolean| - | |
| visible (v-model) | hide or show | boolean | - | |
| icon | customize icon of confirmation | vNode\|slot | &lt;Icon type="exclamation-circle" /&gt; | |
| disabled | is show popconfirm when click its childrenNode | boolean | false | |
| disabled | is show popconfirm when click its childrenNode | boolean | false | |
### events

5
components/popconfirm/index.zh-CN.md
View File

@ -10,8 +10,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
## 何时使用
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。
## API
@ -25,7 +24,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
| okButton | 完全自定义确认按钮 | slot | - | 3.0 |
| okType | 确认按钮类型 | string | primary | |
| title | 确认框的描述 | string\|slot | 无 | |
| visible (v-model) | 是否显示 | boolean| - | |
| visible (v-model) | 是否显示 | boolean | - | |
| icon | 自定义弹出气泡 Icon 图标 | vNode | &lt;Icon type="exclamation-circle" /&gt; | |
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false | |

2
components/progress/demo/circle-dynamic.vue
View File

@ -30,7 +30,7 @@ A dynamic progress bar is better.
</div>
</template>
<script lang="ts">
import { MinusOutlined , PlusOutlined } from '@ant-design/icons-vue';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {

2
components/progress/demo/dynamic.vue
View File

@ -30,7 +30,7 @@ A dynamic progress bar is better.
</div>
</template>
<script lang="ts">
import { MinusOutlined , PlusOutlined } from '@ant-design/icons-vue';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
components: {

6
components/progress/demo/segment.vue
View File

@ -19,13 +19,13 @@ A standard progress bar.
<template>
<div>
<a-tooltip title="3 done / 3 in progress / 4 to do">
<a-progress :percent="60" :success="{percent: 30}" />
<a-progress :percent="60" :success="{ percent: 30 }" />
</a-tooltip>
<a-tooltip title="3 done / 3 in progress / 4 to do">
<a-progress :percent="60" :success="{percent: 30}" type="circle" />
<a-progress :percent="60" :success="{ percent: 30 }" type="circle" />
</a-tooltip>
<a-tooltip title="3 done / 3 in progress / 4 to do">
<a-progress :percent="60" :success="{percent: 30}" type="dashboard" />
<a-progress :percent="60" :success="{ percent: 30 }" type="dashboard" />
</a-tooltip>
</div>
</template>

14
components/result/index.en-US.md
View File

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

14
components/result/index.zh-CN.md
View File

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

6
components/select/demo/coordinate.vue
View File

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

3
components/select/demo/hide-selected.vue
View File

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

3
components/select/demo/multiple.vue
View File

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

3
components/select/demo/search-box.vue
View File

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

3
components/select/demo/tags.vue
View File

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

6
components/skeleton/index.en-US.md
View File

@ -28,10 +28,10 @@ Provide a placeholder while you wait for content to load, or to visualise conten
## SkeletonAvatarProps
| Property | Description | Type | Default |
| -------- | ----------------------- | --------------------------------------------- | ------- |
| Property | Description | Type | 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` | - |
### SkeletonTitleProps

6
components/skeleton/index.zh-CN.md
View File

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

2
components/slider/index.en-US.md
View File

@ -36,7 +36,7 @@ To input a value in a range.
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| --- | --- | --- | --- |
| 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 |

2
components/slider/index.zh-CN.md
View File

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

14
components/statistic/index.en-US.md
View File

@ -30,14 +30,14 @@ Display statistic number.
### Statistic.Countdown
| Property | Description | Type | Default |
| ---------- | ---------------------------------------- | ---------------- | ---------- |
| Property | Description | Type | Default |
| ---------- | -------------------------------------- | ---------------- | ---------- |
| format | Format as [dayjs](https://day.js.org/) | string | 'HH:mm:ss' |
| prefix | prefix node of value | string \| v-slot | - |
| suffix | suffix node of value | string \| v-slot | - |
| title | Display title | string \| v-slot | - |
| value | Set target countdown time | number \| dayjs | - |
| valueStyle | Set value css style | style | - |
| prefix | prefix node of value | string \| v-slot | - |
| suffix | suffix node of value | string \| v-slot | - |
| title | Display title | string \| v-slot | - |
| value | Set target countdown time | number \| dayjs | - |
| valueStyle | Set value css style | style | - |
#### Statistic.Countdown Events

16
components/statistic/index.zh-CN.md
View File

@ -31,14 +31,14 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg
### Statistic.Countdown
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| format | 格式化倒计时展示，参考 [dayjs](https://day.js.org/) | string | 'HH:mm:ss' |
| prefix | 设置数值的前缀 | string \| v-slot | - |
| suffix | 设置数值的后缀 | string \| v-slot | - |
| title | 数值的标题 | string \| v-slot | - |
| value | 数值内容 | number \| dayjs | - |
| valueStyle | 设置数值的样式 | style | - |
| 参数 | 说明 | 类型 | 默认值 |
| ---------- | --------------------------------------------------- | ---------------- | ---------- |
| format | 格式化倒计时展示，参考 [dayjs](https://day.js.org/) | string | 'HH:mm:ss' |
| prefix | 设置数值的前缀 | string \| v-slot | - |
| suffix | 设置数值的后缀 | string \| v-slot | - |
| title | 数值的标题 | string \| v-slot | - |
| value | 数值内容 | number \| dayjs | - |
| valueStyle | 设置数值的样式 | style | - |
#### Statistic.Countdown 事件

2
components/steps/index.en-US.md
View File

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

2
components/steps/index.zh-CN.md
View File

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

1
components/style/mixins/clearfix.less
View File

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

1
components/switch/demo/text.vue
View File

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

20
components/switch/index.en-US.md
View File

@ -16,20 +16,20 @@ Switching Selector.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autofocus | get focus when component mounted | boolean | false | |
| checked(v-model) | determine whether the `Switch` is checked | checkedValue \| unCheckedValue | false ||
| checkedChildren | content to be shown when the state is checked | string\|slot | ||
| disabled | Disable switch | boolean | false ||
| loading | loading state of switch | boolean | false ||
| size | the size of the `Switch`, options: `default` `small` | string | default ||
| unCheckedChildren | content to be shown when the state is unchecked | string\|slot | ||
| checkedValue | value for checked state | boolean \| string \| number | true | 2.2.1 |
| unCheckedValue | value for unchecked state | boolean \| string \| number | false | 2.2.1 |
| autofocus | get focus when component mounted | boolean | false | |
| checked(v-model) | determine whether the `Switch` is checked | checkedValue \| unCheckedValue | false | |
| checkedChildren | content to be shown when the state is checked | string\|slot | | |
| disabled | Disable switch | boolean | false | |
| loading | loading state of switch | boolean | false | |
| size | the size of the `Switch`, options: `default` `small` | string | default | |
| unCheckedChildren | content to be shown when the state is unchecked | string\|slot | | |
| checkedValue | value for checked state | boolean \| string \| number | true | 2.2.1 |
| unCheckedValue | value for unchecked state | boolean \| string \| number | false | 2.2.1 |
### Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| --- | --- | --- | --- |
| 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) | |

1
components/time-picker/demo/12hours.vue
View File

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

2
components/time-picker/demo/addon.vue
View File

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

1
components/time-picker/demo/disabled.vue
View File

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

1
components/time-picker/demo/hide-column.vue
View File

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

4
components/time-picker/demo/index.vue
View File

@ -1,8 +1,8 @@
<template>
<demo-sort>
<Basic />
<Bordered/>
<RangePicker/>
<Bordered />
<RangePicker />
<Hours />
<Addon />
<Disabled />

9
components/time-picker/index.en-US.md
View File

@ -60,11 +60,12 @@ 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:
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| order | Order start and end time | boolean | true | |
| Property | Description | Type | Default | Version |
| -------- | ------------------------ | ------- | ------- | ------- |
| order | Order start and end time | boolean | true | |
## FAQ
### How to use DatePicker with customize date library（like moment.js \| dayjs \| date-fns）？
Please refer [replace date](/docs/vue/replace-date)
Please refer [replace date](/docs/vue/replace-date)

17
components/time-picker/index.zh-CN.md
View File

@ -14,7 +14,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
## API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 是否展示清除按钮 | boolean | true | |
@ -46,10 +45,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
### 事件
| 事件名称 | 说明 | 回调参数 |
| ---------- | --------------------- | ---------------------------------------------------------- |
| 事件名称 | 说明 | 回调参数 |
| ---------- | --------------------- | --------------------------------------------------------- |
| 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() | 移除焦点 |
| focus() | 获取焦点 |
### TimeRangePicker
属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| order | 始末时间是否自动排序 | boolean | true | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----- | -------------------- | ------- | ------ | ---- |
| order | 始末时间是否自动排序 | boolean | true | |
## FAQ
### 如何在 DatePicker 中使用自定义日期库（如 moment.js \| dayjs \| date-fns）？
请参考[《自定义日期库》](/docs/vue/replace-date-cn)
请参考[《自定义日期库》](/docs/vue/replace-date-cn)

12
components/timeline/index.zh-CN.md
View File

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

100
components/tooltip/index.en-US.md
View File

@ -1,50 +1,50 @@
---
category: Components
type: Data Display
title: Tooltip
cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
---
A simple text popup tip.
## When To Use
- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
- To provide an explanation of a 'button/text/operation'. It's often used instead of the html 'title' attribute.
## API
| Property | Description | Type | Default |
| -------- | ----------------------------- | ------------ | ------- |
| title | The text shown in the tooltip | string\|slot | - |
### Common API
The following APIs are shared by Tooltip, Popconfirm, Popover.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | `false` |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
| color | The background color | string | - |
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. | Function(triggerNode) | () => document.body |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
| overlayClassName | Class name of the tooltip card | string | - |
| overlayStyle | Style of the tooltip card | object | - |
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` \| `contextmenu` | `hover` |
| visible(v-model) | Whether the floating tooltip card is visible or not | boolean | `false` |
| destroyTooltipOnHide | Whether to destroy tooltip on hide | boolean | false |
| align | this value will be merged into placement's config, please refer to the settings [dom-align](https://github.com/yiminghe/dom-align) | Object | - |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| visibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
## Note
Please ensure that the child node of `Tooltip` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.
---
category: Components
type: Data Display
title: Tooltip
cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
---
A simple text popup tip.
## When To Use
- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
- To provide an explanation of a 'button/text/operation'. It's often used instead of the html 'title' attribute.
## API
| Property | Description | Type | Default |
| -------- | ----------------------------- | ------------ | ------- |
| title | The text shown in the tooltip | string\|slot | - |
### Common API
The following APIs are shared by Tooltip, Popconfirm, Popover.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | `false` |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
| color | The background color | string | - |
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. | Function(triggerNode) | () => document.body |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
| overlayClassName | Class name of the tooltip card | string | - |
| overlayStyle | Style of the tooltip card | object | - |
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` \| `contextmenu` | `hover` |
| visible(v-model) | Whether the floating tooltip card is visible or not | boolean | `false` |
| destroyTooltipOnHide | Whether to destroy tooltip on hide | boolean | false |
| align | this value will be merged into placement's config, please refer to the settings [dom-align](https://github.com/yiminghe/dom-align) | Object | - |
### events
| Events Name | Description | Arguments |
| --- | --- | --- | --- |
| visibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
## Note
Please ensure that the child node of `Tooltip` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.

102
components/tooltip/index.zh-CN.md
View File

@ -1,51 +1,51 @@
---
category: Components
type: 数据展示
title: Tooltip
subtitle: 文字提示
cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
---
警告提示，展现需要关注的信息。
## 何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
## API
| 参数 | 说明 | 类型 | 默认值 |
| ----- | -------- | ------------ | ------ |
| title | 提示文字 | string\|slot | 无 |
### 共同的 API
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| color | 背景颜色 | string | 无 |
| defaultVisible | 默认是否显隐 | boolean | false |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
| overlayClassName | 卡片类名 | string | 无 |
| overlayStyle | 卡片样式 | object | 无 |
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| trigger | 触发行为，可选 `hover/focus/click/contextmenu` | string | hover |
| visible(v-model) | 用于手动控制浮层显隐 | boolean | false |
| destroyTooltipOnHide | 隐藏后是否销毁 tooltip | boolean | false |
| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | Object | 无 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| ------------- | -------------- | ----------------- |
| visibleChange | 显示隐藏的回调 | (visible) => void |
## 注意
请确保 `Tooltip` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。
---
category: Components
type: 数据展示
title: Tooltip
subtitle: 文字提示
cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
---
警告提示，展现需要关注的信息。
## 何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
## API
| 参数 | 说明 | 类型 | 默认值 |
| ----- | -------- | ------------ | ------ |
| title | 提示文字 | string\|slot | 无 |
### 共同的 API
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| color | 背景颜色 | string | 无 |
| defaultVisible | 默认是否显隐 | boolean | false |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
| overlayClassName | 卡片类名 | string | 无 |
| overlayStyle | 卡片样式 | object | 无 |
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| trigger | 触发行为，可选 `hover/focus/click/contextmenu` | string | hover |
| visible(v-model) | 用于手动控制浮层显隐 | boolean | false |
| destroyTooltipOnHide | 隐藏后是否销毁 tooltip | boolean | false |
| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | Object | 无 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| ------------- | -------------- | ----------------- |
| visibleChange | 显示隐藏的回调 | (visible) => void |
## 注意
请确保 `Tooltip` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。

3
components/tree/demo/directory.vue
View File

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

4
components/upload/index.en-US.md
View File

@ -18,7 +18,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
## API
| 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 | - | |
| action | Uploading URL | string\|(file) => `Promise` | - | |
| 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 Name | Description | Arguments | Version |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| 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) | - | |
| 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 |

4
components/upload/index.zh-CN.md
View File

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

2
components/vc-cascader/Cascader.jsx
View File

@ -1,4 +1,4 @@
import { getComponent, getSlot , hasProp, getEvents } from '../_util/props-util';
import { getComponent, getSlot, hasProp, getEvents } from '../_util/props-util';
import PropTypes from '../_util/vue-types';
import Trigger from '../vc-trigger';
import Menus from './Menus';

2
package.json
View File

@ -148,7 +148,7 @@
"eslint-plugin-jest": "^25.3.0",
"eslint-plugin-markdown": "^2.0.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",
"fast-glob": "^3.2.7",
"fetch-jsonp": "^1.1.3",

2
site/src/directives/clipboard/delegate.js
View File

@ -16,7 +16,7 @@ function _delegate(element, selector, type, callback, useCapture) {
element.addEventListener(type, listenerFn, useCapture);
return {
destroy () {
destroy() {
element.removeEventListener(type, listenerFn, useCapture);
},
};

4
site/src/directives/clipboard/listen.js
View File

@ -49,7 +49,7 @@ function listenNode(node, type, callback) {
node.addEventListener(type, callback);
return {
destroy () {
destroy() {
node.removeEventListener(type, callback);
},
};
@ -70,7 +70,7 @@ function listenNodeList(nodeList, type, callback) {
});
return {
destroy () {
destroy() {
Array.prototype.forEach.call(nodeList, function (node) {
node.removeEventListener(type, callback);
});

8
site/src/directives/clipboard/tiny-emitter.js
View File

@ -4,7 +4,7 @@ function E() {
}
E.prototype = {
on (name, callback, ctx) {
on(name, callback, ctx) {
let e = this.e || (this.e = {});
(e[name] || (e[name] = [])).push({
@ -15,7 +15,7 @@ E.prototype = {
return this;
},
once (name, callback, ctx) {
once(name, callback, ctx) {
let self = this;
function listener() {
self.off(name, listener);
@ -26,7 +26,7 @@ E.prototype = {
return this.on(name, listener, ctx);
},
emit (name) {
emit(name) {
let data = [].slice.call(arguments, 1);
let evtArr = ((this.e || (this.e = {}))[name] || []).slice();
let i = 0;
@ -39,7 +39,7 @@ E.prototype = {
return this;
},
off (name, callback) {
off(name, callback) {
let e = this.e || (this.e = {});
let evts = e[name];
let liveEvents = [];

1
site/src/vueDocs/customize-theme.zh-CN.md
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)。
```less
@import '~ant-design-vue/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件
```

18
site/src/vueDocs/introduce.en-US.md
View File

@ -33,8 +33,8 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
- [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 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|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
@ -71,14 +71,14 @@ We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `ant-desi
## Usage
```jsx
import { DatePicker } from "ant-design-vue";
import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);
```
And import stylesheets manually:
```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
@ -100,18 +100,19 @@ import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
```jsx
// import js and css modularly, parsed by babel-plugin-import
import { DatePicker } from "ant-design-vue";
import { DatePicker } from 'ant-design-vue';
```
- Manually import
```jsx
import DatePicker from "ant-design-vue/lib/date-picker"; // for js
import "ant-design-vue/lib/date-picker/style/css"; // for css
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'; // that will import less
```
- For Vite
```js
// vite.config.js
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
@ -124,6 +125,8 @@ import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
}),
],
};
```
```
## Links
@ -155,3 +158,4 @@ Ant Design Vue is committed to providing programmers with a ** pleasant ** devel
## THANK YOU
[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)
```

16
site/src/vueDocs/introduce.zh-CN.md
View File

@ -1,4 +1,3 @@
# Ant Design of Vue
这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
@ -34,8 +33,8 @@
- [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 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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
import { DatePicker } from "ant-design-vue";
import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);
```
引入样式：
```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
// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from "ant-design-vue";
import { DatePicker } from 'ant-design-vue';
```
- 手动引入
```jsx
import DatePicker from "ant-design-vue/lib/date-picker"; // 加载 JS
import "ant-design-vue/lib/date-picker/style/css"; // 加载 CSS
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'; // 加载 LESS
```
- Vite 按需
```js
// vite.config.js
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';

3
site/src/vueDocs/migration-v2.en-US.md
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:
```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:

2
site/src/vueDocs/migration-v2.zh-CN.md
View File

@ -16,7 +16,7 @@
### 兼容性调整
- 浏览器不再兼容 IE 11及以下版本。
- 浏览器不再兼容 IE 11 及以下版本。
- Vue 最低支持版本为 Vue 3.0。
#### 调整的 API

11
site/src/vueDocs/replace-date.en-US.md
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:
### 替换 DatePicker
```js
// moment or date-fns
import DatePicker from 'ant-design-vue/es/date-picker/moment';
@ -16,12 +16,7 @@ import { createApp } from 'vue';
import App from './App.vue';
import antd from 'ant-design-vue';
const app = createApp(App);
app
.use(DatePicker)
.use(TimePicker)
.use(Calendar)
.use(antd)
.mount('#app');
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.

11
site/src/vueDocs/replace-date.zh-CN.md
View File

@ -2,8 +2,8 @@
在 V3 版本开始，默认使用 dayjs 替换了 momentjs 库，如果你需要使用 momentjs 或者 date-fns 日期库，你可以通过如下方式替换：
### 替换 DatePicker
```js
// moment 或者 date-fns
import DatePicker from 'ant-design-vue/es/date-picker/moment';
@ -16,12 +16,7 @@ import { createApp } from 'vue';
import App from './App.vue';
import antd from 'ant-design-vue';
const app = createApp(App);
app
.use(DatePicker)
.use(TimePicker)
.use(Calendar)
.use(antd)
.mount('#app');
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 版本。