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

docs: update doc anchor

pull/6514/head
tangjinzhou 2023-04-21 22:29:04 +08:00
parent bccd9204e8
commit 5376014b33
52 changed files with 163 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -28,7 +28,7 @@ English | [简体中文](./README-zh_CN.md)
## Environment Support
- Modern browsers. v1.x support Internet Explorer 9+ (with [polyfills](https://www.antdv.com/docs/vue/getting-started/#Compatibility))
- Modern browsers. v1.x support Internet Explorer 9+ (with [polyfills](https://www.antdv.com/docs/vue/getting-started/#compatibility))
- Server-side Rendering
- Support Vue 2 & Vue 3
- [Electron](https://electronjs.org/)

28
components/anchor/__tests__/Anchor.test.js
View File

@ -48,7 +48,7 @@ describe('Anchor Render', () => {
currentActiveLink.value = current;
}}
>
<Link href="http://www.example.com/#API" title="API" />
<Link href="http://www.example.com/#api" title="API" />
</Anchor>
);
},
@ -56,8 +56,8 @@ describe('Anchor Render', () => {
{ sync: false },
);
await sleep();
wrapper.find('a[href="http://www.example.com/#API"]').trigger('click');
expect(currentActiveLink.value).toBe('http://www.example.com/#API');
wrapper.find('a[href="http://www.example.com/#api"]').trigger('click');
expect(currentActiveLink.value).toBe('http://www.example.com/#api');
});
/*
it('Anchor render perfectly for complete href - scroll', done => {
@ -68,7 +68,7 @@ describe('Anchor Render', () => {
<div>
<div id="API">Hello</div>
<Anchor ref="anchor">
<Link href="http://www.example.com/#API" title="API" />
<Link href="http://www.example.com/#api" title="API" />
</Anchor>
</div>
);
@ -78,7 +78,7 @@ describe('Anchor Render', () => {
);
wrapper.vm.$nextTick(() => {
wrapper.vm.$refs.anchor.handleScroll();
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('http://www.example.com/#API');
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('http://www.example.com/#api');
done();
});
});
@ -92,7 +92,7 @@ describe('Anchor Render', () => {
<div>
<div id="API">Hello</div>
<Anchor ref="anchor">
<Link href="##API" title="API" />
<Link href="##api" title="API" />
</Anchor>
</div>
);
@ -101,8 +101,8 @@ describe('Anchor Render', () => {
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
wrapper.vm.$refs.anchor.handleScrollTo('##API');
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('##API');
wrapper.vm.$refs.anchor.handleScrollTo('##api');
expect(wrapper.vm.$refs.anchor.$data.activeLink).toBe('##api');
expect(scrollToSpy).not.toHaveBeenCalled();
});
await asyncExpect(() => {
@ -116,7 +116,7 @@ describe('Anchor Render', () => {
render() {
return (
<Anchor ref="anchor">
<Link href="#API" title="API" />
<Link href="#api" title="API" />
</Anchor>
);
},
@ -141,14 +141,14 @@ describe('Anchor Render', () => {
},
render() {
return (
<Anchor ref="anchor">{this.showLink ? <Link href="#API" title="API" /> : null}</Anchor>
<Anchor ref="anchor">{this.showLink ? <Link href="#api" title="API" /> : null}</Anchor>
);
},
},
{ sync: false, attachTo: 'body' },
);
await asyncExpect(() => {
expect(wrapper.vm.$refs.anchor.links).toEqual(['#API']);
expect(wrapper.vm.$refs.anchor.links).toEqual(['#api']);
wrapper.setProps({ showLink: false });
});
await asyncExpect(() => {
@ -172,12 +172,12 @@ describe('Anchor Render', () => {
sync: false,
attachTo: 'body',
props: {
href: '#API',
href: '#api',
},
},
);
await asyncExpect(() => {
expect(wrapper.vm.$refs.anchor.links).toEqual(['#API']);
expect(wrapper.vm.$refs.anchor.links).toEqual(['#api']);
wrapper.setProps({ href: '#API_1' });
});
await asyncExpect(() => {
@ -190,7 +190,7 @@ describe('Anchor Render', () => {
let link;
const handleClick = (...arg) => ([event, link] = arg);
const href = '#API';
const href = '#api';
const title = 'API';
const anchorRef = Vue.ref(null);

10
components/anchor/__tests__/__snapshots__/demo.test.js.snap
View File

@ -30,7 +30,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.vue correctly 1`] =
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#API" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
@ -83,7 +83,7 @@ exports[`renders ./components/anchor/demo/onChange.vue correctly 1`] = `
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#API" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
@ -104,7 +104,7 @@ exports[`renders ./components/anchor/demo/onClick.vue correctly 1`] = `
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#API" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
@ -125,7 +125,7 @@ exports[`renders ./components/anchor/demo/static.vue correctly 1`] = `
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#API" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<!---->
</div>
@ -149,7 +149,7 @@ exports[`renders ./components/anchor/demo/targetOffset.vue correctly 1`] = `
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
<!---->
</div>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#API" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#api" title="API">API</a>
<div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#Anchor-Props" title="Anchor Props">Anchor Props</a>
<!---->
</div>

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

@ -26,7 +26,7 @@ For displaying anchor hyperlinks on page and jumping between them.
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| showInkInFixed | Whether show ink-square when `：affix="false"` | boolean | false | |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetoffset) | number | `offsetTop` | 1.5.0 |
| wrapperClass | The class name of the container | string | - | |
| wrapperStyle | The style of the container | object | - | |
| items | Data configuration option content, support nesting through children | { key, href, title, target, children }\[] [see](#anchoritem) | - | 4.0 |

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

@ -27,7 +27,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAA
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| showInkInFixed | `:affix="false"` 时是否显示小方块 | boolean | false | |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetoffset) | number | `offsetTop` | 1.5.0 |
| wrapperClass | 容器的类名 | string | - | |
| wrapperStyle | 容器样式 | object | - | |
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }\[] [具体见](#anchoritem) | - | 4.0 |

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

@ -58,6 +58,6 @@ It accepts all props which native buttons support.
### How to remove space between 2 chinese characters
Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#api) to set `autoInsertSpaceInButton` as `false`.
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />

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

@ -61,6 +61,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Lp1kTYmSsgoAAA
### 如何移除 2 个汉字之间的空格
根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#api) 的 `autoInsertSpaceInButton` 为 `false`。
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格" />

2
components/config-provider/index.en-US.md
View File

@ -53,7 +53,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | |
| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | 3.0 |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 3.0 |
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | - | 3.0 |
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional` } | - | 3.0 |
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode, dialogContext) | `() => document.body` | |
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 3.0 |
| input | Set Input common props | { autocomplete?: string } | - | 3.0 |

2
components/config-provider/index.zh-CN.md
View File

@ -54,7 +54,7 @@ ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provi
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | 3.0 |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | |
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | 3.0 |
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | 3.0 |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode, dialogContext) | () => document.body | |
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 3.0 |
| input | 设置 Input 组件的通用属性 | { autocomplete?: string } | - | 3.0 |

18
components/date-picker/index.en-US.md
View File

@ -84,7 +84,7 @@ The following APIs are shared by DatePicker, RangePicker.
| dateRender | Custom rendering function for date cells | v-slot:dateRender="{current, today}" | - | |
| disabled | Determine whether the DatePicker is disabled | boolean | false | |
| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - | |
| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | [formatType](#formatType) | `YYYY-MM-DD` | |
| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | [formatType](#formattype) | `YYYY-MM-DD` | |
| dropdownClassName | To customize the className of the popup calendar | string | - | |
| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
@ -125,10 +125,10 @@ The following APIs are shared by DatePicker, RangePicker.
| --- | --- | --- | --- | --- |
| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - | |
| disabledTime | To specify the time that cannot be selected | function(date) | - | |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-MM-DD` | |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formattype) | `YYYY-MM-DD` | |
| renderExtraFooter | Render extra footer in panel | v-slot:renderExtraFooter="mode" | - | |
| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | |
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
| showToday | Whether to show `Today` button | boolean | true | |
| value(v-model) | To set date | [dayjs](https://day.js.org/) | - | |
@ -144,26 +144,26 @@ The following APIs are shared by DatePicker, RangePicker.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY` | |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formattype) | `YYYY` | |
### DatePicker\[picker=quarter]
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-\QQ` | |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formattype) | `YYYY-\QQ` | |
### DatePicker\[picker=month]
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-MM` | |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formattype) | `YYYY-MM` | |
| monthCellRender | Custom month cell content render method | v-slot:monthCellRender="{current, locale}" | - | |
### DatePicker\[picker=week]
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-wo` | |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formattype) | `YYYY-wo` | |
### RangePicker
@ -174,12 +174,12 @@ The following APIs are shared by DatePicker, RangePicker.
| defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
| disabled | If disable start or end | \[boolean, boolean] | - | |
| disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - | |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-MM-DD HH:mm:ss` | |
| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` | |
| presets | The preset ranges for quick selection | { label: slot, value: [dayjs](https://day.js.org/)\[] }[] | - | 4.0 |
| ranges | The preseted ranges for quick selection | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | |
| renderExtraFooter | Render extra footer in panel | v-slot:renderExtraFooter="mode" | - | |
| separator | Set separator between inputs | string \| v-slot:separator | `<SwapRightOutlined />` | |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | |
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
| value(v-model) | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |

18
components/date-picker/index.zh-CN.md
View File

@ -85,7 +85,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA
| dateRender | 自定义日期单元格的内容 | v-slot:dateRender="{current, today}" | - | |
| disabled | 禁用 | boolean | false | |
| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - | |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format)，支持[自定义格式](#components-date-picker-demo-format) | [formatType](#formatType) | `YYYY-MM-DD` | |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format)，支持[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | `YYYY-MM-DD` | |
| dropdownClassName | 额外的弹出日历 className | string | - | |
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
@ -126,10 +126,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA
| --- | --- | --- | --- | --- |
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - | |
| disabledTime | 不可选择的时间 | function(date) | - | |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY-MM-DD` | |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formattype) | `YYYY-MM-DD` | |
| renderExtraFooter | 在面板中添加额外的页脚 | v-slot:renderExtraFooter="mode" | - | |
| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | |
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#api) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
| showToday | 是否展示“今天”按钮 | boolean | true | |
| value(v-model) | 日期 | [dayjs](https://day.js.org/) | - | |
@ -145,26 +145,26 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY` | |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formattype) | `YYYY` | |
### DatePicker\[picker=quarter]
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY-\QQ` | |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formattype) | `YYYY-\QQ` | |
### DatePicker\[picker=month]
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY-MM` | |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formattype) | `YYYY-MM` | |
| monthCellRender | 自定义的月份内容渲染方法 | v-slot:monthCellRender="{current, locale}" | - | |
### DatePicker\[picker=week]
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY-wo` | |
| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formattype) | `YYYY-wo` | |
### RangePicker
@ -175,12 +175,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA
| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - | |
| disabled | 禁用起始项 | \[boolean, boolean] | - | |
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - | |
| format | 展示的日期格式 | [formatType](#formatType) | `YYYY-MM-DD HH:mm:ss` | |
| format | 展示的日期格式 | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` | |
| presets | 预设时间范围快捷选择 | { label: slot, value: [dayjs](https://day.js.org/)\[] }[] | - | 4.0 |
| ranges | 预设时间范围快捷选择 | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | v-slot:renderExtraFooter="mode" | - | |
| separator | 设置分隔符 | string \| v-slot:separator | `<SwapRightOutlined />` | |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#api) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
| value(v-model) | 日期 | [dayjs](https://day.js.org/)\[] | - | |

2
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -203,7 +203,7 @@ exports[`renders ./components/empty/demo/config-provider.vue correctly 1`] = `
exports[`renders ./components/empty/demo/customize.vue correctly 1`] = `
<div class="ant-empty">
<div class="ant-empty-image" style="height: 60px;"><img alt="empty" src="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"></div>
<p class="ant-empty-description"><span> Customize <a href="#API">Description</a></span></p>
<p class="ant-empty-description"><span> Customize <a href="#api">Description</a></span></p>
<div class="ant-empty-footer"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Create Now</span>
</button></div>

2
components/empty/demo/customize.vue
View File

@ -26,7 +26,7 @@ Customize image, description and extra content.
<template #description>
<span>
Customize
<a href="#API">Description</a>
<a href="#api">Description</a>
</span>
</template>
<a-button type="primary">Create Now</a-button>

4
components/form/demo/useForm-basic.vue
View File

@ -8,11 +8,11 @@ title:
## zh-CN
通过 [`Form.useForm`](#useForm) 更加灵活的使用表单组件。
通过 [`Form.useForm`](#useform) 更加灵活的使用表单组件。
## en-US
use [`Form.useForm`](#useForm) provides form validation logic and status.
use [`Form.useForm`](#useform) provides form validation logic and status.
</docs>
<template>

4
components/form/demo/useForm-merge.vue
View File

@ -8,11 +8,11 @@ title:
## zh-CN
通过 [`Form.useForm`](#useForm) 合并展示表单校验信息。
通过 [`Form.useForm`](#useform) 合并展示表单校验信息。
## en-US
use [`Form.useForm`](#useForm) combined display form verification information.
use [`Form.useForm`](#useform) combined display form verification information.
</docs>
<template>

4
components/form/demo/useForm-nested.vue
View File

@ -8,11 +8,11 @@ title:
## zh-CN
通过 [`Form.useForm`](#useForm) 使用点字符串拼接进行嵌套数据校验。
通过 [`Form.useForm`](#useform) 使用点字符串拼接进行嵌套数据校验。
## en-US
[`Form.useForm`](#useForm) use dot string splicing for nested data verification.
[`Form.useForm`](#useform) use dot string splicing for nested data verification.
</docs>
<template>

4
components/form/demo/useForm-trigger.vue
View File

@ -8,11 +8,11 @@ title:
## zh-CN
通过 [`Form.useForm`](#useForm) 自定义触发校验时机
通过 [`Form.useForm`](#useform) 自定义触发校验时机
## en-US
use [`Form.useForm`](#useForm) custom trigger to validation logic and status.
use [`Form.useForm`](#useform) custom trigger to validation logic and status.
</docs>
<template>

18
components/form/index.en-US.md
View File

@ -36,7 +36,7 @@ A form consists of one or more form fields whose type includes input, textarea,
| disabled | Set form component disable, only available for antdv components | boolean | false | 4.0 |
| hideRequiredMark | Hide required mark of all form items | Boolean | false | |
| labelAlign | text align of label of all items | 'left' \| 'right' | 'right' | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#col) | | |
| labelWrap | whether label can be wrap | boolean | false | 3.0 |
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
| model | data of form component | object | | |
@ -46,7 +46,7 @@ A form consists of one or more form fields whose type includes input, textarea,
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| validateOnRuleChange | whether to trigger validation when the `rules` prop is changed | boolean | true | |
| validateTrigger | Config field validate trigger | string \| string\[] | `change` | 2.0.0 |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#col) | | |
### Events
@ -61,11 +61,11 @@ A form consists of one or more form fields whose type includes input, textarea,
| Method | Description | Parameters | Version |
| --- | --- | --- | --- |
| clearValidate | clear validation message for certain fields. The parameter is name or an array of names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | (nameList?: [NamePath](#NamePath)\[]) => void | |
| resetFields | reset all the fields and remove validation result | (nameList?: [NamePath](#NamePath)\[]) => void | |
| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
| validate | Validate fields, it is same as validateFields | (nameList?: [NamePath](#NamePath)\[]) => Promise | |
| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)\[]) => Promise | |
| clearValidate | clear validation message for certain fields. The parameter is name or an array of names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | (nameList?: [NamePath](#namepath)\[]) => void | |
| resetFields | reset all the fields and remove validation result | (nameList?: [NamePath](#namepath)\[]) => void | |
| scrollToField | Scroll to field position | (name: [NamePath](#namepath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
| validate | Validate fields, it is same as validateFields | (nameList?: [NamePath](#namepath)\[]) => Promise | |
| validateFields | Validate fields | (nameList?: [NamePath](#namepath)\[]) => Promise | |
#### NamePath
@ -83,14 +83,14 @@ A form consists of one or more form fields whose type includes input, textarea,
| htmlFor | Set sub label `htmlFor`. | string | | |
| label | Label text | string\|slot | | |
| labelAlign | text align of label | 'left' \| 'right' | 'right' | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#col) | | |
| name | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | | 2.0.0 |
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | |
| rules | validation rules of form | object \| array | | |
| validateFirst | Whether stop validate on first rule of error for this field. | boolean | false | |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | |
| validateTrigger | When to validate the value of children node | string \| string\[] | `change` | |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#col) | | |
### Note

18
components/form/index.zh-CN.md
View File

@ -37,7 +37,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
| disabled | 设置表单组件禁用，仅对 antdv 组件有效 | boolean | false | 4.0 |
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false | |
| labelAlign | label 标签的文本对齐方式 | 'left' \| 'right' | 'right' | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#col) | | |
| labelWrap | label 标签的文本换行方式 | boolean | false | 3.0 |
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
| model | 表单数据对象 | object | | |
@ -47,7 +47,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| validateOnRuleChange | 是否在 rules 属性改变后立即触发一次验证 | boolean | true | |
| validateTrigger | 统一设置字段校验规则 | string \| string\[] | `change` | 2.0.0 |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#col) | | |
### 事件
@ -62,11 +62,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
| 方法名 | 说明 | 参数 | 版本 |
| --- | --- | --- | --- |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 name 属性或者 name 组成的数组，如不传则移除整个表单的校验结果 | (nameList?: [NamePath](#NamePath)\[]) => void | |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | (nameList?: [NamePath](#NamePath)\[]) => void | |
| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
| validate | 触发表单验证, 同 validateFields | (nameList?: [NamePath](#NamePath)\[]) => Promise | |
| validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)\[]) => Promise | |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 name 属性或者 name 组成的数组，如不传则移除整个表单的校验结果 | (nameList?: [NamePath](#namepath)\[]) => void | |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | (nameList?: [NamePath](#namepath)\[]) => void | |
| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#namepath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
| validate | 触发表单验证, 同 validateFields | (nameList?: [NamePath](#namepath)\[]) => Promise | |
| validateFields | 触发表单验证 | (nameList?: [NamePath](#namepath)\[]) => Promise | |
#### NamePath
@ -84,14 +84,14 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
| htmlFor | 设置子元素 label `htmlFor` 属性 | string | | |
| label | label 标签的文本 | string\|slot | | |
| labelAlign | 标签文本对齐方式 | 'left' \| 'right' | 'right' | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#col) | | |
| name | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | | |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | |
| rules | 表单验证规则 | object \| array | | |
| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。 | boolean | false | 2.0.0 |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | |
| validateTrigger | 设置字段校验的时机 | string \| string\[] | `change` | 2.0.0 |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#col) | | |
### 注意：

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

@ -21,7 +21,7 @@ Previewable image.
| fallback | Load failure fault-tolerant src | string | - | 2.0.0 |
| height | Image height | string \| number | - | 2.0.0 |
| placeholder | Load placeholder, use default placeholder when set `true` | boolean \| slot | - | 2.0.0 |
| preview | preview config, disabled when `false` | boolean \| [previewType](#previewType) | true | 2.0.0 |
| preview | preview config, disabled when `false` | boolean \| [previewType](#previewtype) | true | 2.0.0 |
| src | Image path | string | - | 2.0.0 |
| previewMask | custom mask | false \| function \| slot | - | 3.2.0 |
| width | Image width | string \| number | - | 2.0.0 |

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

@ -22,7 +22,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
| fallback | 加载失败容错地址 | string | - | 2.0.0 |
| height | 图像高度 | string \| number | - | 2.0.0 |
| placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean \| slot | - | 2.0.0 |
| preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewType) | true | 2.0.0 |
| preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewtype) | true | 2.0.0 |
| src | 图片地址 | string | - | 2.0.0 |
| previewMask | 自定义 mask | false \| function \| slot | - | 3.2.0 |
| width | 图像宽度 | string \| number | - | 2.0.0 |

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

@ -88,7 +88,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid#API) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - | |
| breakpoint | 触发响应式布局的[断点](/components/grid#api) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - | |
| class | 容器 class | string | - | |
| collapsed(v-model) | 当前收起状态 | boolean | - | |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | |

4
components/list/demo/resposive.vue
View File

@ -8,11 +8,11 @@ title:
## zh-CN
响应式的栅格列表。尺寸与 [Layout Grid](https://www.antdv.com/components/grid-cn/#Col) 保持一致。
响应式的栅格列表。尺寸与 [Layout Grid](https://www.antdv.com/components/grid-cn/#col) 保持一致。
## en-US
Responsive grid list. The size property is as same as [Layout Grid](https://www.antdv.com/components/grid/#Col).
Responsive grid list. The size property is as same as [Layout Grid](https://www.antdv.com/components/grid/#col).
</docs>

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

@ -24,10 +24,10 @@ A list can be used to display content related to a single subject. The content c
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | | |
| header | List header renderer | string\|slot | - | | |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | | |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://www.antdv.com/components/spin/#API) | false | | |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://www.antdv.com/components/spin/#api) | false | | |
| loadMore | Shows a load more content | string\|slot | - | | |
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> | | |
| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \| object | false | | |
| pagination | Pagination [config](https://www.antdv.com/components/pagination/#api), hide it by setting it to false | boolean \| object | false | | |
| renderItem | Custom item renderer, #renderItem="{item, index}" | ({item, index}) => vNode | | - | |
| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | | |
| split | Toggles rendering of the split under the list item | boolean | true | | |
@ -40,7 +40,7 @@ Properties for pagination.
| -------- | ------------------------------------ | --------------------------- | -------- |
| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' |
More about pagination, please check [`Pagination`](https://www.antdv.com/components/pagination/#API).
More about pagination, please check [`Pagination`](https://www.antdv.com/components/pagination/#api).
### List grid props

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

@ -25,10 +25,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
| grid | 列表栅格配置 | object | - | | |
| header | 列表头部 | string\|slot | - | | |
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | | |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://www.antdv.com/components/spin-cn/#API) | false | | |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://www.antdv.com/components/spin-cn/#api) | false | | |
| loadMore | 加载更多 | string\|slot | - | | |
| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' | | |
| pagination | 对应的 `pagination` [配置](https://www.antdv.com/components/pagination-cn/#API), 设置 `false` 不显示 | boolean\|object | false | | |
| pagination | 对应的 `pagination` [配置](https://www.antdv.com/components/pagination-cn/#api), 设置 `false` 不显示 | boolean\|object | false | | |
| renderItem | 自定义`Item`函数，也可使用 #renderItem="{item, index}" | ({item, index}) => vNode | | - | |
| rowKey | 各项 key 的取值，可以是字符串或一个函数 | item => string\|number | | | |
| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` | | |
@ -42,7 +42,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
| -------- | ------------------ | --------------------------- | -------- |
| position | 指定分页显示的位置 | 'top' \| 'bottom' \| 'both' | 'bottom' |
更多配置项，请查看 [`Pagination`](https://www.antdv.com/components/pagination-cn/#API)。
更多配置项，请查看 [`Pagination`](https://www.antdv.com/components/pagination-cn/#api)。
### List grid props

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

@ -18,7 +18,7 @@ When requiring users to interact with the application, but without jumping to a
| --- | --- | --- | --- | --- |
| afterClose | Specify a function that will be called when modal is closed completely. | function | - | |
| bodyStyle | Body style for modal body element. Such as height, padding etc. | object | {} | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#api) | - | |
| cancelText | Text of the Cancel button | string\|slot | `Cancel` | |
| centered | Centered Modal | boolean | `false` | |
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true | |
@ -33,7 +33,7 @@ When requiring users to interact with the application, but without jumping to a
| mask | Whether show mask or not. | boolean | true | |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true | |
| maskStyle | Style for modal's mask element. | object | {} | |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#api) | - | |
| okText | Text of the OK button | string\|slot | `OK` | |
| okType | Button `type` of the OK button | string | `primary` | |
| title | The modal dialog's title | string\|slot | - | |

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

@ -21,7 +21,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fBrgSJBmavgAAA
| --- | --- | --- | --- | --- |
| afterClose | Modal 完全关闭后的回调 | function | 无 | |
| bodyStyle | Modal body 样式 | object | {} | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#api) | - | |
| cancelText | 取消按钮文字 | string\| slot | 取消 | |
| centered | 垂直居中展示 Modal | boolean | `false` | |
| closable | 是否显示右上角的关闭按钮 | boolean | true | |
@ -37,7 +37,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fBrgSJBmavgAAA
| mask | 是否展示遮罩 | boolean | true | |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
| maskStyle | 遮罩样式 | object | {} | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#api) | - | |
| okText | 确认按钮文字 | string\|slot | 确定 | |
| okType | 确认按钮类型 | string | primary | |
| title | 标题 | string\|slot | 无 | |

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

@ -19,12 +19,12 @@ The difference with the 'confirm' modal dialog is that it's more lightweight tha
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| cancelButton | custom render cancel button | slot | - | 3.0 |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#api) | - | |
| cancelText | text of the Cancel button | string\|slot | `Cancel` | |
| disabled | is show popconfirm when click its childrenNode | boolean | false | |
| icon | customize icon of confirmation | vNode\|slot | &lt;Icon type="exclamation-circle" /> | |
| okButton | custom render confirm button | slot | - | 3.0 |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#api) | - | |
| okText | text of the Confirm button | string\|slot | `Confirm` | |
| okType | Button `type` of the Confirm button | string | `primary` | |
| showCancel | Show cancel button | boolean | true | 3.0 |
@ -40,7 +40,7 @@ The difference with the 'confirm' modal dialog is that it's more lightweight tha
| confirm | callback of confirmation | function(e) | - | |
| openChange | Callback executed when visibility of the tooltip card is changed | function(open) | - | 4.0 |
Consult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.
Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
## Note

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

@ -18,12 +18,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HrFtQ6jJJFQAAA
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| cancelButton | 完全自定义取消按钮 | slot | - | 3.0 |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#api) | - | |
| cancelText | 取消按钮文字 | string\|slot | 取消 | |
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false | |
| icon | 自定义弹出气泡 Icon 图标 | vNode | &lt;Icon type="exclamation-circle" /> | |
| okButton | 完全自定义确认按钮 | slot | - | 3.0 |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#api) | - | |
| okText | 确认按钮文字 | string\|slot | 确定 | |
| okType | 确认按钮类型 | string | primary | |
| showCancel | 是否显示取消按钮 | boolean | true | 3.0 |
@ -39,7 +39,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HrFtQ6jJJFQAAA
| confirm | 点击确认的回调 | function(e) | |
| openChange | 显示隐藏的回调 | function(open) | 4.0 |
更多属性请参考 [Tooltip](/components/tooltip-cn/#API)。
更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
## 注意

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

@ -21,7 +21,7 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
| content | Content of the card | string\|slot\|vNode | - | |
| title | Title of the card | string\|slot\|VNode | - | |
Consult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.
Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
## Note

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

@ -22,7 +22,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*RMP_TrdZ3nsAAA
| content | 卡片内容 | string\|slot\|VNode | - | |
| title | 卡片标题 | string\|slot\|VNode | - | |
更多属性请参考 [Tooltip](/components/tooltip-cn/#API)。
更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。
## 注意

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

@ -22,10 +22,10 @@ Provide a placeholder while you wait for content to load, or to visualise conten
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| active | Show animation effect | boolean | false |
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#skeletonavatarprops) | false |
| loading | Display the skeleton when `true` | boolean | - |
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#skeletonparagraphprops) | true |
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#skeletontitleprops) | true |
## SkeletonAvatarProps

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

@ -23,10 +23,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| active | 是否展示动画效果 | boolean | false |
| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#skeletonavatarprops) | false |
| loading | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - |
| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#skeletonparagraphprops) | true |
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#skeletontitleprops) | true |
### SkeletonAvatarProps

12
components/table/index.en-US.md
View File

@ -73,9 +73,9 @@ Specify `dataSource` of Table as an array of data.
| bodyCell | custom body cell by slot | v-slot:bodyCell="{text, record, index, column}" | - | 3.0 |
| bordered | Whether to show all table borders | boolean | `false` | |
| childrenColumnName | The column contains children to display | string | `children` | |
| columns | Columns of table [config](#Column) | array | - | |
| columns | Columns of table [config](#column) | array | - | |
| components | Override default table elements | object | - | |
| customFilterDropdown | Customized filter overlay，need set `column.customFilterDropdown` | v-slot:customFilterDropdown="[FilterDropdownProps](#FilterDropdownProps)" | - | 3.0 |
| customFilterDropdown | Customized filter overlay，need set `column.customFilterDropdown` | v-slot:customFilterDropdown="[FilterDropdownProps](#filterdropdownprops)" | - | 3.0 |
| customFilterIcon | Customized filter icon | v-slot:customFilterIcon="{filtered, column}" | - | 3.0 |
| customHeaderRow | Set props on per header row | Function(columns, index) | - | |
| customRow | Set props on per row | Function(record, index) | - | |
@ -99,11 +99,11 @@ Specify `dataSource` of Table as an array of data.
| rowClassName | Row's className | Function(record, index):string | - | |
| rowExpandable | Enable row can be expandable | (record) => boolean | - | |
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record, index):string | `key` | |
| rowSelection | Row selection [config](#rowSelection) | object | null | |
| rowSelection | Row selection [config](#rowselection) | object | null | |
| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | |
| showExpandColumn | Show expand column | boolean | true | 3.0 |
| showHeader | Whether to show table header | boolean | `true` | |
| showSorterTooltip | The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object | boolean \| [Tooltip props](/components/tooltip/#API) | true | 3.0 |
| showSorterTooltip | The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object | boolean \| [Tooltip props](/components/tooltip/#api) | true | 3.0 |
| size | Size of table | `middle` \| `small` \| `large` | `large` | |
| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | 3.0 |
| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 3.0 |
@ -177,7 +177,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| maxWidth | Drag the maximum width of the column, it will be affected by the automatic adjustment and distribution of the table width | number | - | 3.0 |
| minWidth | Drag the minimum width of the column, it will be affected by the automatic adjustment and distribution of the table width | number | 50 | 3.0 |
| resizable | Whether the width can be adjusted by dragging, at this time width must be number type | boolean | - | 3.0 |
| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](#Breakpoint)\[] | - | 3.0 |
| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](#breakpoint)\[] | - | 3.0 |
| rowScope | Set scope attribute for all cells in this column | `row` \| `rowgroup` | - | 4.0 |
| sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` | 1.5.0 |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - | |
@ -224,7 +224,7 @@ Properties for row selection.
| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 3.0 |
| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 3.0 |
| selectedRowKeys | Controlled selected row keys | string\[] | \[] | |
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[] \| boolean | - | |
| selections | Custom selection [config](#rowselection), only displays default selections when set to `true` | object\[] \| boolean | - | |
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | |
| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - | |
| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows, nativeEvent) | - | |

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

@ -78,9 +78,9 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Sv8XQ50NB40AAA
| bodyCell | 个性化单元格 | v-slot:bodyCell="{text, record, index, column}" | - | 3.0 |
| bordered | 是否展示外边框和列边框 | boolean | false | |
| childrenColumnName | 指定树形结构的列名 | string | `children` | |
| columns | 表格列的配置描述，具体项见[下表](#Column) | array | - | |
| columns | 表格列的配置描述，具体项见[下表](#column) | array | - | |
| components | 覆盖默认的 table 元素 | object | - | |
| customFilterDropdown | 自定义筛选菜单，需要配合 `column.customFilterDropdown` 使用 | v-slot:customFilterDropdown="[FilterDropdownProps](#FilterDropdownProps)" | - | 3.0 |
| customFilterDropdown | 自定义筛选菜单，需要配合 `column.customFilterDropdown` 使用 | v-slot:customFilterDropdown="[FilterDropdownProps](#filterdropdownprops)" | - | 3.0 |
| customFilterIcon | 自定义筛选图标 | v-slot:customFilterIcon="{filtered, column}" | - | 3.0 |
| customHeaderRow | 设置头部行属性 | Function(columns, index) | - | |
| customRow | 设置行属性 | Function(record, index) | - | |
@ -104,7 +104,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Sv8XQ50NB40AAA
| rowClassName | 表格行的类名 | Function(record, index):string | - | |
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - | 3.0 |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string\|Function(record):string | 'key' | |
| rowSelection | 列表项是否可选择，[配置项](#rowSelection) | object | null | |
| rowSelection | 列表项是否可选择，[配置项](#rowselection) | object | null | |
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll) | object | - | |
| showExpandColumn | 设置是否展示行展开列 | boolean | true | 3.0 |
| showHeader | 是否显示表头 | boolean | true | |
@ -181,9 +181,9 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Sv8XQ50NB40AAA
| maxWidth | 拖动列最大宽度，会受到表格自动调整分配宽度影响 | number | - | 3.0 |
| minWidth | 拖动列最小宽度，会受到表格自动调整分配宽度影响 | number | 50 | 3.0 |
| resizable | 是否可拖动调整宽度，此时 width 必须是 number 类型 | boolean | - | 3.0 |
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](#Breakpoint)\[] | - | 3.0 |
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](#breakpoint)\[] | - | 3.0 |
| rowScope | 设置列范围 | `row` \| `rowgroup` | - | 4.0 |
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip/#API) | true | |
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip/#api) | true | |
| sortDirections | 支持的排序方式，取值为 `'ascend'` `'descend'` | Array | `['ascend', 'descend']` | 1.5.0 |
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - | |
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `null` | string | - | |

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

@ -22,7 +22,7 @@ By clicking the input box, you can select a time from a popup panel.
| clearIcon | The custom clear icon | v-slot:clearIcon | - | |
| clearText | The clear tooltip of icon | string | clear | |
| disabled | Determine whether the TimePicker is disabled | boolean | false | |
| disabledTime | To specify the time that cannot be selected | [DisabledTime](#DisabledTime) | - | 3.3.0 |
| disabledTime | To specify the time that cannot be selected | [DisabledTime](#disabledtime) | - | 3.3.0 |
| format | To set the time format | string | `HH:mm:ss` | |
| getPopupContainer | To set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | |
| hideDisabledOptions | Whether hide the options that can not be selected | boolean | false | |
@ -68,12 +68,12 @@ type DisabledTime = (now: Dayjs) => {
### TimeRangePicker
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 |
| --- | --- | --- | --- | --- |
| order | Order start and end time | boolean | true | |
| disabledTime | To specify the time that cannot be selected | [RangeDisabledTime](#RangeDisabledTime) | - | 3.3.0 |
| disabledTime | To specify the time that cannot be selected | [RangeDisabledTime](#rangedisabledtime) | - | 3.3.0 |
#### RangeDisabledTime

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

@ -23,7 +23,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1hDmQJIDFJQAAA
| clearIcon | 自定义的清除图标 | v-slot:clearIcon | - | |
| clearText | 清除按钮的提示文案 | string | clear | |
| disabled | 禁用全部操作 | boolean | false | |
| disabledTime | 不可选择的时间 | [DisabledTime](#DisabledTime) | - | 3.3.0 |
| disabledTime | 不可选择的时间 | [DisabledTime](#disabledtime) | - | 3.3.0 |
| format | 展示的时间格式 | string | `HH:mm:ss` | |
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
@ -70,12 +70,12 @@ type DisabledTime = (now: Dayjs) => {
### TimeRangePicker
属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：
属性与 DatePicker 的 [RangePicker](/components/date-picker/#rangepicker) 相同。还包含以下属性：
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------ | -------------------- | --------------------------------------- | ------ | ----- |
| order | 始末时间是否自动排序 | boolean | true | |
| disabledTime | 不可选择的时间 | [RangeDisabledTime](#RangeDisabledTime) | - | 3.3.0 |
| disabledTime | 不可选择的时间 | [RangeDisabledTime](#pangedisabledtime) | - | 3.3.0 |
#### RangeDisabledTime

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

@ -40,7 +40,7 @@ Almost anything can be represented in a tree structure. Examples include directo
| showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean}(3.0+) | false | |
| switcherIcon | customize collapse/expand icon of tree node | v-slot:switcherIcon="{active, checked, expanded, loading, selected, halfChecked, title, key, children, dataRef, data, defaultIcon, switcherCls}" | - | |
| title | custom title | slot | | 2.0.0 |
| treeData | treeNode of tree, please use `treeNodes` before v1.1.4 | [TreeNode\[\]](#TreeNode) | - | |
| treeData | treeNode of tree, please use `treeNodes` before v1.1.4 | [TreeNode\[\]](#treenode) | - | |
| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |
### Events

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

@ -41,7 +41,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1GeUQJPTGUYAAA
| showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean}(3.0+) | false | | |
| switcherIcon | 自定义树节点的展开/折叠图标 | v-slot:switcherIcon="{active, checked, expanded, loading, selected, halfChecked, title, key, children, dataRef, data, defaultIcon, switcherCls}" | - | | |
| title | 自定义标题 | slot | | 2.0.0 | |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | [TreeNode\[\]](#TreeNode) | -- | | |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | [TreeNode\[\]](#treenode) | -- | | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 | |
### 事件

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

@ -41,7 +41,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
| openFileDialogOnClick | Click open file dialog | boolean | true | 3.0 | |
| previewFile | Customize preview file logic | (file: File \| Blob) => Promise&lt;dataURL: string> | - | 1.5.0 | |
| previewIcon | custom preview icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 3.0 | |
| progress | Custom progress bar | [ProgressProps](/components/progress/#api) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 3.0 | |
| removeIcon | custom remove icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | showDownloadIcon(3.0) | |
| supportServerRender | Need to be turned on while the server side is rendering. | boolean | false | | |

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

@ -42,7 +42,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*l1nlSryXib8AAA
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | 3.0 | |
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise&lt;dataURL: string> | 无 | 1.5.0 | |
| previewIcon | 自定义预览 icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#API)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 3.0 | |
| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#api)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 3.0 | |
| removeIcon | 自定义删除 icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | |
| showUploadList | 是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon, showRemoveIcon 和 showDownloadIcon | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | showDownloadIcon(3.0) | |
| supportServerRender | 服务端渲染时需要打开这个 | boolean | false | | |

2
components/vc-table/interface.ts
View File

@ -1,5 +1,5 @@
/**
* ColumnType which applied in antd: https://ant.design/components/table-cn/#Column
* ColumnType which applied in antd: https://ant.design/components/table-cn/#column
* - defaultSortOrder
* - filterDropdown
* - filterDropdownOpen

1
package.json
View File

@ -38,6 +38,7 @@
"predist": "npm run version",
"presite": "npm run version & npm run routes & npm run collect-token-statistic & npm run token-meta",
"dev": "npm run predev && npm run routes && vite serve site",
"fast-dev": "npm run routes && vite serve site",
"test": "cross-env NODE_ENV=test jest --config .jest.js",
"compile": "node antd-tools/cli/run.js compile",
"generator-webtypes": "tsc -p antd-tools/generator-types/tsconfig.json && node antd-tools/generator-types/index.js",

4
plugin/md/markdown/plugins/slugify.ts
View File

@ -19,7 +19,7 @@ export const slugify = (str: string): string => {
.replace(/^\-+|\-+$/g, '')
// ensure it doesn't start with a number (#121)
.replace(/^(\d)/, '_$1')
// lowercase
// .toLowerCase()
// lowercase
.toLowerCase()
);
};

6
site/src/components/DemoBox.vue
View File

@ -113,7 +113,7 @@ export default defineComponent({
const codeRef = ref<HTMLDivElement>();
const sectionId = computed(() => {
const relativePath = props.jsfiddle?.relativePath || '';
return `${relativePath.split('/').join('-').replace('.vue', '')}`;
return `${relativePath.split('/').join('-').replace('.vue', '')}`.toLocaleLowerCase();
});
const inIframe = inject('inIframe', false);
const iframeHeight = computed(() => props.jsfiddle?.iframe);
@ -154,11 +154,11 @@ export default defineComponent({
props.jsfiddle && props.jsfiddle.docHtml
? (
props.jsfiddle.docHtml.replace(
`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
`<h2 id="zh-cn">zh-CN <a class="header-anchor" href="#zh-cn">
<span aria-hidden="true" class="anchor">#</span>
</a></h2>`,
'',
).split(`<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
).split(`<h2 id="en-us">en-US <a class="header-anchor" href="#en-us">
<span aria-hidden="true" class="anchor">#</span>
</a></h2>`)[globalConfig.isZhCN.value ? 0 : 1] || ''
).trim()

2
site/src/components/antdv-token-previewer/component-demos/anchor/anchor.tsx
View File

@ -8,7 +8,7 @@ const Demo = () => {
<Anchor>
<Link href="#" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#api" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>

2
site/src/components/antdv-token-previewer/component-demos/anchor/anchorInLayout.tsx
View File

@ -13,7 +13,7 @@ const Demo = defineComponent({
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#api" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>

2
site/src/components/rice/GoogleAds.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="false" id="API" class="google-ads">
<div v-if="false" id="api" class="google-ads">
<ins
ref="ins"
class="adsbygoogle"

6
site/src/layouts/Demo.vue
View File

@ -34,12 +34,12 @@ export default defineComponent({
return props?.pageData?.html || '';
});
const description = computed(() => {
return docHtml.value.split('<h2 id="API">API <a class="header-anchor" href="#API">')[0];
return docHtml.value.split('<h2 id="api">API <a class="header-anchor" href="#api">')[0];
});
const api = computed(() => {
return `
<h2 id="API"><span>API</span><a href="#API" class="anchor">#</a></h2>
${docHtml.value.split('<h2 id="API">API <a class="header-anchor" href="#API">')[1]}
<h2 id="api"><span>API</span><a href="#api" class="anchor">#</a></h2>
${docHtml.value.split('<h2 id="api">API <a class="header-anchor" href="#api">')[1]}
`;
});
return { frontmatter, description, api, route, showAd, docHtml };

63
site/src/layouts/index.vue
View File

@ -1,18 +1,11 @@
<template>
<Header />
<div v-if="headers.length" class="toc-affix" :style="y > 60 ? 'position:fixed; top: 16px;' : ''">
<a-anchor style="width: 160px">
<a-anchor-link
v-for="h in headers"
:key="h.title"
:href="h.href || `#${slugifyTitle(h.title)}`"
:target="h.target"
>
<template #title>
<LinkOutlined v-if="h.target" />
{{ isZhCN ? h.title : h.enTitle || h.title }}
</template>
</a-anchor-link>
<a-anchor style="width: 160px" :items="headers">
<template #customTitle="item">
<LinkOutlined v-if="item.target" />
{{ item.title }}
</template>
</a-anchor>
</div>
<div class="main-wrapper">
@ -211,6 +204,21 @@ export default defineComponent({
? matchCom.value[isZhCN.value ? 'CN' : 'US']?.pageData
: (matchCom.value as any)?.pageData,
);
const slugifyTitle = (str: string) => {
return (
str
// Remove control characters
.replace(rControl, '')
// Replace special characters
.replace(rSpecial, '-')
// Remove continuos separators
.replace(/\-{2,}/g, '-')
// Remove prefixing and trailing separtors
.replace(/^\-+|\-+$/g, '')
// ensure it doesn't start with a number (#121)
.replace(/^(\d)/, '_$1')
);
};
const headers = computed(() => {
let tempHeaders = (pageData.value?.headers || []).filter((h: Header) => h.level === 2);
if (isDemo.value) {
@ -245,10 +253,15 @@ export default defineComponent({
],
);
}
tempHeaders.push({ title: 'API', href: '#API' });
tempHeaders.push({ title: 'API', href: '#api' });
}
return tempHeaders;
return tempHeaders.map(header => ({
...header,
key: header.title,
title: isZhCN.value ? header.title : header.enTitle || header.title,
href: (header.href || `#${slugifyTitle(header.title)}`).toLocaleLowerCase(),
}));
});
const mainContainerClass = computed(() => {
@ -261,21 +274,6 @@ export default defineComponent({
visible.value = !visible.value;
};
return {
slugifyTitle: (str: string) => {
return (
str
// Remove control characters
.replace(rControl, '')
// Replace special characters
.replace(rSpecial, '-')
// Remove continuos separators
.replace(/\-{2,}/g, '-')
// Remove prefixing and trailing separtors
.replace(/^\-+|\-+$/g, '')
// ensure it doesn't start with a number (#121)
.replace(/^(\d)/, '_$1')
);
},
themeMode,
visible,
isMobile: globalConfig.isMobile,
@ -303,14 +301,7 @@ export default defineComponent({
.toc-affix :deep(.ant-anchor) {
font-size: 12px;
max-width: 110px;
.ant-anchor-link {
border-left: 2px solid #f0f0f0;
padding: 4px 0 4px 16px;
}
.ant-anchor-link-active {
border-left: 2px solid #1890ff;
}
.ant-anchor-ink::before {
display: none;
}

81
site/src/vueDocs/use-with-vue-cli.en-US.md
View File

@ -63,7 +63,7 @@ Modify `src/main.js`, import Button component from `antd`.
```jsx
import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import 'ant-design-vue/dist/reset.css';
import App from './App';
const app = createApp(App);
@ -86,82 +86,3 @@ Modify `src/App.vue`。
```
Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `vue-cli` at its [User Guide ](https://github.com/vuejs/vue-cli/blob/master/README.md).
## Advanced Guides
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import all styles of components in the project which may be a network performance issue.
Now we need to customize the default webpack config.
### Use babel-plugin-import
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/docs/vue/getting-started/#Import-on-Demand)).
```bash
$ yarn add babel-plugin-import --dev
```
#### if you use vue-cli 2
Modify `.babelrc`.
```diff
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
- "plugins": ["transform-vue-jsx", "transform-runtime"]
+ "plugins": [
+ "transform-vue-jsx",
+ "transform-runtime",
+ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
+ ]
}
```
#### if you use vue-cli 3
Modify `babel.config.js`
```diff
module.exports = {
presets: ["@vue/app"],
+ plugins: [
+ [
+ "import",
+ { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
+ ]
+ ]
};
```
Remove the `import 'ant-design-vue/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
```diff
// src/main.js
import Vue from 'vue'
- import Button from 'ant-design-vue/lib/button';
+ import { Button } from 'ant-design-vue';
- import 'ant-design-vue/dist/antd.css'
import App from './App'
Vue.component(Button.name, Button)
- Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
```
Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/vue/getting-started/#Import-on-Demand).
### Customize Theme
According to the [Customize Theme documentation](/docs/vue/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader).

79
site/src/vueDocs/use-with-vue-cli.zh-CN.md
View File

@ -85,82 +85,3 @@ app.use(Button).mount('#app');
```
好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vue-cli 的[官方文档](https://github.com/vuejs/vue-cli/blob/master/README.md)。
## 高级配置
我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。
此时我们需要对 vue-cli 的默认配置进行自定义。
### 使用 babel-plugin-import
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/vue/getting-started-cn/#按需加载)）。
```bash
$ yarn add babel-plugin-import --dev
```
#### 使用 vue-cli 2 的小伙伴
修改`.babelrc`文件，配置 babel-plugin-import
```diff
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
- "plugins": ["transform-vue-jsx", "transform-runtime"]
+ "plugins": [
+ "transform-vue-jsx",
+ "transform-runtime",
+ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
+ ]
}
```
#### 使用 vue-cli 3 的小伙伴
修改`babel.config.js`文件，配置 babel-plugin-import
```diff
module.exports = {
presets: ["@vue/app"],
+ plugins: [
+ [
+ "import",
+ { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
+ ]
+ ]
};
```
然后移除前面在 `src/main.js` 里全量添加的 `import 'ant-design-vue/dist/antd.css';` 样式代码，并且按下面的格式引入模块。
```diff
// src/main.js
import Vue from 'vue'
- import Button from 'ant-design-vue/lib/button';
+ import { Button } from 'ant-design-vue';
- import 'ant-design-vue/dist/antd.css'
import App from './App'
Vue.component(Button.name, Button)
- Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount("#app");
```
最后重启 `npm run serve` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/docs/vue/getting-started-cn/#按需加载)。
### 自定义主题
按照 [配置主题](/docs/vue/customize-theme-cn) 的要求，自定义主题需要用到 less 变量覆盖功能。