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

style: format code

pull/1236/head
tangjinzhou 2019-09-28 20:45:07 +08:00
parent d419f9c0d9
commit 4cd44aea3d
635 changed files with 12364 additions and 12687 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design-vue---.md vendored
View File

@ -1,9 +1,7 @@
---
name: "⚠️ Please use issue-helper ⚠️"
about: The issue which is not created via https://vuecomponent.github.io/issue-helper/ will be closed
immediately.
name: '⚠️ Please use issue-helper ⚠️'
about: The issue which is not created via https://vuecomponent.github.io/issue-helper/ will be closed immediately.
labels:
---
The issue which is not created via https://vuecomponent.github.io/issue-helper/ will be closed immediately.

6
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@ -1,8 +1,6 @@
First of all, thank you for your contribution! 😄
New feature please send pull request to feature branch, and rest to master branch.
Pull request will be merged after one of collaborators approve.
Please makes sure that these form are filled before submitting your pull request, thank you!
New feature please send pull request to feature branch, and rest to master branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!
[[中文版模板 / Chinese template](https://github.com/vueComponent/ant-design-vue/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)]
@ -50,4 +48,4 @@ Please makes sure that these form are filled before submitting your pull request
### Additional Plan? (Optional if not new feature)
> If this PR related with other PR or following info. You can type here.
> If this PR related with other PR or following info. You can type here.

8
.github/PULL_REQUEST_TEMPLATE/pr_cn.md vendored
View File

@ -1,8 +1,6 @@
首先，感谢你的贡献！ 😄
新特性请提交至 feature 分支，其余可提交至 master 分支。
在一个维护者审核通过后合并。
请确保填写以下 pull request 的信息，谢谢！~
新特性请提交至 feature 分支，其余可提交至 master 分支。在一个维护者审核通过后合并。请确保填写以下 pull request 的信息，谢谢！~
[[English Template / 英文模板](?expand=1)]
@ -28,7 +26,7 @@
> 1. 基本的解决思路和其他可选方案。
> 2. 列出最终的 API 实现和用法。
> 3. 涉及UI/交互变动需要有截图或 GIF。
> 3. 涉及 UI/交互变动需要有截图或 GIF。
### 对用户的影响和可能的风险（非新功能可选）
@ -49,4 +47,4 @@
### 后续计划（非新功能可选）
> 如果这个提交后面还有相关的其他提交和跟进信息，可以写在这里。
> 如果这个提交后面还有相关的其他提交和跟进信息，可以写在这里。

3
BACKERS.md
View File

@ -35,9 +35,8 @@
<h2 align="center">支付宝/微信</h2>
### 使用支付宝/微信的赞助的用户，如需要添加名单，赞助后可发github账号到邮箱(415800467@qq.com)
### 使用支付宝/微信的赞助的用户，如需要添加名单，赞助后可发 github 账号到邮箱(415800467@qq.com)
- [fastgoo](https://github.com/fastgoo)
- [sendya](https://github.com/sendya)
- [limichange](https://github.com/limichange)

116
CHANGELOG.en-US.md
View File

@ -4,30 +4,36 @@
#### Release Schedule
* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
* Monthly release: minor version for new features.
* Major version release is not included in this schedule for breaking change and new features.
- Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
- Monthly release: minor version for new features.
- Major version release is not included in this schedule for breaking change and new features.
---
## 1.3.16
`2019-08-25`
- 🐞 Fix `Select` component to uninstall component error when there is no input [#1091](https://github.com/vueComponent/ant-design-vue/pull/1091)
- 🐞 Fix `Collapse` error when no child element [#1116](https://github.com/vueComponent/ant-design-vue/pull/1116)
- 🐞 Fix TypeScript type definitions.
## 1.3.15
`2019-08-17`
- 🐞 Fix `Select` component cannot scroll under IE [#999](https://github.com/vueComponent/ant-design-vue/issues/999)
- 🐞 Fix `Form` `initialValue` warning [#1076](https://github.com/vueComponent/ant-design-vue/issues/1076)
- 🐞 Fix `Form` `initialValue` warning [#1076](https://github.com/vueComponent/ant-design-vue/issues/1076)
- 🐞 Fix `Form` error when verifying `Number` type [#1090](https://github.com/vueComponent/ant-design-vue/issues/1090)
## 1.3.14
`2019-08-12`
- 🐞 Fix `MenuItem` parsing array `class` incorrect question [#1009](https://github.com/vueComponent/ant-design-vue/issues/1009)
- 🐞 Fix an error when npm install [#997](https://github.com/vueComponent/ant-design-vue/issues/997)
- 🐞 Fix `Select` component cannot scroll under IE [#999] (https://github.com/vueComponent/ant-design-vue/issues/999)
- 🐞 Fix `Select` component does not trigger focus event problem [#999] (https://github.com/vueComponent/ant-design-vue/issues/999)
- 🐞 Fix `Select` component cannot scroll under IE [#999](https://github.com/vueComponent/ant-design-vue/issues/999)
- 🐞 Fix `Select` component does not trigger focus event problem [#999](https://github.com/vueComponent/ant-design-vue/issues/999)
- 🐞 Fix `DropdownButton` `size` attribute does not work [#71b7c9](https://github.com/vueComponent/ant-design-vue/commit/71b7c9d33895f55694e28aaba4b2cfca7228771b)
- 🐞 Fix `Table` component does not support vue 2.6 v-slot syntax problem [#1058](https://github.com/vueComponent/ant-design-vue/issues/1058)
- 🌟 `Popover` add `builtinPlacements` attribute [#1073](https://github.com/vueComponent/ant-design-vue/issues/1073)
@ -35,20 +41,25 @@
- 🌟 `Modal.confirm` `title` and `content` support function [#824](https://github.com/vueComponent/ant-design-vue/issues/824)
## 1.3.13
`2019-07-22`
- 🐞 Fix `dist` missing `antd.less` file problem [#995](https://github.com/vueComponent/ant-design-vue/issues/995)
## 1.3.12
`2019-07-22`
- 🐞 `package.json` `files` add `scripts`
## 1.3.11
`2019-07-22`
- Dropdown
- 🐞 Uodate disable style [#912](https://github.com/vueComponent/ant-design-vue/pull/912) [#921](https://github.com/vueComponent/ant-design-vue/pull/921)
- 🐞 Fix `SubMenu` flashing problem [#975](https://github.com/vueComponent/ant-design-vue/issues/970)
- 🌟 `AutoComplete` `Cascader` `DatePicker` `DropDown` `Select` `TimePicker` add an instance of the popup reference `popupRef` [f9373e](https://github.com/vueComponent/ant-design-vue/commit/f9373e44ce229ab0ba94ababbd686e6ad6e9f10f)
- 🌟 `AutoComplete` `Cascader` `DatePicker` `DropDown` `Select` `TimePicker` add an instance of the popup reference `popupRef` [f9373e](https://github.com/vueComponent/ant-design-vue/commit/f9373e44ce229ab0ba94ababbd686e6ad6e9f10f)
- 🐞 Fix `DatePicker` can not open when placeholder is chinese at ie 10 and 11 [#865](https://github.com/vueComponent/ant-design-vue/issues/865)
- 🌟 `DatePicker` add custom render trigger [#957](https://github.com/vueComponent/ant-design-vue/pull/957)
- 🌟 `@ant-design/icons-vue` update to `^2.0.0`
@ -60,11 +71,15 @@
- 🐞 Fix TypeScript type definitions.
## 1.3.10
`2019-06-11`
- 🐞 Remove useless `module.export` of package. [#850](https://github.com/vueComponent/ant-design-vue/issues/850)
## 1.3.9
`2019-05-26`
- 🐞 Fix `TreeSelect` without `dataRef` [#712](https://github.com/vueComponent/ant-design-vue/issues/712)
- 🌟 `Tooltip` add `destroyTooltipOnHide` to identify whether to destroy tooltip after hiding [#727](https://github.com/vueComponent/ant-design-vue/issues/727)
- 🐞 Fix `Avatar` does not update the problem when setting `src` dynamically [#731](https://github.com/vueComponent/ant-design-vue/issues/731)
@ -78,18 +93,24 @@
- 🐞 Fix `DirectoryTree` expandAction="doubleclick" does not work [#745](https://github.com/vueComponent/ant-design-vue/issues/745)
## 1.3.8
`2019-04-04`
- 🐞 Fix `Table` unclickable problem under IE [#504](https://github.com/vueComponent/ant-design-vue/issues/504)
- 🐞 Fix `Table` Header is not aligned under Firefox [#579](https://github.com/vueComponent/ant-design-vue/issues/579)
- 🌟 Drawer `Drawer` add custom `handel`
- 🐞 Fix TypeScript type definitions.
## 1.3.7
`2019-03-18`
- 🐞 Fix `Select` `selectedKeys` type validation error [#597](https://github.com/vueComponent/ant-design-vue/issues/597)
## 1.3.6
`2019-03-17`
- 🐞 Fix `Select` title attribute to display confusion [#588](https://github.com/vueComponent/ant-design-vue/issues/588)
- 🐞 Fix `InputSearch` does not support slot mode customization addonAfter and addonBefore issues [#581](https://github.com/vueComponent/ant-design-vue/issues/581)
- 🐞 Fix `Input` repeat class question [#faf9ba](https://github.com/vueComponent/ant-design-vue/commit/faf9ba0033eed9ae6ac17879f2e39dd341db847f)
@ -98,6 +119,7 @@
- 🐞 Fix some TypeScript definitions.
## 1.3.5
`2019-02-23`
- 🌟 Optimize the `Popover` `Popconfirm` component arrow style.
@ -110,15 +132,18 @@
- 🐞 Fix some TypeScript definitions.
## 1.3.4
`2019-01-31`
🎉 🎉 🎉 Happy New Year!
- 🐞 fix: AutoComplete placeholder not display when disabled. [#402](https://github.com/vueComponent/ant-design-vue/issues/402)。
- 🐞 Add the `BreadcrmbItem` ts type file.[#452](https://github.com/vueComponent/ant-design-vue/issues/452)。
- 🐞 Fixed an issue where the FormItem was not updated when it was in a subcomponent. [#446](https://github.com/vueComponent/ant-design-vue/issues/446)。
- 🐞 Fix some component TypeScript definitions.
## 1.3.3
`2019-01-26`
- 🐞 Fix `message` not close When you configure maxcount.[#428](https://github.com/vueComponent/ant-design-vue/pull/428)。
@ -127,24 +152,28 @@
- 📝 Update the document: form adds the `preserve` description, and the `icon` modifies the custom component reference document description.
## 1.3.2
`2019-01-17`
- 🐞 Fix Form reports an error when using the obsolete API `autoCreateForm`.[#413](https://github.com/vueComponent/ant-design-vue/issues/413)。
- 🐞 Fix Slider error when clicking mark. [#407](https://github.com/vueComponent/ant-design-vue/issues/407)。
## 1.3.1
`2019-01-15`
- 🐞 Fixed the `Table` component could not be scrolled under ie.。[#390](https://github.com/vueComponent/ant-design-vue/issues/390)。
- 🐞 Fix `Form` does not clear that does not need to check the field.[#367](https://github.com/vueComponent/ant-design-vue/issues/367)。
## 1.3.0
`2019-01-12`
- 🎉 🎉 🎉 Publish the vscode plugin [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
- 🎉 🎉 🎉 Optimize official website document interaction
### Component features and styles are synchronized to antd version 3.11.6.
1.3.0 brings two new Components, a lot of exciting changes and new features.
- 🔥 Added a new component [Comment](https://vue.ant.design/components/comment/)。
@ -182,14 +211,15 @@ Component Fixes / Enhancements:
- 🐞 Fix Tooltip in the disabled state, the style error problem.[#389](https://github.com/vueComponent/ant-design-vue/issues/389)
- 🐞 Fix some component TypeScript definitions.
## 1.2.5
`2019-01-06`
- 🌟 Add `Typescript` type file[#250](https://github.com/vueComponent/ant-design-vue/issues/250)
- 🐞 Fix `Icon` component can't support static class and dynamic class problems at the same time[#371](https://github.com/vueComponent/ant-design-vue/issues/371)
## 1.2.4
`2018-12-29`
- 🐞 Fix `Select` component does not trigger `popupScroll` event[#350](https://github.com/vueComponent/ant-design-vue/issues/350)
@ -202,6 +232,7 @@ Component Fixes / Enhancements:
- 🐞 Remove the expansion animation when the `Menu` component is initialized.[#338](https://github.com/vueComponent/ant-design-vue/issues/338)
## 1.2.3
`2018-12-25`
- 📝 Remove Christmas egg.
@ -210,6 +241,7 @@ Component Fixes / Enhancements:
- 🐞 Fix the `Tree` component warning duplicate `key` question when using `TreeNode`。
## 1.2.2
`2018-12-19`
- 🐞 `Datepicker` render footer twice question. [#315](https://github.com/vueComponent/ant-design-vue/issues/315)
@ -222,13 +254,16 @@ Component Fixes / Enhancements:
- 🐞 `Icon` support native event [cffef3](https://github.com/vueComponent/ant-design-vue/commit/cffef392e5605de8d342787d7562e81ca8588800)
## 1.2.1
`2018-12-17`
- 🐞 Fix `Menu` flashing problem when scaling under `Layout`
- 🐞 Fix `Icon` report Warning problem
## 1.2.0
`2018-12-16`
### Synchronize with antd 3.10.x
- 🔥🔥🔥 replaced font icons with svg icons which bring benefits below:：
@ -265,9 +300,10 @@ Component Fixes / Enhancements:
## 1.1.10
`2018-12-7`
- 🔥🔥🔥 In the 1.1.10 version, the `Form` component better supports the single-file tempalte syntax. In previous versions, complex component requirements were required to be implemented using JSX. In order to better use the automatic collection and validation of Form forms in the template, we have optimized the way components are used. All Demo files are refactored using the latest syntax.
However, for the previous API, continue to support, you can not worry about the API changes, resulting in problems in the existing system.
````html
- 🔥🔥🔥 In the 1.1.10 version, the `Form` component better supports the single-file tempalte syntax. In previous versions, complex component requirements were required to be implemented using JSX. In order to better use the automatic collection and validation of Form forms in the template, we have optimized the way components are used. All Demo files are refactored using the latest syntax. However, for the previous API, continue to support, you can not worry about the API changes, resulting in problems in the existing system.
```html
<template>
<a-form :form="form">
<a-form-item>
@ -282,7 +318,8 @@ export default {
},
}
</script>
````
```
- 🐞 Fix `Steps` component `labelPlacement` does not work [#281](https://github.com/vueComponent/ant-design-vue/issues/281)
- 🐞 Fix the `Timeline` component style problem, add `reverse` `mode` props [#8e37cd](https://github.com/vueComponent/ant-design-vue/commit/8e37cd89f92ee2541f641fd860785cfd2361b2b3)
- `Tree`
@ -292,24 +329,25 @@ export default {
## 1.1.9
`2018-11-26`
- 🐞 Fix the `TreeSelect` component getPopupContainer does not work [#265](https://github.com/vueComponent/ant-design-vue/issues/265)
- 🐞 Fix `Carousel` component on-demand loading does not work [#271](https://github.com/vueComponent/ant-design-vue/issues/271)
- 🐞 Fix `Upload` component remove event no return value problem [#259](https://github.com/vueComponent/ant-design-vue/issues/259)
## 1.1.8
`2018-11-11`
- `Progress`
- 🐞 Fix `circle` type does not support `strokeColor` problem [#238](https://github.com/vueComponent/ant-design-vue/issues/238)
- 🐞 Add `normal` type [#257](https://github.com/vueComponent/ant-design-vue/issues/257)
- 🐞 Fix `Cascader` component does not support `getPopupContainer` problem [#257](https://github.com/vueComponent/ant-design-vue/issues/257)
- 🐞 Fix `Cascader` component does not support `getPopupContainer` problem [#257](https://github.com/vueComponent/ant-design-vue/issues/257)
- 🌟 `Tooltip` support align [#252](https://github.com/vueComponent/ant-design-vue/issues/252)
## 1.1.7
`2018-10-27`
- 🐞 Fix `Cascader` component type error problem [#219](https://github.com/vueComponent/ant-design-vue/issues/219)
- 🐞 Fix `Tree` component custom Icon the callback parameter order error [#223](https://github.com/vueComponent/ant-design-vue/issues/223)
- 🐞 Fix `Table` pagination trigger multiple change events when `showSizeChange=true` [#228](https://github.com/vueComponent/ant-design-vue/issues/228)
@ -320,20 +358,22 @@ export default {
## 1.1.6
`2018-10-10`
- 🐞 Fix `Select` component keyboard event error [#217](https://github.com/vueComponent/ant-design-vue/issues/217)
- 🐞 Fix the `Drawer` component children update issue [#209](https://github.com/vueComponent/ant-design-vue/issues/209)
## 1.1.4
`2018-09-29`
- 🛠 Refactor the `vc-tree` component and add a directory tree component
- 🐞 Fix `tabs` component property `tabBarGutter` does not work [#205](https://github.com/vueComponent/ant-design-vue/issues/205)
- 🐞 Fix `table` component data synchronization error [#202](https://github.com/vueComponent/ant-design-vue/issues/202)
- 🛠 Refactor the `vc-tree` component and add a directory tree component
- 🐞 Fix `tabs` component property `tabBarGutter` does not work [#205](https://github.com/vueComponent/ant-design-vue/issues/205)
- 🐞 Fix `table` component data synchronization error [#202](https://github.com/vueComponent/ant-design-vue/issues/202)
## 1.1.3
`2018-09-22`
- 🎉 Optimize component registration methods, such as Vue.use(Form) [a6620c](https://github.com/vueComponent/ant-design-vue/commit/a6620cbbe58cc1694a994e6714853906d1d794be)
- 🐞 `Select.Option` component `value` property supports `0` [#194](https://github.com/vueComponent/ant-design-vue/issues/194)
- 🐞 Fix `Layout.Sider` trigger button width does not work [#201](https://github.com/vueComponent/ant-design-vue/issues/201)
@ -343,6 +383,7 @@ export default {
## 1.1.2
`2018-09-17`
- 🎉 Synchronize antd3.8.4 style
- 🌟 Tag component adds `visible` attribute and wave effect
- 🐞 Fix the 'Cascader` component, the selected item is not expanded [#195](https://github.com/vueComponent/ant-design-vue/issues/195)
@ -350,6 +391,7 @@ export default {
## 1.1.1
`2018-09-13`
- 🐞 dropdown position incorrect caused by window size change [#184](https://github.com/vueComponent/ant-design-vue/issues/184)
- 🐞 tabs container add custom event listeners [#189](https://github.com/vueComponent/ant-design-vue/issues/189)
- 🐞 Fixing 'centered` does not work when calling Modal window via API form [#183](https://github.com/vueComponent/ant-design-vue/issues/183)
@ -358,30 +400,33 @@ export default {
## 1.1.0
`2018-09-11`
- 🎉 Synchronize components from [3.4.0](https://github.com/ant-design/ant-design/releases/tag/3.4.0) to antd [3.8.2](https://github.com/ Ant-design/ant-design/releases/tag/3.8.2)
- 🌟 Add the `Drawer` component
- 🐞 Fix `Spin` content flicker problem [#174](https://github.com/vueComponent/ant-design-vue/issues/174)
- 🐞 Fix `Spin` content flicker problem [#174](https://github.com/vueComponent/ant-design-vue/issues/174)
- 🐞 Fix `RangePicker` selection is not disabled [#158](https://github.com/vueComponent/ant-design-vue/issues/158)
- 🐞 Fixed throw error when `Form` value was `null` [#153](https://github.com/vueComponent/ant-design-vue/issues/153)
- 🐞 Fix the `Modal` subcomponent to repeat the `mounted` question [#152](https://github.com/vueComponent/ant-design-vue/issues/152)
- 🐞 Fix the `Modal` subcomponent to repeat the `mounted` question [#152](https://github.com/vueComponent/ant-design-vue/issues/152)
- 🐞 Fixed donot `render` after 'Transfer` search filter [#148](https://github.com/vueComponent/ant-design-vue/issues/148)
- 🐞 Fixed multi-level `Tabs` component nesting causing `size` not to work [#144](https://github.com/vueComponent/ant-design-vue/issues/144)
- 🐞 Fixed multi-level `Tabs` component nesting causing `size` not to work [#144](https://github.com/vueComponent/ant-design-vue/issues/144)
- 🐞 Fix `TreeSelect`searchPlaceholder does not work [#125](https://github.com/vueComponent/ant-design-vue/issues/125)
- 🛠 Other issues that do not appear in the issue, see antd changelog
## 1.0.3
`2018-08-11`
- 🐞 Fix `Select` children not to update the problem [#106](https://github.com/vueComponent/ant-design-vue/issues/106)
- 🐞 Fix `Badge` offset x y axis order error and support number type [#99](https://github.com/vueComponent/ant-design-vue/issues/99)
- 🐞 Fix `Input` trigger input event problem when placeholder is Chinese in IE[#92](https://github.com/vueComponent/ant-design-vue/issues/92)
- 🐞 Fix `Avatar` does not accept event issues [#102] (https://github.com/vueComponent/ant-design-vue/issues/102)
- 🐞 Fix `Avatar` does not accept event issues [#102](https://github.com/vueComponent/ant-design-vue/issues/102)
- 🐞 Fix `grid.row` gutter type error problem [4af03c4](https://github.com/vueComponent/ant-design-vue/commit/4af03c4ab9596ede9d1b79c8308d0a3ed58b7a11)
- 🐞 Fix `CheckboxGroup` to report defaultValue warning in `Form` [#110](https://github.com/vueComponent/ant-design-vue/issues/110)
## 1.0.2
`2018-08-04`
- 🎉 Modify the component library name to `ant-design-vue`
- 🌟 The official site supports IE9 access[a8a5f8](https://github.com/vueComponent/ant-design-vue/commit/a8a5f854c3b6a78df526caf2fb391e5c9d0848ac)
- 🐞 Fix reminder issues caused by exporting undefined variables[#87](https://github.com/vueComponent/ant-design-vue/issues/87)
@ -392,6 +437,7 @@ export default {
## 1.0.1
`2018-07-27`
- 🌟 Optimize Chinese input for `Input` components(just support v-model) [4a5154](https://github.com/vueComponent/ant-design-vue/commit/4a51544bd6470ab628dda80e9d7593e4603dd0b6)
- 🐞 Fix `treeSelect` `treeData[i].children` throw error when null[#81](https://github.com/vueComponent/ant-design-vue/issues/81)
- 🐞 Fix `Calendar` change event call twice[#82](https://github.com/vueComponent/ant-design-vue/issues/82)
@ -401,62 +447,69 @@ export default {
## 1.0.0
`2018-07-21`
- 🌟 Add `Carousel` component [edddbd](https://github.com/vueComponent/ant-design-vue/commit/edddbd982a279b62229ce825855c14c556866ece)
- modify some error document
## 0.7.1
`2018-07-17`
- 🐞 fix `Tooltip` containing disabled button does not show and style[#73](https://github.com/vueComponent/ant-design-vue/issues/73)
- 🐞 add `Table` panagation deep watch[#b464c6](https://github.com/vueComponent/ant-design-vue/commit/b464c6f6ee4df6df1b6c55f29ac85b2f462763bc)
## 0.7.0
`2018-07-11`
- 🌟 Add `TreeSelect` component
- 🌟 `Select` add `options`, Easy to generate a selection list directly[#37](https://github.com/vueComponent/ant-design-vue/issues/37)
- 🐞 Fix `blur` event error when using `Select` component in `Tooltip`[#67](https://github.com/vueComponent/ant-design-vue/issues/67)
- 🐞 Modify the `Upload` component `action` attribute to optional[#66](https://github.com/vueComponent/ant-design-vue/issues/66)
## 0.6.8
`2018-07-05`
- 🐞 Fix `notification` h is not defined[#63](https://github.com/vueComponent/ant-design-vue/issues/63)
- 🐞 Fix `Transfer` local-provider miss `titles`[#64](https://github.com/vueComponent/ant-design-vue/issues/64)
## 0.6.7
`2018-07-03`
- 🐞 Fix `Form` component cannot be updated when using template syntax[#62](https://github.com/vueComponent/ant-design-vue/issues/62)
## 0.6.6
`2018-07-03`
- 🐞 Fix `Upload` type validation error issue and update related demo[#61](https://github.com/vueComponent/ant-design-vue/issues/61)
- 🐞 Fix `Upload` image preview does not jump correctly[1584b3](https://github.com/vueComponent/ant-design-vue/commit/1584b3839e500d2d6b07abf704f5cd084ca00e87)
## 0.6.5
`2018-07-01`
- 🐞 Fix `Select` `getPopupContainer` not working [#56](https://github.com/vueComponent/ant-design-vue/issues/56)
- 🐞 Fix `Select` popup position is not updated[8254f7](https://github.com/vueComponent/ant-design-vue/commit/8254f783a32189b63ffcf2c53702b50afef1f3db)
## 0.6.4
`2018-06-28`
- 🐞 Fix `InputSearch` `v-model` return wrong value[#53](https://github.com/vueComponent/ant-design-vue/issues/53)
## 0.6.3
`2018-06-26`
- 🐞 Fix `Popover` `v-model` not working[#49](https://github.com/vueComponent/ant-design-vue/issues/49)
## 0.6.2
`2018-06-24`
- 🌟 `Form` component data auto-checking support for `template` syntax[7c9232](https://github.com/vueComponent/ant-design-vue/commit/7c923278b3678a822ff90da0cb8db7653d79e15c)
- `Select`: 🐞 add `focus` `blur` methods[52f6f5](https://github.com/vueComponent/ant-design-vue/commit/52f6f50dbe38631c0e698a6ea23b3686f6c2a375)
- `Radio`
@ -467,6 +520,7 @@ export default {
## 0.6.1
`2018-06-17`
- 🌟 Add `List` Component
- `Table`
- 🐞 Fix `'querySelectorAll` error when updating height[#33](https://github.com/vueComponent/ant-design-vue/issues/33)
@ -484,21 +538,24 @@ export default {
## 0.6.0
`2018-06-04`
- 🌟 Add `Anchor` Component
- `Table`
- 🐞 Fix show `emptyText` problem when `loading.spinning` [17b9dc](https://github.com/vueComponent/ant-design-vue/commit/17b9dc14f5225eb75542facdb5053f4916b9d77f)
- 🐞 Fixed `header style` not working [#30](https://github.com/vueComponent/ant-design-vue/pull/30)
- 🐞 `DatePicker`: Fix the issue of `change` event repeatedly call when `showTime` is `true` [81ab82](https://github.com/vueComponent/ant-design-vue/commit/81ab829b1d0f67ee926b106de788fc5b41ec4f9c)
- 🐞 `InputNumber`: Fix `placeholder` not working [ce39dc](https://github.com/vueComponent/ant-design-vue/commit/ce39dc3506474a4b31632e03c38b518cf4060cef#diff-c9d10303f22c684e66d71ab1f9dac5f9R50)
- 🐞 `DatePicker`: Fix the issue of `change` event repeatedly call when `showTime` is `true` [81ab82](https://github.com/vueComponent/ant-design-vue/commit/81ab829b1d0f67ee926b106de788fc5b41ec4f9c)
- 🐞 `InputNumber`: Fix `placeholder` not working [ce39dc](https://github.com/vueComponent/ant-design-vue/commit/ce39dc3506474a4b31632e03c38b518cf4060cef#diff-c9d10303f22c684e66d71ab1f9dac5f9R50)
## 0.5.4
`2018-05-26`
- 🐞 Fix missing `less` file problem in dist directory[ca084b9](https://github.com/vueComponent/ant-design-vue/commit/ca084b9e6f0958c25a8278454c864ac8127cce95)
## 0.5.3
`2018-05-25`
- 🐞 Fixed issue with building `antd-with-locales.js` containing test files[90583a3](https://github.com/vueComponent/ant-design-vue/commit/90583a3c42e8b520747d6f6ac10cfd718d447030)
## 0.5.2
@ -543,7 +600,7 @@ export default {
`2018-04-24`
- 🐞 fix menu click bug
- 🐞 fix menu click bug
## 0.4.1
@ -555,13 +612,12 @@ export default {
#### Layout
- add `layout` component
- add `layout` component
#### Others
- support use [Vue.use(antd)](https://github.com/vueComponent/ant-design-vue/issues/3)
## 0.3.1
#### Features

235
CHANGELOG.zh-CN.md
View File

@ -4,9 +4,9 @@
#### 发布周期
* 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
* 次版本号：带有新特性的向下兼容的版本。
* 主版本号：含有破坏性更新和新特性，不在发布周期内。
- 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
- 次版本号：带有新特性的向下兼容的版本。
- 主版本号：含有破坏性更新和新特性，不在发布周期内。
---
@ -80,19 +80,25 @@
- 🐞 修复水波纹在 Edge 下的样式问题。
## 1.3.16
`2019-08-25`
- 🐞 修复 `Select` 组件在没有 input 时，卸载组件报错问题 [#1091](https://github.com/vueComponent/ant-design-vue/pull/1091)
- 🐞 修复 `Collapse` 无子元素时报错问题 [#1116](https://github.com/vueComponent/ant-design-vue/pull/1116)
- 🐞 修复 TypeScript 类型定义。
## 1.3.15
`2019-08-17`
- 🐞 修复 `Select` 组件在 IE 下无法滚动问题 [#999](https://github.com/vueComponent/ant-design-vue/issues/999)
- 🐞 修复 `Form` `initialValue` 为空时报 warning 问题 [#1076](https://github.com/vueComponent/ant-design-vue/issues/1076)
- 🐞 修复 `Form` 校验 Number 类型时错误问题 [#1090](https://github.com/vueComponent/ant-design-vue/issues/1090)
## 1.3.14
`2019-08-12`
- 🐞 修复 `MenuItem` 解析数组 `class` 不正确问题 [#1009](https://github.com/vueComponent/ant-design-vue/issues/1009)
- 🐞 修复 npm install 时报错问题 [#997](https://github.com/vueComponent/ant-design-vue/issues/997)
- 🐞 修复 `Select` 组件在 IE 下无法滚动问题 [#999](https://github.com/vueComponent/ant-design-vue/issues/999)
@ -104,22 +110,27 @@
- 🌟 `Modal.confirm` `title` and `content` 支持 function
## 1.3.13
`2019-07-22`
- 🐞 修复 dist 缺少 antd.less 文件问题 [#995](https://github.com/vueComponent/ant-design-vue/issues/995)
## 1.3.12
`2019-07-22`
- 🐞 `package.json` `files` 添加 `scripts`
## 1.3.11
`2019-07-22`
- Dropdown
- 🐞修复 `disable` 时的样式问题 [#912](https://github.com/vueComponent/ant-design-vue/pull/912) [#921](https://github.com/vueComponent/ant-design-vue/pull/921)
- 🐞修复 `SubMenu` 闪动问题 [#975](https://github.com/vueComponent/ant-design-vue/issues/970)
- 🐞 修复 `disable` 时的样式问题 [#912](https://github.com/vueComponent/ant-design-vue/pull/912) [#921](https://github.com/vueComponent/ant-design-vue/pull/921)
- 🐞 修复 `SubMenu` 闪动问题 [#975](https://github.com/vueComponent/ant-design-vue/issues/970)
- 🌟 `AutoComplete` `Cascader` `DatePicker` `DropDown` `Select` `TimePicker` 添加弹出内容的实例引用 `popupRef` [f9373e](https://github.com/vueComponent/ant-design-vue/commit/f9373e44ce229ab0ba94ababbd686e6ad6e9f10f)
- 🐞 修复 `DatePicker` 在ie 10 11下 placeholder 为中文时不能打开的问题 [#865](https://github.com/vueComponent/ant-design-vue/issues/865)
- 🌟 `DatePicker` 添加自定义渲染触发器功能 [#957](https://github.com/vueComponent/ant-design-vue/pull/957)
- 🐞 修复 `DatePicker` 在 ie 10 11 下 placeholder 为中文时不能打开的问题 [#865](https://github.com/vueComponent/ant-design-vue/issues/865)
- 🌟 `DatePicker` 添加自定义渲染触发器功能 [#957](https://github.com/vueComponent/ant-design-vue/pull/957)
- 🌟 `@ant-design/icons-vue` 升级为 `^2.0.0`
- 🌟 `Icon` 添加属性 `focusable="false"` [#924](https://github.com/vueComponent/ant-design-vue/issues/924)
- 🐞 修复自定义 `Form` 校验自定义组件时提示 `warning` 问题 [#915](https://github.com/vueComponent/ant-design-vue/issues/915)
@ -129,13 +140,17 @@
- 🐞 修复 TypeScript 类型定义。
## 1.3.10
`2019-06-11`
- 🐞 移除打包后多余的 `module.export` [#850](https://github.com/vueComponent/ant-design-vue/issues/850)
## 1.3.9
`2019-05-26`
- 🐞 修复 `TreeSelect` 没有 `dataRef` 的问题 [#712](https://github.com/vueComponent/ant-design-vue/issues/712)
- 🌟 `Tooltip` 添加 `destroyTooltipOnHide` 用于标识隐藏后是否销毁tooltip [#727](https://github.com/vueComponent/ant-design-vue/issues/727)
- 🌟 `Tooltip` 添加 `destroyTooltipOnHide` 用于标识隐藏后是否销毁 tooltip [#727](https://github.com/vueComponent/ant-design-vue/issues/727)
- 🐞 修复 `Avatar` 动态设置 src 时不更新问题 [#731](https://github.com/vueComponent/ant-design-vue/issues/731)
- 🐞 修复 `LocaleProvider` 更改 `moment` 语言不生效问题 [28b7a6](https://github.com/vueComponent/ant-design-vue/commit/28b7a68dc48a0a994e98063d462b99380e3ee547)
- 🌟 `Modal.confirm` 新增 `closable` 配置 [#798](https://github.com/vueComponent/ant-design-vue/pull/798)
@ -147,19 +162,25 @@
- 🐞 修复 `DirectoryTree` expandAction="doubleclick" 不生效问题 [#745](https://github.com/vueComponent/ant-design-vue/issues/745)
## 1.3.8
`2019-04-04`
- 🐞 修复 `Table` 在 IE 下不可点击问题 [#504](https://github.com/vueComponent/ant-design-vue/issues/504)
- 🐞 修复 `Table` 在 Firefox 下 Header 没对齐问题 [#579](https://github.com/vueComponent/ant-design-vue/issues/579)
- 🌟 抽屉 `Drawer` 添加自定义 `handel` 功能
- 🐞 修复 TypeScript 类型定义。
## 1.3.7
`2019-03-18`
- 🐞 修复 `Select` `selectedKeys` 类型校验错误 [#597](https://github.com/vueComponent/ant-design-vue/issues/597)
## 1.3.6
`2019-03-17`
- 🐞 修复 `Select` title属性显示错乱问题 [#588](https://github.com/vueComponent/ant-design-vue/issues/588)
- 🐞 修复 `Select` title 属性显示错乱问题 [#588](https://github.com/vueComponent/ant-design-vue/issues/588)
- 🐞 修复 `InputSearch` 不支持 slot 方式自定义 addonAfter 和 addonBefore 问题 [#581](https://github.com/vueComponent/ant-design-vue/issues/581)
- 🐞 修复 `Input` 重复 class 问题 [#faf9ba](https://github.com/vueComponent/ant-design-vue/commit/faf9ba0033eed9ae6ac17879f2e39dd341db847f)
- 🐞 修复 `Message` 通过函数自定义 content 不生效问题 [#554](https://github.com/vueComponent/ant-design-vue/issues/554)
@ -167,6 +188,7 @@
- 🐞 修复 TypeScript 类型定义。
## 1.3.5
`2019-02-23`
- 🌟 优化 `Popover` `Popconfirm` 组件箭头样式。
@ -179,41 +201,48 @@
- 🐞 修复 TypeScript 类型定义。
## 1.3.4
`2019-01-31`
🎉 🎉 🎉 祝大家新年快乐！
- 🐞 修复AutoComplete组件disabled时，placeholder不显示的问题。[#402](https://github.com/vueComponent/ant-design-vue/issues/402)。
- 🐞 添加 `BreadcrmbItem` ts类型文件。[#452](https://github.com/vueComponent/ant-design-vue/issues/452)。
- 🐞 修复当FormItem在子组件中时不更新问题。[#446](https://github.com/vueComponent/ant-design-vue/issues/446)。
- 🐞 修复 AutoComplete 组件 disabled 时，placeholder 不显示的问题。[#402](https://github.com/vueComponent/ant-design-vue/issues/402)。
- 🐞 添加 `BreadcrmbItem` ts 类型文件。[#452](https://github.com/vueComponent/ant-design-vue/issues/452)。
- 🐞 修复当 FormItem 在子组件中时不更新问题。[#446](https://github.com/vueComponent/ant-design-vue/issues/446)。
- 🐞 修复一些组件 TypeScript 定义。
## 1.3.3
`2019-01-26`
- 🐞 修复message在配置maxcount时，不能关闭提示窗问题。[#428](https://github.com/vueComponent/ant-design-vue/pull/428)。
- 🐞 修复 message 在配置 maxcount 时，不能关闭提示窗问题。[#428](https://github.com/vueComponent/ant-design-vue/pull/428)。
- 🐞 修复一些组件 TypeScript 定义。[#422](https://github.com/vueComponent/ant-design-vue/pull/422)。
- 🌟 Anchor组件新增`warpperClass` `wrapperStyle`属性。[1aa42d](https://github.com/vueComponent/ant-design-vue/commit/1aa42dfe18bd7ac7893a765b6ee341844ea02550)
- 📝 更新文档：form增加preserve说明，icon修改自定义组件引用文档说明。
- 🌟 Anchor 组件新增`warpperClass` `wrapperStyle`属性。[1aa42d](https://github.com/vueComponent/ant-design-vue/commit/1aa42dfe18bd7ac7893a765b6ee341844ea02550)
- 📝 更新文档：form 增加 preserve 说明，icon 修改自定义组件引用文档说明。
## 1.3.2
`2019-01-17`
- 🐞 修复Form在使用废弃API `autoCreateForm` 时报错问题。[#413](https://github.com/vueComponent/ant-design-vue/issues/413)。
- 🐞 修复Slider点击mark时报错问题。[#407](https://github.com/vueComponent/ant-design-vue/issues/407)。
- 🐞 修复 Form 在使用废弃 API `autoCreateForm` 时报错问题。[#413](https://github.com/vueComponent/ant-design-vue/issues/413)。
- 🐞 修复 Slider 点击 mark 时报错问题。[#407](https://github.com/vueComponent/ant-design-vue/issues/407)。
## 1.3.1
`2019-01-15`
- 🐞 修复Table组件在ie下滚轮失效的问题。[#390](https://github.com/vueComponent/ant-design-vue/issues/390)。
- 🐞 修复Form没有清除不在需要校验字段问题。[#367](https://github.com/vueComponent/ant-design-vue/issues/367)。
- 🐞 修复 Table 组件在 ie 下滚轮失效的问题。[#390](https://github.com/vueComponent/ant-design-vue/issues/390)。
- 🐞 修复 Form 没有清除不在需要校验字段问题。[#367](https://github.com/vueComponent/ant-design-vue/issues/367)。
## 1.3.0
`2019-01-12`
- 🎉 🎉 🎉 发布 vscode 插件 [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
- 🎉 🎉 🎉 优化官网文档交互
### 组件功能和样式同步到 antd 3.11.6 版本。
1.3.0 版本带来了两个新组件，还有很多激动人心的变化和新特性。
- 🔥 增加了一个新组件 [Comment](https://vue.ant.design/components/comment-cn/)。
@ -229,9 +258,9 @@
- 🌟 Badge 进行了重构，`count` 支持自定义组件。
- Slider
- 🌟 增加 `tooltipVisible` 属性，用于 Tooltip 是否始终显示。
- 🌟 优化focus效果
- 🐞 修复键盘tab键聚焦时，Tooltip不显示问题。
- 🐞 修复拖动时Tooltip不停的显隐切换问题。
- 🌟 优化 focus 效果
- 🐞 修复键盘 tab 键聚焦时，Tooltip 不显示问题。
- 🐞 修复拖动时 Tooltip 不停的显隐切换问题。
- Calendar
- 🌟 支持多种时间格式。
- 🌟 showSearch 方法增加 `limit` 参数，用于限制搜索结果展示数量。
@ -242,23 +271,24 @@
- 🌟 增加 `removeIcon`、`clearIcon`、`menuItemSelectedIcon` 属性，用于自定义删除、清空、选中的图标。
- 🌟 增加 `dropdownRender` 属性， 用于自定义下拉框内容。
- 🌟 增加 `loading` 属性， 用于展示加载中状态。
- 🌟 优化 Button 在含有Icon时的显示效果。
- 🌟 优化 Button 在含有 Icon 时的显示效果。
- ⚡️ 重构 Tag 组件，简化代码并提升性能。
- 💄 Menu.Item 组件增加 `title` 属性，用于在收缩时展示的悬浮标题。
- 💄 微调 Card 头部和加载中的样式细节。
- 💄 优化 Spin 样式并略微提升了切换状态的性能。
- 🐞 修复 TextArea 组件高度不能自适应问题。
- 🐞 修复 Tooltip 在disabled状态下Button中，样式错误问题。[#389](https://github.com/vueComponent/ant-design-vue/issues/389)
- 🐞 修复 Tooltip 在 disabled 状态下 Button 中，样式错误问题。[#389](https://github.com/vueComponent/ant-design-vue/issues/389)
- 🐞 修复一些组件 TypeScript 定义。
## 1.2.5
`2019-01-06`
- 🌟 新增`Typescript`类型文件[#250](https://github.com/vueComponent/ant-design-vue/issues/250)
- 🐞 修复`Icon`组件不能同时支持static class和dynamic class问题[#371](https://github.com/vueComponent/ant-design-vue/issues/371)
- 🐞 修复`Icon`组件不能同时支持 static class 和 dynamic class 问题[#371](https://github.com/vueComponent/ant-design-vue/issues/371)
## 1.2.4
`2018-12-29`
- 🐞 修复`Select`组件没有触发`popupScroll`事件问题[#350](https://github.com/vueComponent/ant-design-vue/issues/350)
@ -271,6 +301,7 @@
- 🐞 移除`Menu`组件初始化时的展开动画。[#338](https://github.com/vueComponent/ant-design-vue/issues/338)
## 1.2.3
`2018-12-25`
- 📝 移除圣诞彩蛋。
@ -279,9 +310,10 @@
- 🐞 修复`Tree`组件使用`TreeNode`时报重复`Key`问题。
## 1.2.2
`2018-12-19`
- 🐞 修复`Datepicker`渲染两次footer问题。[#315](https://github.com/vueComponent/ant-design-vue/issues/315)
- 🐞 修复`Datepicker`渲染两次 footer 问题。[#315](https://github.com/vueComponent/ant-design-vue/issues/315)
- `Menu`
- 🐞 修复在 `horizontal` 模式下不能自动收起来适应宽度的问题。[aa1b24](https://github.com/vueComponent/ant-design-vue/commit/aa1b2462cb333505d3efc53af1afb30fd0574dc7)。
- 🐞 修复在 `inline` 模式下首次展开时没有动画的问题。[d63935](https://github.com/vueComponent/ant-design-vue/commit/d63935e50671fab2aa561a013c35af878c610c7c)
@ -290,16 +322,18 @@
- 🐞 修复 Upload 缩略图图标样式错误。[f1e130](https://github.com/vueComponent/ant-design-vue/commit/f1e130bdc0c12c625573c08a35c895b2d5d47568)
- 🐞 `Icon` 支持 native event [cffef3](https://github.com/vueComponent/ant-design-vue/commit/cffef392e5605de8d342787d7562e81ca8588800)
## 1.2.1
`2018-12-17`
- 🐞 修复`Menu`在`Layout`下伸缩时闪动问题
- 🐞 修复`Icon`报Warning问题
- 🐞 修复`Icon`报 Warning 问题
## 1.2.0
`2018-12-16`
### 与antd 3.10.x同步
### 与 antd 3.10.x 同步
- 🔥🔥🔥 使用了 svg 图标替换了原先的 font 图标，从而带来了以下优势：
- 可以离线化使用，不需要从支付宝 cdn 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
@ -330,14 +364,15 @@
- 🌟 Steps 增加 `initial` 属性。
- 🌟 Upload 组件新增 `openFileDialogOnClick` 属性，用于设置点击组件时是否打开上传对话框。
- 🌟 InputNumber 组件新增 `decimalSeparator` 属性，用于设置自定义的小数点。
- 🐞 修复众多隐蔽暂未提issue的bug，再此不在一一列出
- 🐞 修复众多隐蔽暂未提 issue 的 bug，再此不在一一列出
## 1.1.10
`2018-12-7`
- 🔥🔥🔥 在1.1.10版本中`Form`组件更好地支持单文件tempalte语法，在以往版本中，对于复杂的组件需求，需要使用JSX才可以实现。为了更好地在template中使用Form表单的自动收集校验功能，我们优化了组件的使用方式。文档全部Demo使用最新语法重构。
不过对于以往API，还是继续支持，你可以不用担心API的改变，导致已有系统出现问题。
````html
- 🔥🔥🔥 在 1.1.10 版本中`Form`组件更好地支持单文件 tempalte 语法，在以往版本中，对于复杂的组件需求，需要使用 JSX 才可以实现。为了更好地在 template 中使用 Form 表单的自动收集校验功能，我们优化了组件的使用方式。文档全部 Demo 使用最新语法重构。不过对于以往 API，还是继续支持，你可以不用担心 API 的改变，导致已有系统出现问题。
```html
<template>
<a-form :form="form">
<a-form-item>
@ -352,53 +387,56 @@ export default {
},
}
</script>
````
```
- 🐞 修复`Steps`组件`labelPlacement`不生效问题 [#281](https://github.com/vueComponent/ant-design-vue/issues/281)
- 🐞 修复`Timeline`组件样式问题，添加`reverse` `mode`属性 [#8e37cd](https://github.com/vueComponent/ant-design-vue/commit/8e37cd89f92ee2541f641fd860785cfd2361b2b3)
- `Tree`
- 🐞 修复`treeDefaultExpandedKeys`不生效问题 [#284](https://github.com/vueComponent/ant-design-vue/issues/284)
- 🐞 修复`expandedKeys` `selectedKeys`等其它数组属性通过组件变异方法改变时组件不更新问题 [#239](https://github.com/vueComponent/ant-design-vue/issues/239)
---
## 1.1.9
`2018-11-26`
- 🐞 修复`TreeSelect`组件getPopupContainer不生效问题 [#265](https://github.com/vueComponent/ant-design-vue/issues/265)
- 🐞 修复`Carousel`组件按需加载不生效问题 [#271](https://github.com/vueComponent/ant-design-vue/issues/271)
- 🐞 修复`Upload`组件remove事件无返回值问题 [#259](https://github.com/vueComponent/ant-design-vue/issues/259)
- 🐞 修复`TreeSelect`组件 getPopupContainer 不生效问题 [#265](https://github.com/vueComponent/ant-design-vue/issues/265)
- 🐞 修复`Carousel`组件按需加载不生效问题 [#271](https://github.com/vueComponent/ant-design-vue/issues/271)
- 🐞 修复`Upload`组件 remove 事件无返回值问题 [#259](https://github.com/vueComponent/ant-design-vue/issues/259)
## 1.1.8
`2018-11-11`
- `Progress`
- 🐞 修复circle类型不支持strokeColor问题 [#238](https://github.com/vueComponent/ant-design-vue/issues/238)
- 🐞 添加`normal`类型 [#257](https://github.com/vueComponent/ant-design-vue/issues/257)
- 🐞 修复`Cascader`组件getPopupContainer不生效问题 [#257](https://github.com/vueComponent/ant-design-vue/issues/257)
- 🌟 `Tooltip`支持align [#252](https://github.com/vueComponent/ant-design-vue/issues/252)
- `Progress`
- 🐞 修复 circle 类型不支持 strokeColor 问题 [#238](https://github.com/vueComponent/ant-design-vue/issues/238)
- 🐞 添加`normal`类型 [#257](https://github.com/vueComponent/ant-design-vue/issues/257)
- 🐞 修复`Cascader`组件 getPopupContainer 不生效问题 [#257](https://github.com/vueComponent/ant-design-vue/issues/257)
- 🌟 `Tooltip`支持 align [#252](https://github.com/vueComponent/ant-design-vue/issues/252)
## 1.1.7
`2018-10-27`
- 🐞 修复`Cascader`组件类型错误问题 [#219](https://github.com/vueComponent/ant-design-vue/issues/219)
- 🐞 修复`Tree`组件自定义Icon时回调参数顺序错误问题 [#223](https://github.com/vueComponent/ant-design-vue/issues/223)
- 🐞 修复`Tree`组件自定义 Icon 时回调参数顺序错误问题 [#223](https://github.com/vueComponent/ant-design-vue/issues/223)
- 🐞 修复`Table`组件多次触发翻页回调问题 [#228](https://github.com/vueComponent/ant-design-vue/issues/228)
- 🌟 优化`Tabs`组件新增tab默认滚动到可视区域 [#215](https://github.com/vueComponent/ant-design-vue/issues/215)
- 🐞 修复`RadioGroup`组件不支持数字0问题 [#226](https://github.com/vueComponent/ant-design-vue/issues/226)
- 🐞 修复`Slider`组件当设置zoom不为1时，位置错误问题，部分浏览器需要visualViewport Polyfill [#227](https://github.com/vueComponent/ant-design-vue/issues/227)
- 🌟 优化`Tabs`组件新增 tab 默认滚动到可视区域 [#215](https://github.com/vueComponent/ant-design-vue/issues/215)
- 🐞 修复`RadioGroup`组件不支持数字 0 问题 [#226](https://github.com/vueComponent/ant-design-vue/issues/226)
- 🐞 修复`Slider`组件当设置 zoom 不为 1 时，位置错误问题，部分浏览器需要 visualViewport Polyfill [#227](https://github.com/vueComponent/ant-design-vue/issues/227)
## 1.1.6
`2018-10-10`
- 🐞 修复`Select`组件键盘事件报错问题 [#217](https://github.com/vueComponent/ant-design-vue/issues/217)
- 🐞 修复`Drawer`组件children更新问题 [#209](https://github.com/vueComponent/ant-design-vue/issues/209)
- 🐞 修复`Drawer`组件 children 更新问题 [#209](https://github.com/vueComponent/ant-design-vue/issues/209)
## 1.1.4
`2018-09-29`
- 🛠 重构`vc-tree`组件，并新增目录树组件
- 🐞 修复`tabs`组件属性`tabBarGutter`不生效问题 [#205](https://github.com/vueComponent/ant-design-vue/issues/205)
- 🐞 修复`table`组件数据同步出错问题 [#202](https://github.com/vueComponent/ant-design-vue/issues/202)
@ -406,32 +444,35 @@ export default {
## 1.1.3
`2018-09-22`
- 🎉 优化组件注册方式，如Vue.use(Form) [a6620c](https://github.com/vueComponent/ant-design-vue/commit/a6620cbbe58cc1694a994e6714853906d1d794be)
- 🎉 优化组件注册方式，如 Vue.use(Form) [a6620c](https://github.com/vueComponent/ant-design-vue/commit/a6620cbbe58cc1694a994e6714853906d1d794be)
- 🐞 `Select.Option` 组件`value`属性支持`0` [#194](https://github.com/vueComponent/ant-design-vue/issues/194)
- 🐞 修复 `Layout.Sider` 折叠按钮宽度不生效问题 [#201](https://github.com/vueComponent/ant-design-vue/issues/201)
- 🐞 修复 `Menu` 切换inlineCollapsed时，纵向无动画问题 [#200](https://github.com/vueComponent/ant-design-vue/issues/200)
- 🐞 修复 `Menu` 切换 inlineCollapsed 时，纵向无动画问题 [#200](https://github.com/vueComponent/ant-design-vue/issues/200)
- 🐞 修复 `Steps` `dot`模式下样式问题 [#199](https://github.com/vueComponent/ant-design-vue/issues/199)
## 1.1.2
`2018-09-17`
- 🎉 同步antd3.8.4样式
- 🌟 Tag组件新增`visible`属性及wave效果
- 🎉 同步 antd3.8.4 样式
- 🌟 Tag 组件新增`visible`属性及 wave 效果
- 🐞 修复`Cascader`组件，已选中项未展开问题 [#195](https://github.com/vueComponent/ant-design-vue/issues/195)
## 1.1.1
`2018-09-13`
- 🐞 修复窗口大小改变导致弹窗位置错位问题 [#184](https://github.com/vueComponent/ant-design-vue/issues/184)
- 🐞 tabs容器添加自定义事件监听 [#189](https://github.com/vueComponent/ant-design-vue/issues/189)
- 🐞 修复通过API形式调用Modal窗口时，`centered`不生效问题 [#183](https://github.com/vueComponent/ant-design-vue/issues/183)
- 🐞 Slider marks支持{number: function}形式 [#171](https://github.com/vueComponent/ant-design-vue/issues/171)
- 🐞 tabs 容器添加自定义事件监听 [#189](https://github.com/vueComponent/ant-design-vue/issues/189)
- 🐞 修复通过 API 形式调用 Modal 窗口时，`centered`不生效问题 [#183](https://github.com/vueComponent/ant-design-vue/issues/183)
- 🐞 Slider marks 支持{number: function}形式 [#171](https://github.com/vueComponent/ant-design-vue/issues/171)
## 1.1.0
`2018-09-11`
- 🎉 从[3.4.0](https://github.com/ant-design/ant-design/releases/tag/3.4.0)同步组件到antd [3.8.2](https://github.com/ant-design/ant-design/releases/tag/3.8.2)
- 🎉 从[3.4.0](https://github.com/ant-design/ant-design/releases/tag/3.4.0)同步组件到 antd [3.8.2](https://github.com/ant-design/ant-design/releases/tag/3.8.2)
- 🌟 新增`Drawer 抽屉`组件
- 🐞 修复`Spin`内容闪烁问题 [#174](https://github.com/vueComponent/ant-design-vue/issues/174)
- 🐞 修复`RangePicker`选择项未禁用问题 [#158](https://github.com/vueComponent/ant-design-vue/issues/158)
@ -440,115 +481,124 @@ export default {
- 🐞 修复`Transfer`搜索过滤后不能正确显示问题 [#148](https://github.com/vueComponent/ant-design-vue/issues/148)
- 🐞 修复多级`Tabs`组件嵌套导致`size`不生效问题 [#144](https://github.com/vueComponent/ant-design-vue/issues/144)
- 🐞 修复`TreeSelect`searchPlaceholder 不生效 [#125](https://github.com/vueComponent/ant-design-vue/issues/125)
- 🛠 其它未出现在issue中的问题，详见antd changelog
- 🛠 其它未出现在 issue 中的问题，详见 antd changelog
## 1.0.3
`2018-08-11`
- 🐞 修复`Select`子元素不更新问题 [#106](https://github.com/vueComponent/ant-design-vue/issues/106)
- 🐞 修复`Badge` offset属性X Y轴顺序错误问题，并新增支持number类型 [#99](https://github.com/vueComponent/ant-design-vue/issues/99)
- 🐞 修复`Input`在ie下中文placeholder触发input事件问题 [#92](https://github.com/vueComponent/ant-design-vue/issues/92)
- 🐞 修复`Badge` offset 属性 X Y 轴顺序错误问题，并新增支持 number 类型 [#99](https://github.com/vueComponent/ant-design-vue/issues/99)
- 🐞 修复`Input`在 ie 下中文 placeholder 触发 input 事件问题 [#92](https://github.com/vueComponent/ant-design-vue/issues/92)
- 🐞 修复`Avatar`不接受事件问题 [#102](https://github.com/vueComponent/ant-design-vue/issues/102)
- 🐞 修复`grid.row`gutter类型错误问题 [4af03c4](https://github.com/vueComponent/ant-design-vue/commit/4af03c4ab9596ede9d1b79c8308d0a3ed58b7a11)
- 🐞 修复`CheckboxGroup`在`Form`中报defaultValue warning问题 [#110](https://github.com/vueComponent/ant-design-vue/issues/110)
- 🐞 修复`grid.row`gutter 类型错误问题 [4af03c4](https://github.com/vueComponent/ant-design-vue/commit/4af03c4ab9596ede9d1b79c8308d0a3ed58b7a11)
- 🐞 修复`CheckboxGroup`在`Form`中报 defaultValue warning 问题 [#110](https://github.com/vueComponent/ant-design-vue/issues/110)
## 1.0.2
`2018-08-04`
- 🎉 修改组件库名称为`ant-design-vue`
- 🌟 官方站点支持IE9访问[a8a5f8](https://github.com/vueComponent/ant-design-vue/commit/a8a5f854c3b6a78df526caf2fb391e5c9d0848ac)
- 🌟 官方站点支持 IE9 访问[a8a5f8](https://github.com/vueComponent/ant-design-vue/commit/a8a5f854c3b6a78df526caf2fb391e5c9d0848ac)
- 🐞 修复导出未定义变量引起的提醒问题[#87](https://github.com/vueComponent/ant-design-vue/issues/87)
- 🐞 修复部分组件类名重复问题[b48bbac](https://github.com/vueComponent/ant-design-vue/commit/b48bbac695dabec9160d947f9b27b2d91028c455)
- 🐞 修复`Select`组件label不更新问题[da1b924](https://github.com/vueComponent/ant-design-vue/commit/da1b924cba0fcc871b73590ac3ebd96af81b3897)
- 🐞 修复`Select`组件 label 不更新问题[da1b924](https://github.com/vueComponent/ant-design-vue/commit/da1b924cba0fcc871b73590ac3ebd96af81b3897)
- 🛠 更正了若干文档错误
## 1.0.1
`2018-07-27`
- 🌟 针对`Input`组件优化中文输入(仅在v-model绑定时生效) [4a5154](https://github.com/vueComponent/ant-design-vue/commit/4a51544bd6470ab628dda80e9d7593e4603dd0b6)
- 🌟 针对`Input`组件优化中文输入(仅在 v-model 绑定时生效) [4a5154](https://github.com/vueComponent/ant-design-vue/commit/4a51544bd6470ab628dda80e9d7593e4603dd0b6)
- 🐞 修复`TreeSelect` `treeeData[i].children`为`null`时报错问题[#81](https://github.com/vueComponent/ant-design-vue/issues/81)
- 🐞 修复`Calendar`组件的 change 事件触发两次的问题[#82](https://github.com/vueComponent/ant-design-vue/issues/82)
- 🐞 修复`Card`组件的`description`和`title`属性slot不生效问题[#83](https://github.com/vueComponent/ant-design-vue/issues/83)
- 🐞 修复`Card`组件的`description`和`title`属性 slot 不生效问题[#83](https://github.com/vueComponent/ant-design-vue/issues/83)
- 🐞 修复`DataPicker`组件的`dropdownClassName`属性不生效问题[02ab242](https://github.com/vueComponent/ant-design-vue/commit/02ab242197b923f2157f41d98a7930512475a799)
## 1.0.0
`2018-07-21`
- 🌟 新增`Carousel 走马灯`组件[edddbd](https://github.com/vueComponent/ant-design-vue/commit/edddbd982a279b62229ce825855c14c556866ece)
- 更正了若干文档错误
## 0.7.1
`2018-07-17`
- 🐞 修复`Tooltip`包含`Button`时的样式及功能问题[#73](https://github.com/vueComponent/ant-design-vue/issues/73)
- 🐞 add `Table` panagation deep watch[#b464c6](https://github.com/vueComponent/ant-design-vue/commit/b464c6f6ee4df6df1b6c55f29ac85b2f462763bc)
## 0.7.0
`2018-07-11`
- 🌟 新增`TreeSelect`组件
- 🌟 `Select`组件新增`options`，方便直接生成选择列表[#37](https://github.com/vueComponent/ant-design-vue/issues/37)
- 🐞 修复`Tooltip`中使用`Select`组件时，`blur`事件报错问题[#67](https://github.com/vueComponent/ant-design-vue/issues/67)
- 🐞 修改`Upload`组件`action`属性为可选[#66](https://github.com/vueComponent/ant-design-vue/issues/66)
## 0.6.8
`2018-07-05`
- 🐞 修复`notification` h is not defined[#63](https://github.com/vueComponent/ant-design-vue/issues/63)
- 🐞 修复`Transfer`国际化缺少titles问题[#64](https://github.com/vueComponent/ant-design-vue/issues/64)
- 🐞 修复`notification` h is not defined[#63](https://github.com/vueComponent/ant-design-vue/issues/63)
- 🐞 修复`Transfer`国际化缺少 titles 问题[#64](https://github.com/vueComponent/ant-design-vue/issues/64)
## 0.6.7
`2018-07-03`
- 🐞 修复`Form`使用模板语法时组件不能更新[#62](https://github.com/vueComponent/ant-design-vue/issues/62)
## 0.6.6
`2018-07-03`
- 🐞 修复`Upload`的类型校验错误问题并更新相关demo[#61](https://github.com/vueComponent/ant-design-vue/issues/61)
- 🐞 修复`Upload`图片预览不能正确跳转问题[1584b3](https://github.com/vueComponent/ant-design-vue/commit/1584b3839e500d2d6b07abf704f5cd084ca00e87)
- 🐞 修复`Upload`的类型校验错误问题并更新相关 demo[#61](https://github.com/vueComponent/ant-design-vue/issues/61)
- 🐞 修复`Upload`图片预览不能正确跳转问题[1584b3](https://github.com/vueComponent/ant-design-vue/commit/1584b3839e500d2d6b07abf704f5cd084ca00e87)
## 0.6.5
`2018-07-01`
- 🐞 修复`Select`的`getPopupContainer`不生效问题[#56](https://github.com/vueComponent/ant-design-vue/issues/56)
- 🐞 修复`Select`的弹出框位置不更新问题[8254f7](https://github.com/vueComponent/ant-design-vue/commit/8254f783a32189b63ffcf2c53702b50afef1f3db)
## 0.6.4
`2018-06-28`
- 🐞 修复`InputSearch`的`v-model`返回值错误问题[#53](https://github.com/vueComponent/ant-design-vue/issues/53)
## 0.6.3
`2018-06-26`
- 🐞 修复`Popover`的`v-model`不生效问题[#49](https://github.com/vueComponent/ant-design-vue/issues/49)
## 0.6.2
`2018-06-24`
- 🌟 `Form`组件数据自动校验功能支持`template`语法[7c9232](https://github.com/vueComponent/ant-design-vue/commit/7c923278b3678a822ff90da0cb8db7653d79e15c)
- `Select`: 🐞 添加`focus` `blur`方法[52f6f5](https://github.com/vueComponent/ant-design-vue/commit/52f6f50dbe38631c0e698a6ea23b3686f6c2a375)
- `Radio`
- 🐞 修复Radiogroup `disabled` className[9df74b](https://github.com/vueComponent/ant-design-vue/commit/9df74bedd7640b6066010c498f942ce544c658b7)
- 🐞 修复 Radiogroup `disabled` className[9df74b](https://github.com/vueComponent/ant-design-vue/commit/9df74bedd7640b6066010c498f942ce544c658b7)
- 🐞 修复`autoFoucs` `focus` `blur` `mouseenter` `mouseleave` 不生效问题[f7886c](https://github.com/vueComponent/ant-design-vue/commit/f7886c7203730bedf519bc45f5f78726735d3aac)
- `TimePicker`: 🐞 修复`autoFoucs` `focus` `blur`不生效问题[28d009](https://github.com/vueComponent/ant-design-vue/commit/28d009d3ced807051a86a2c09cd2764303de98f7)
## 0.6.1
`2018-06-17`
- 🌟 新增`List`列表组件
- `Table`
- 🐞 修复更新高度时报错问题[#33](https://github.com/vueComponent/ant-design-vue/issues/33)
- 🐞 修复`defaultChecked`不生效问题[ec1999](https://github.com/vueComponent/ant-design-vue/commit/ec1999dea4cea126b78e3fd84bef620b876e9841)
- `columns key`支持数字类型[9b7f5c](https://github.com/vueComponent/ant-design-vue/commit/9b7f5c2f81b6f83190e5b022b2b1e28de3f68a2b)
- `Tooltip`
- 🛠 更新事件API`change`为`visibleChange`
- 🛠 更新事件 API`change`为`visibleChange`
- `Textarea`: 🐞 修复`autoFoucs`不生效问题[787927](https://github.com/vueComponent/ant-design-vue/commit/787927912307db7edb9821a440feacd216e3a6a2)
- `InputSearch`: 🐞 添加`focus` `blur`方法[3cff62](https://github.com/vueComponent/ant-design-vue/commit/3cff62997d16811ae17618f9b41617973d805d7d)
- `InputNumber`: 🐞 修复`autoFoucs`不生效问题[88f165](https://github.com/vueComponent/ant-design-vue/commit/88f165edb5c3993f4dba90c3267a1ea037e0869b)
@ -557,10 +607,10 @@ export default {
- `Rate`: 🐞 修复`autoFoucs`不生效问题，及`blur`报错问题[c2c984](https://github.com/vueComponent/ant-design-vue/commit/c2c9841eb9b8e5ce4decff57a925e60d4bd7d809)
- `RangePicker`: 🐞 修复值类型校验出错问题[228f44](https://github.com/vueComponent/ant-design-vue/commit/228f4478a5d169d22960c97d1d8a8320c58da9cc)
## 0.6.0
`2018-06-04`
- 🌟 新增`Anchor`锚点组件
- `Table`
- 🐞 修复`loading.spinning`时显示`emptyText`问题[17b9dc](https://github.com/vueComponent/ant-design-vue/commit/17b9dc14f5225eb75542facdb5053f4916b9d77f)
@ -568,34 +618,34 @@ export default {
- `DatePicker`: 🐞 修复属性`showTime`为`true`时，重复调用`change`事件问题[81ab82](https://github.com/vueComponent/ant-design-vue/commit/81ab829b1d0f67ee926b106de788fc5b41ec4f9c)
- `InputNumber`: 🐞 修复`placeholder`不生效问题[ce39dc](https://github.com/vueComponent/ant-design-vue/commit/ce39dc3506474a4b31632e03c38b518cf4060cef#diff-c9d10303f22c684e66d71ab1f9dac5f9R50)
## 0.5.4
`2018-05-26`
- 🐞 修复dist目录缺少less文件问题[ca084b9](https://github.com/vueComponent/ant-design-vue/commit/ca084b9e6f0958c25a8278454c864ac8127cce95)
- 🐞 修复 dist 目录缺少 less 文件问题[ca084b9](https://github.com/vueComponent/ant-design-vue/commit/ca084b9e6f0958c25a8278454c864ac8127cce95)
## 0.5.3
`2018-05-25`
- 🐞 修复构建`antd-with-locales.js`包含测试文件的问题[90583a3](https://github.com/vueComponent/ant-design-vue/commit/90583a3c42e8b520747d6f6ac10cfd718d447030)
## 0.5.2
`2018-05-25`
- 🐞 `Timeline`: 修复重复显示loading组件bug[fa5141b](https://github.com/vueComponent/ant-design-vue/commit/fa5141bd0061385f251b9026a07066677426b319)
- 🐞 `Timeline`: 修复重复显示 loading 组件 bug[fa5141b](https://github.com/vueComponent/ant-design-vue/commit/fa5141bd0061385f251b9026a07066677426b319)
- `Transfer`
- 🐞 修复搜索框的清除按钮不起作用问题[4582da3](https://github.com/vueComponent/ant-design-vue/commit/4582da3725e65c47a542f164532ab75a5618c265)
- 💄 重写了属性变化监听逻辑，避免不必要的[0920d23](https://github.com/vueComponent/ant-design-vue/commit/0920d23f12f6c133f667cd65316f1f0e6af27a33)
- 💄 `Select`: 优化`title`显示逻辑[9314957](https://github.com/vueComponent/ant-design-vue/commit/931495768f8b573d12ce4e058e853c875f22bcd3)
- `Form`
- 🐞 修复Form组件指令报错问题[#20](https://github.com/vueComponent/ant-design-vue/issues/20)
- 🌟 优化获取Form包装组件实例功能[c5e421c](https://github.com/vueComponent/ant-design-vue/commit/c5e421cdb2768e93288ce7b4654bee2114f8e5ba)
- 🐞 修复 Form 组件指令报错问题[#20](https://github.com/vueComponent/ant-design-vue/issues/20)
- 🌟 优化获取 Form 包装组件实例功能[c5e421c](https://github.com/vueComponent/ant-design-vue/commit/c5e421cdb2768e93288ce7b4654bee2114f8e5ba)
- 🐞 `DatePicker`: 修复日历键盘事件不起作用问题[e9b6914](https://github.com/vueComponent/ant-design-vue/commit/e9b6914282b1ac8d84b4262b8a6b33aa4e515831)
- `Avatar`: 修复字体大小自适应问题[#22](https://github.com/vueComponent/ant-design-vue/pull/22)
- 🌟 添加了部分组件的单测
- 🌟 整理了组件库依赖(dependencies、devDependencies)，删除不再使用的包，并添加peerDependencies
- 🌟 整理了组件库依赖(dependencies、devDependencies)，删除不再使用的包，并添加 peerDependencies
## 0.5.1
@ -607,29 +657,28 @@ export default {
`2018-05-08`
- 🌟 `Form `新增Form表单组件
- 💄 `Upload.Dragger`: 修改组件name名称为`a-upload-dragger`
- 🐞 `Upload`: 修复Upload name属性失效问题
- 🌟 `Form`新增 Form 表单组件
- 💄 `Upload.Dragger`: 修改组件 name 名称为`a-upload-dragger`
- 🐞 `Upload`: 修复 Upload name 属性失效问题
## 0.4.3
`2018-05-02`
- 🐞 修复组件样式丢失问题
- 🌟 站点添加babel-polyfill
- 🌟 站点添加 babel-polyfill
## 0.4.2
`2018-04-24`
- 🐞 修复menu 非 inline 模式下的 click bug
- 🐞 修复 menu 非 inline 模式下的 click bug
## 0.4.1
#### bug
- 将Vue依赖转移到devDependencies，避免与业务版本不一致导致的不稳定bug
- 将 Vue 依赖转移到 devDependencies，避免与业务版本不一致导致的不稳定 bug
## 0.4.0
@ -641,10 +690,8 @@ export default {
- 支持导入所有组件[Vue.use(antd)](https://github.com/vueComponent/ant-design-vue/issues/3)
## 0.3.1
#### Features
- 对外第一个版本，提供常用45个[组件](https://github.com/vueComponent/ant-design-vue/blob/c7e83d6142f0c5e72ef8fe794620478e69a50a8e/site/components.js)
- 对外第一个版本，提供常用 45 个[组件](https://github.com/vueComponent/ant-design-vue/blob/c7e83d6142f0c5e72ef8fe794620478e69a50a8e/site/components.js)

52
README-zh_CN.md
View File

@ -12,15 +12,7 @@
An enterprise-class UI components based on Ant Design and Vue.
[![Travis branch](https://travis-ci.org/vueComponent/ant-design-vue.svg?branch=master)](https://travis-ci.org/vueComponent/ant-design-vue)
[![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue)
[![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue)
[![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue)
[![Join the chat at https://gitter.im/vueComponent/ant-design-english](https://badges.gitter.im/vueComponent/ant-design-english.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) (English)
[![Join the chat at https://gitter.im/vueComponent/ant-design-vue](https://img.shields.io/gitter/room/vueComponent/ant-design-vue.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-vue?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
[![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers)
[![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors)
[![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
[![Travis branch](https://travis-ci.org/vueComponent/ant-design-vue.svg?branch=master)](https://travis-ci.org/vueComponent/ant-design-vue) [![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue) [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) [![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue) [![Join the chat at https://gitter.im/vueComponent/ant-design-english](https://badges.gitter.im/vueComponent/ant-design-english.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) (English) [![Join the chat at https://gitter.im/vueComponent/ant-design-vue](https://img.shields.io/gitter/room/vueComponent/ant-design-vue.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-vue?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文） [![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers) [![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors) [![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
</div>
@ -63,30 +55,30 @@ $ yarn add ant-design-vue
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
## 链接
- [首页](https://vue.ant.design/)
- [Vue官方文档](https://cn.vuejs.org/)
- [Vue 官方文档](https://cn.vuejs.org/)
- [Antd React](http://ant.design/)
## 生态
| Project | Description |
|----------|-------------|
| [vue-ref](https://github.com/vueComponent/vue-ref) | 您可以使用回调来获取组件的引用，类似react |
| [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) | ant-design-vue的vscode扩展 |
| [vue-cli-plugin-ant-design](https://github.com/vueComponent/vue-cli-plugin-ant-design) | 使用vue-cli3快速使用ant-design-vue组件库 |
| [vue-dash-event](https://github.com/vueComponent/vue-dash-event) | 在DOM模板中，您可以使用ant-design-vue组件的自定义事件（camelCase） |
| --- | --- |
| [vue-ref](https://github.com/vueComponent/vue-ref) | 您可以使用回调来获取组件的引用，类似 react |
| [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) | ant-design-vue 的 vscode 扩展 |
| [vue-cli-plugin-ant-design](https://github.com/vueComponent/vue-cli-plugin-ant-design) | 使用 vue-cli3 快速使用 ant-design-vue 组件库 |
| [vue-dash-event](https://github.com/vueComponent/vue-dash-event) | 在 DOM 模板中，您可以使用 ant-design-vue 组件的自定义事件（camelCase） |
## 问答
> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/104172832)
## 赞助
ant-design-vue是MIT协议的开源项目。为了项目能够更好的持续的发展，我们期望获得更多的[支持者](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)，你可以通过如下任何一种方式支持我们：
ant-design-vue 是 MIT 协议的开源项目。为了项目能够更好的持续的发展，我们期望获得更多的[支持者](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)，你可以通过如下任何一种方式支持我们：
- [Patreon](https://www.patreon.com/tangjinzhou)
- [opencollective](https://opencollective.com/ant-design-vue)
@ -97,32 +89,10 @@ ant-design-vue是MIT协议的开源项目。为了项目能够更好的持续的
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/ant-design-vue#backer)]
<a href="https://github.com/limichange" target="_blank"><img width="64" style="border-radius: 50%;" src="https://avatars0.githubusercontent.com/u/1947344?s=400&v=4" title="limichange donation total 24$ by qq from 2018.9"></a>
<a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/10/avatar.svg"></a>
<a href="https://github.com/limichange" target="_blank"><img width="64" style="border-radius: 50%;" src="https://avatars0.githubusercontent.com/u/1947344?s=400&v=4" title="limichange donation total 24$ by qq from 2018.9"></a> <a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/10/avatar.svg"></a>
## Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/ant-design-vue#sponsor)]
<a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>

47
README.md
View File

@ -12,15 +12,7 @@
An enterprise-class UI components based on Ant Design and Vue.
[![Travis branch](https://travis-ci.org/vueComponent/ant-design-vue.svg?branch=master)](https://travis-ci.org/vueComponent/ant-design-vue)
[![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue)
[![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue)
[![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue)
[![Join the chat at https://gitter.im/vueComponent/ant-design-english](https://badges.gitter.im/vueComponent/ant-design-english.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) (English)
[![Join the chat at https://gitter.im/vueComponent/ant-design-vue](https://img.shields.io/gitter/room/vueComponent/ant-design-vue.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-vue?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
[![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers)
[![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors)
[![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
[![Travis branch](https://travis-ci.org/vueComponent/ant-design-vue.svg?branch=master)](https://travis-ci.org/vueComponent/ant-design-vue) [![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue) [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) [![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue) [![Join the chat at https://gitter.im/vueComponent/ant-design-english](https://badges.gitter.im/vueComponent/ant-design-english.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) (English) [![Join the chat at https://gitter.im/vueComponent/ant-design-vue](https://img.shields.io/gitter/room/vueComponent/ant-design-vue.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design-vue?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文） [![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers) [![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors) [![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
</div>
@ -63,7 +55,6 @@ $ yarn add ant-design-vue
If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
## Links
- [Home page](https://vue.ant.design/)
@ -73,11 +64,11 @@ If you are in a bad network environment，you can try other registries and tools
## Ecosystem
| Project | Description |
|----------|-------------|
| [vue-ref](https://github.com/vueComponent/vue-ref) | You can use the callback to get a reference like react |
| [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) | A vscode extension for ant-design-vue |
| [vue-cli-plugin-ant-design](https://github.com/vueComponent/vue-cli-plugin-ant-design) | Vue-cli 3 plugin to add ant-design-vue |
| [vue-dash-event](https://github.com/vueComponent/vue-dash-event) | The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase) |
| --- | --- |
| [vue-ref](https://github.com/vueComponent/vue-ref) | You can use the callback to get a reference like react |
| [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) | A vscode extension for ant-design-vue |
| [vue-cli-plugin-ant-design](https://github.com/vueComponent/vue-cli-plugin-ant-design) | Vue-cli 3 plugin to add ant-design-vue |
| [vue-dash-event](https://github.com/vueComponent/vue-dash-event) | The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase) |
## Donation
@ -92,34 +83,12 @@ ant-design-vue is an MIT-licensed open source project. In order to achieve bette
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/ant-design-vue#backer)]
<a href="https://github.com/limichange" target="_blank"><img width="64" style="border-radius: 50%;" src="https://avatars0.githubusercontent.com/u/1947344?s=400&v=4" title="limichange donation total 24$ by qq from 2018.9"></a>
<a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/backer/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/10/avatar.svg"></a>
<a href="https://github.com/limichange" target="_blank"><img width="64" style="border-radius: 50%;" src="https://avatars0.githubusercontent.com/u/1947344?s=400&v=4" title="limichange donation total 24$ by qq from 2018.9"></a> <a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/10/avatar.svg"></a>
## Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/ant-design-vue#sponsor)]
<a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
<a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/104172832)

18
components/affix/demo/basic.md
View File

@ -16,19 +16,19 @@ The simplest usage.
</a-affix>
<br />
<a-affix :offsetBottom="this.bottom">
<a-button type="primary" @click="()=>{this.bottom += 10}">Affix bottom</a-button>
<a-button type="primary" @click="()=>{this.bottom += 10}">Affix bottom</a-button>
</a-affix>
</div>
</template>
<script>
export default {
data() {
return {
top: 10,
bottom: 10,
}
}
}
export default {
data() {
return {
top: 10,
bottom: 10,
};
},
};
</script>
```

8
components/affix/demo/index.vue
View File

@ -24,16 +24,16 @@ export default {
zhType: '导航',
type: 'Navigation',
title: 'Affix',
render () {
render() {
return (
<div>
<md cn={md.cn} us={md.us}/>
<md cn={md.cn} us={md.us} />
<Basic />
<Onchange />
<Target />
<api>
<CN slot='cn' />
<US/>
<CN slot="cn" />
<US />
</api>
</div>
);

14
components/affix/demo/on-change.md
View File

@ -15,12 +15,12 @@ Callback with affixed state.
</a-affix>
</template>
<script>
export default {
methods: {
change(affixed) {
console.log(affixed)
}
}
}
export default {
methods: {
change(affixed) {
console.log(affixed);
},
},
};
</script>
```

18
components/affix/demo/target.md
View File

@ -21,14 +21,14 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d
</div>
</template>
<style>
#components-affix-demo-target.scrollable-container {
height: 100px;
overflow-y: scroll;
}
#components-affix-demo-target .background {
padding-top: 60px;
height: 300px;
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
}
#components-affix-demo-target.scrollable-container {
height: 100px;
overflow-y: scroll;
}
#components-affix-demo-target .background {
padding-top: 60px;
height: 300px;
background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
}
</style>
```

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

@ -1,21 +1,21 @@
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| 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 |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| onChange | Callback for when affix state is changed | Function(affixed) |
| Events Name | Description | Arguments |
| ----------- | ---------------------------------------- | ----------------- |
| onChange | Callback for when affix state is changed | Function(affixed) |
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
````html
```html
<a-affix :style="{ position: 'absolute', top: y, left: x}">
...
</a-affix>
````
```

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

@ -1,4 +1,3 @@
## API
| 成员 | 说明 | 类型 | 默认值 |
@ -7,17 +6,16 @@
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 固定状态改变时触发的回调函数 | Function(affixed) |
| 事件名称 | 说明 | 回调参数 |
| -------- | ---------------------------- | ----------------- |
| change | 固定状态改变时触发的回调函数 | Function(affixed) |
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
````html
```html
<a-affix :style="{ position: 'absolute', top: y, left: x}">
...
</a-affix>
````
```

6
components/alert/demo/banner.md
View File

@ -13,7 +13,11 @@ Display Alert as a banner at top of page.
<div>
<a-alert message="Warning text" banner />
<br />
<a-alert message="Very long warning text warning text text text text text text text" banner closable />
<a-alert
message="Very long warning text warning text text text text text text text"
banner
closable
/>
<br />
<a-alert :showIcon="false" message="Warning text without icon" banner />
<br />

14
components/alert/demo/closable.md
View File

@ -27,12 +27,12 @@ To show close button.
</div>
</template>
<script>
export default {
methods: {
onClose(e) {
console.log(e, 'I was closed.');
}
}
}
export default {
methods: {
onClose(e) {
console.log(e, 'I was closed.');
},
},
};
</script>
```

10
components/alert/demo/custom-icon.md
View File

@ -11,19 +11,19 @@ Decent icon make information more clear and more friendly.
```html
<template>
<div>
<a-alert message="showIcon = false" type="success" >
<a-alert message="showIcon = false" type="success">
<a-icon type="smile" slot="icon" />
</a-alert>
<a-alert message="Success Tips" type="success" showIcon >
<a-alert message="Success Tips" type="success" showIcon>
<a-icon type="smile" slot="icon" />
</a-alert>
<a-alert message="Informational Notes" type="info" showIcon >
<a-alert message="Informational Notes" type="info" showIcon>
<a-icon type="smile" slot="icon" />
</a-alert>
<a-alert message="Warning" type="warning" showIcon >
<a-alert message="Warning" type="warning" showIcon>
<a-icon type="smile" slot="icon" />
</a-alert>
<a-alert message="Error" type="error" showIcon >
<a-alert message="Error" type="error" showIcon>
<a-icon type="smile" slot="icon" />
</a-alert>
<a-alert

5
components/alert/demo/description.md
View File

@ -11,10 +11,7 @@ Additional description for alert message.
```html
<template>
<div>
<a-alert
message="Success Text"
type="success"
>
<a-alert message="Success Text" type="success">
<p slot="description">
Success Description <span style="color: red">Success</span> Description Success Description
</p>

26
components/alert/demo/index.vue
View File

@ -31,21 +31,21 @@ export default {
type: 'Feedback',
zhType: '反馈',
title: 'Alert',
render () {
render() {
return (
<div id='components-alert-demo'>
<md cn={md.cn} us={md.us}/>
<Banner/>
<Basic/>
<Closable/>
<CloseText/>
<Description/>
<Icon/>
<Style/>
<SmoothClosed/>
<div id="components-alert-demo">
<md cn={md.cn} us={md.us} />
<Banner />
<Basic />
<Closable />
<CloseText />
<Description />
<Icon />
<Style />
<SmoothClosed />
<api>
<CN slot='cn' />
<US/>
<CN slot="cn" />
<US />
</api>
</div>
);

24
components/alert/demo/smooth-closed.md
View File

@ -21,17 +21,17 @@ Smoothly and unaffectedly unmount Alert.
</div>
</template>
<script>
export default {
data() {
return {
visible: true,
}
},
methods: {
handleClose(){
this.visible = false
}
}
}
export default {
data() {
return {
visible: true,
};
},
methods: {
handleClose() {
this.visible = false;
},
},
};
</script>
```

9
components/alert/index.en-US.md
View File

@ -1,8 +1,7 @@
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| afterClose | Called when close animation is finished | () => void | - |
| banner | Whether to show as banner | boolean | false |
| closable | Whether Alert can be closed | boolean | - |
@ -14,7 +13,7 @@
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| close | Callback when Alert is closed | (e: MouseEvent) => void |
| Events Name | Description | Arguments |
| ----------- | ----------------------------- | ----------------------- |
| close | Callback when Alert is closed | (e: MouseEvent) => void |

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

@ -1,4 +1,3 @@
## API
| 参数 | 说明 | 类型 | 默认值 |
@ -14,6 +13,7 @@
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| close | 关闭时触发的回调函数 | (e: MouseEvent) => void |
| 事件名称 | 说明 | 回调参数 |
| -------- | -------------------- | ----------------------- |
| close | 关闭时触发的回调函数 | (e: MouseEvent) => void |

14
components/anchor/demo/index.vue
View File

@ -30,16 +30,16 @@ export default {
type: 'Other',
zhType: '其他',
title: 'Anchor',
render () {
render() {
return (
<div id='components-anchor-demo'>
<md cn={md.cn} us={md.us}/>
<Basic/>
<Static/>
<div id="components-anchor-demo">
<md cn={md.cn} us={md.us} />
<Basic />
<Static />
<OnClick />
<api>
<CN slot='cn' />
<US/>
<CN slot="cn" />
<US />
</api>
</div>
);

16
components/anchor/demo/onClick.md
View File

@ -20,13 +20,13 @@ Clicking on an anchor does not record history.
</a-anchor>
</template>
<script>
export default {
methods: {
handleClick (e, link) {
e.preventDefault();
console.log(link);
}
}
}
export default {
methods: {
handleClick(e, link) {
e.preventDefault();
console.log(link);
},
},
};
</script>
```

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

@ -1,10 +1,9 @@
## API
### Anchor Props
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| affix | Fixed mode of Anchor | boolean | true |
| bounds | Bounding distance of anchor area | number | 5(px) |
| getContainer | Scrolling container | () => HTMLElement | () => window |
@ -15,13 +14,14 @@
| wrapperStyle | The style of the container | object | - |
### Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| click | set the handler to handle `click` event | Function(e: Event, link: Object) |
| Events Name | Description | Arguments |
| ----------- | --------------------------------------- | -------------------------------- |
| click | set the handler to handle `click` event | Function(e: Event, link: Object) |
### Link Props
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| href | target of hyperlink | string | |
| title | content of hyperlink | string\|slot | |
| Property | Description | Type | Default |
| -------- | -------------------- | ------------ | ------- |
| href | target of hyperlink | string | |
| title | content of hyperlink | string\|slot | |

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

@ -1,27 +1,27 @@
## API
### Anchor Props
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| affix | 固定模式 | boolean | true |
| bounds | 锚点区域边界 | number | 5(px) |
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
| wrapperClass | 容器的类名 | string | - |
| wrapperStyle | 容器样式 | object | - |
| 成员 | 说明 | 类型 | 默认值 |
| -------------- | -------------------------------- | ----------------- | ------------ |
| affix | 固定模式 | boolean | true |
| bounds | 锚点区域边界 | number | 5(px) |
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
| wrapperClass | 容器的类名 | string | - |
| wrapperStyle | 容器样式 | object | - |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| click | `click` 事件的 handler | Function(e: Event, link: Object) |
| 事件名称 | 说明 | 回调参数 |
| -------- | ---------------------- | -------------------------------- |
| click | `click` 事件的 handler | Function(e: Event, link: Object) |
### Link Props
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| href | 锚点链接 | string | |
| title | 文字内容 | string\|slot | |
| 成员 | 说明 | 类型 | 默认值 |
| ----- | -------- | ------------ | ------ |
| href | 锚点链接 | string | |
| title | 文字内容 | string\|slot | |

34
components/auto-complete/demo/basic.md
View File

@ -1,4 +1,3 @@
<cn>
#### 基本使用
基本使用。通过 dataSource 设置自动完成的数据源
@ -20,25 +19,20 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
/>
</template>
<script>
export default {
data() {
return {
dataSource: [],
}
},
methods: {
handleSearch(value) {
this.dataSource = !value ? [] : [
value,
value + value,
value + value + value,
]
export default {
data() {
return {
dataSource: [],
};
},
onSelect(value) {
console.log('onSelect', value);
}
}
}
methods: {
handleSearch(value) {
this.dataSource = !value ? [] : [value, value + value, value + value + value];
},
onSelect(value) {
console.log('onSelect', value);
},
},
};
</script>
```

136
components/auto-complete/demo/certain-category.md
View File

@ -1,4 +1,3 @@
<cn>
#### 查询模式 - 确定类目
查询模式 - 确定类目
@ -23,10 +22,7 @@ Lookup-Patterns - Certain Category
optionLabelProp="value"
>
<template slot="dataSource">
<a-select-opt-group
v-for="group in dataSource"
:key="group.title"
>
<a-select-opt-group v-for="group in dataSource" :key="group.title">
<span slot="label">
{{group.title}}
<a
@ -34,7 +30,7 @@ Lookup-Patterns - Certain Category
href="https://www.google.com/search?q=antd"
target="_blank"
rel="noopener noreferrer"
>更多
>更多
</a>
</span>
<a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
@ -43,11 +39,7 @@ Lookup-Patterns - Certain Category
</a-select-option>
</a-select-opt-group>
<a-select-option disabled key="all" class="show-all">
<a
href="https://www.google.com/search?q=antd"
target="_blank"
rel="noopener noreferrer"
>
<a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
查看所有结果
</a>
</a-select-option>
@ -59,64 +51,79 @@ Lookup-Patterns - Certain Category
</div>
</template>
<script>
const dataSource = [{
title: '话题',
children: [{
title: 'AntDesign',
count: 10000,
}, {
title: 'AntDesign UI',
count: 10600,
}],
}, {
title: '问题',
children: [{
title: 'AntDesign UI 有多好',
count: 60100,
}, {
title: 'AntDesign 是啥',
count: 30010,
}],
}, {
title: '文章',
children: [{
title: 'AntDesign 是一个设计语言',
count: 100000,
}],
}];
export default {
data() {
return {
dataSource,
}
},
}
const dataSource = [
{
title: '话题',
children: [
{
title: 'AntDesign',
count: 10000,
},
{
title: 'AntDesign UI',
count: 10600,
},
],
},
{
title: '问题',
children: [
{
title: 'AntDesign UI 有多好',
count: 60100,
},
{
title: 'AntDesign 是啥',
count: 30010,
},
],
},
{
title: '文章',
children: [
{
title: 'AntDesign 是一个设计语言',
count: 100000,
},
],
},
];
export default {
data() {
return {
dataSource,
};
},
};
</script>
<style>
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
color: #666;
font-weight: bold;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
color: #666;
font-weight: bold;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
border-bottom: 1px solid #F6F6F6;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
border-bottom: 1px solid #f6f6f6;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
padding-left: 16px;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
padding-left: 16px;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
text-align: center;
cursor: default;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
text-align: center;
cursor: default;
}
.certain-category-search-dropdown .ant-select-dropdown-menu {
max-height: 300px;
}
.certain-category-search-dropdown .ant-select-dropdown-menu {
max-height: 300px;
}
</style>
<style scoped>
.certain-category-search-wrapper >>> .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
.certain-category-search-wrapper
>>> .certain-category-search.ant-select-auto-complete
.ant-input-affix-wrapper
.ant-input-suffix {
right: 12px;
}
.certain-category-search-wrapper >>> .certain-search-item-count {
@ -124,14 +131,15 @@ export default {
color: #999;
right: 16px;
}
.certain-category-search-wrapper >>> .certain-category-search.ant-select-focused .certain-category-icon {
.certain-category-search-wrapper
>>> .certain-category-search.ant-select-focused
.certain-category-icon {
color: #108ee9;
}
.certain-category-search-wrapper >>> .certain-category-icon {
color: #6E6E6E;
color: #6e6e6e;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
font-size: 16px;
}
</style>
```

38
components/auto-complete/demo/custom.md
View File

@ -1,4 +1,3 @@
<cn>
#### 自定义输入组件
自定义输入组件。
@ -26,28 +25,23 @@ Customize Input Component
</a-auto-complete>
</template>
<script>
export default {
data() {
return {
dataSource: [],
}
},
methods: {
onSelect(value) {
console.log('onSelect', value);
export default {
data() {
return {
dataSource: [],
};
},
handleSearch(value) {
this.dataSource = !value ? [] : [
value,
value + value,
value + value + value,
]
methods: {
onSelect(value) {
console.log('onSelect', value);
},
handleSearch(value) {
this.dataSource = !value ? [] : [value, value + value, value + value + value];
},
handleKeyPress(ev) {
console.log('handleKeyPress', ev);
},
},
handleKeyPress(ev) {
console.log('handleKeyPress', ev);
}
}
}
};
</script>
```

21
components/auto-complete/demo/index.vue
View File

@ -28,23 +28,22 @@ export default {
zhType: '数据录入',
cols: 2,
title: 'AutoComplete',
render () {
render() {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic/>
<CertainCategory/>
<Custom/>
<NonCaseSensitive/>
<Options/>
<UncertainCategory/>
<md cn={md.cn} us={md.us} />
<Basic />
<CertainCategory />
<Custom />
<NonCaseSensitive />
<Options />
<UncertainCategory />
<api>
<CN slot='cn' />
<US/>
<CN slot="cn" />
<US />
</api>
</div>
);
},
};
</script>

28
components/auto-complete/demo/non-case-sensitive.md
View File

@ -1,4 +1,3 @@
<cn>
#### 不区分大小写
不区分大小写的 AutoComplete
@ -19,18 +18,19 @@ A non-case-sensitive AutoComplete
/>
</template>
<script>
export default {
data() {
return {
dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],
}
},
methods: {
filterOption(input, option) {
return option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
}
}
}
export default {
data() {
return {
dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],
};
},
methods: {
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
);
},
},
};
</script>
```

44
components/auto-complete/demo/options.md
View File

@ -1,4 +1,3 @@
<cn>
#### 自定义选项
也可以直接传递slot="dataSource"的Option
@ -11,35 +10,30 @@ You could pass `slot="dataSource` as children of `AutoComplete`, instead of usin
```html
<template>
<a-auto-complete
style="width: 200px"
@search="handleSearch"
placeholder="input here"
>
<a-auto-complete style="width: 200px" @search="handleSearch" placeholder="input here">
<template slot="dataSource">
<a-select-option v-for="email in result" :key="email">{{email}}</a-select-option>
<a-select-option v-for="email in result" :key="email">{{email}}</a-select-option>
</template>
</a-auto-complete>
</template>
<script>
export default {
data() {
return {
result: [],
}
},
methods: {
handleSearch(value) {
let result;
if (!value || value.indexOf('@') >= 0) {
result = [];
} else {
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
}
this.result = result
export default {
data() {
return {
result: [],
};
},
}
}
methods: {
handleSearch(value) {
let result;
if (!value || value.indexOf('@') >= 0) {
result = [];
} else {
result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
}
this.result = result;
},
},
};
</script>
```

102
components/auto-complete/demo/uncertain-category.md
View File

@ -1,4 +1,3 @@
<cn>
#### 查询模式 - 不确定类目
查询模式 - 不确定类目
@ -44,67 +43,68 @@ Lookup-Patterns - Uncertain Category
</div>
</template>
<script>
export default {
data() {
return {
dataSource: [],
}
},
methods: {
onSelect(value) {
console.log('onSelect', value);
export default {
data() {
return {
dataSource: [],
};
},
methods: {
onSelect(value) {
console.log('onSelect', value);
},
handleSearch(value) {
this.dataSource = value ? this.searchResult(value) : []
handleSearch(value) {
this.dataSource = value ? this.searchResult(value) : [];
},
getRandomInt(max, min = 0) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
searchResult(query) {
return new Array(this.getRandomInt(5))
.join('.')
.split('.')
.map((item, idx) => ({
query,
category: `${query}${idx}`,
count: this.getRandomInt(200, 100),
}));
},
},
getRandomInt(max, min = 0) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
searchResult(query) {
return (new Array(this.getRandomInt(5))).join('.').split('.')
.map((item, idx) => ({
query,
category: `${query}${idx}`,
count: this.getRandomInt(200, 100),
}));
}
}
}
};
</script>
<style>
.global-search-wrapper {
padding-right: 50px;
}
.global-search-wrapper {
padding-right: 50px;
}
.global-search {
width: 100%;
}
.global-search {
width: 100%;
}
.global-search.ant-select-auto-complete .ant-select-selection--single {
margin-right: -46px;
}
.global-search.ant-select-auto-complete .ant-select-selection--single {
margin-right: -46px;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
padding-right: 62px;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
padding-right: 62px;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
right: 0;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
right: 0;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.global-search-item-count {
position: absolute;
right: 16px;
}
.global-search-item-count {
position: absolute;
right: 16px;
}
</style>
```

15
components/auto-complete/index.en-US.md
View File

@ -1,11 +1,11 @@
## API
````html
```html
<a-auto-complete :dataSource="dataSource" />
````
```
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| autoFocus | get focus when component mounted | boolean | false |
| backfill | backfill selected item the input when using keyboard | boolean | false |
@ -22,6 +22,7 @@
| open | Controlled open state of dropdown | boolean | - |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| change | Called when select an option or input value change, or value of input is changed | function(value) |
@ -33,7 +34,7 @@
## Methods
| Name | Description |
| ---- | ----------- |
| blur() | remove focus |
| focus() | get focus |
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |

11
components/auto-complete/index.zh-CN.md
View File

@ -1,8 +1,8 @@
## API
````html
```html
<a-auto-complete :dataSource="dataSource" />
````
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
@ -22,6 +22,7 @@
| open | 是否展开下拉菜单 | boolean | - |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |
@ -33,7 +34,7 @@
## 方法
| 名称 | 描述 |
| --- | --- |
| blur() | 移除焦点 |
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |

4
components/avatar/demo/badge.md
View File

@ -12,10 +12,10 @@ Usually used for messages remind.
<template>
<div>
<span style="margin-right:24px">
<a-badge :count="1"><a-avatar shape="square" icon="user" /></a-badge>
<a-badge :count="1"><a-avatar shape="square" icon="user"/></a-badge>
</span>
<span>
<a-badge dot><a-avatar shape="square" icon="user" /></a-badge>
<a-badge dot><a-avatar shape="square" icon="user"/></a-badge>
</span>
</div>
</template>

8
components/avatar/demo/basic.md
View File

@ -13,11 +13,11 @@ Three sizes and two shapes are available.
<div>
<div>
<a-avatar :size="64" icon="user" />
<a-avatar size="large" icon="user"/>
<a-avatar icon="user"/>
<a-avatar size="small" icon="user"/>
<a-avatar size="large" icon="user" />
<a-avatar icon="user" />
<a-avatar size="small" icon="user" />
</div>
<br/>
<br />
<div>
<a-avatar shape="square" :size="64" icon="user" />
<a-avatar shape="square" size="large" icon="user" />

26
components/avatar/demo/dynamic.md
View File

@ -11,27 +11,31 @@ For letter type Avatar, when the letters are too long to display, the font size
```html
<template>
<div>
<a-avatar shape="square" size="large" :style="{backgroundColor: color, verticalAlign: 'middle'}">{{avatarValue}}</a-avatar>
<a-button size="small" :style="{ marginLeft: 16, verticalAlign: 'middle' }" @click="changeValue">改变</a-button>
<a-avatar shape="square" size="large" :style="{backgroundColor: color, verticalAlign: 'middle'}"
>{{avatarValue}}</a-avatar
>
<a-button size="small" :style="{ marginLeft: 16, verticalAlign: 'middle' }" @click="changeValue"
>改变</a-button
>
</div>
</template>
<script>
const UserList = ['U', 'Lucy', 'Tom', 'Edward']
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
export default {
data () {
data() {
return {
avatarValue: UserList[0],
color: colorList[0],
}
};
},
methods: {
changeValue () {
const index = UserList.indexOf(this.avatarValue)
this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
changeValue() {
const index = UserList.indexOf(this.avatarValue);
this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];
},
},
}
};
</script>
```

26
components/avatar/demo/index.vue
View File

@ -24,23 +24,23 @@ export default {
type: 'Data Display',
zhType: '数据展示',
title: 'Avatar',
render () {
render() {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic/>
<br/>
<Badge/>
<br/>
<Type/>
<br/>
<Dynamic/>
<br/>
<md cn={md.cn} us={md.us} />
<Basic />
<br />
<Badge />
<br />
<Type />
<br />
<Dynamic />
<br />
<api>
<template slot='cn'>
<CN/>
<template slot="cn">
<CN />
</template>
<US/>
<US />
</api>
</div>
);

3
components/avatar/index.en-US.md
View File

@ -1,7 +1,7 @@
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
| shape | the shape of avatar | `circle` \| `square` | `circle` |
| size | the size of the avatar | number \| string: `large` `small` `default` | `default` |
@ -9,4 +9,3 @@
| srcSet | a list of sources to use for different screen resolutions | string | - |
| alt | This attribute defines the alternative text describing the image | string | - |
| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |

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

@ -9,4 +9,3 @@
| srcSet | 设置图片类头像响应式资源地址 | string | - |
| alt | 图像无法显示时的替代文本 | string | - |
| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |

8
components/back-top/demo/index.vue
View File

@ -24,15 +24,15 @@ export default {
zhType: '其他',
subtitle: '回到顶部',
title: 'BackTop',
render () {
render() {
return (
<div>
<md cn={md.cn} us={md.us}/>
<md cn={md.cn} us={md.us} />
<Basic />
<Custom />
<api>
<CN slot='cn' />
<US/>
<CN slot="cn" />
<US />
</api>
</div>
);

11
components/back-top/index.en-US.md
View File

@ -1,4 +1,3 @@
## API
> The distance to the bottom is set to `50px` by default, which is overridable.
@ -6,14 +5,12 @@
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
| visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400 |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| click | a callback function, which can be executed when you click the button | Function |
| Events Name | Description | Arguments |
| ----------- | -------------------------------------------------------------------- | --------- |
| click | a callback function, which can be executed when you click the button | Function |

8
components/back-top/index.zh-CN.md
View File

@ -1,4 +1,3 @@
## API
> 有默认样式，距离底部 `50px`，可覆盖。
@ -11,6 +10,7 @@
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | number | 400 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击按钮的回调函数 | Function |
| 事件名称 | 说明 | 回调参数 |
| -------- | ------------------ | -------- |
| click | 点击按钮的回调函数 | Function |

1
components/badge/demo/basic.md
View File

@ -24,4 +24,3 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
</div>
</template>
```

36
components/badge/demo/change.md
View File

@ -33,25 +33,25 @@
</div>
</template>
<script>
export default {
data(){
return {
count: 5,
show: true,
}
},
methods: {
decline () {
let count = this.count - 1
if (count < 0) {
count = 0
}
this.count = count
export default {
data() {
return {
count: 5,
show: true,
};
},
increase () {
this.count++
methods: {
decline() {
let count = this.count - 1;
if (count < 0) {
count = 0;
}
this.count = count;
},
increase() {
this.count++;
},
},
}
}
};
</script>
```

34
components/badge/demo/dot.md
View File

@ -11,24 +11,24 @@ If count equals 0, it won't display the dot.
```html
<template>
<div id="components-badge-demo-dot">
<a-badge dot>
<a-icon type="notification" />
</a-badge>
<a-badge :count="0" dot>
<a-icon type="notification" />
</a-badge>
<a-badge dot>
<a href="#">Link something</a>
</a-badge>
</div>
<div id="components-badge-demo-dot">
<a-badge dot>
<a-icon type="notification" />
</a-badge>
<a-badge :count="0" dot>
<a-icon type="notification" />
</a-badge>
<a-badge dot>
<a href="#">Link something</a>
</a-badge>
</div>
</template>
<style scoped>
#components-badge-demo-dot .anticon-notification {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
}
#components-badge-demo-dot .anticon-notification {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
}
</style>
```

76
components/badge/demo/index.vue
View File

@ -1,55 +1,55 @@
<script>
import Basic from './basic.md';
import NoWapper from './no-wrapper';
import Dot from './dot';
import Change from './change';
import Overflow from './overflow';
import Status from './status';
import Title from './title';
import Basic from './basic.md';
import NoWapper from './no-wrapper';
import Dot from './dot';
import Change from './change';
import Overflow from './overflow';
import Status from './status';
import Title from './title';
import CN from './../index.zh-CN.md';
import US from './../index.en_US.md';
import CN from './../index.zh-CN.md';
import US from './../index.en_US.md';
const md = {
cn: `# Badge徽标数
const md = {
cn: `# Badge徽标数
图标右上角的圆形徽标数字。
## 何时使用
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
## 代码演示
`,
us: `# Badge
us: `# Badge
Small numerical value or status descriptor for UI elements.
## When To Use
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
## Examples
`,
};
};
export default {
category: 'Components',
subtitle: '徽标数',
type: 'Data Display',
zhType: '数据展示',
title: 'Badge',
render () {
return (
<div id='components-badge-demo'>
<md cn={md.cn} us={md.us} />
<Basic />
<NoWapper />
<Overflow />
<Dot />
<Status />
<Change />
<Title />
<api>
<CN slot='cn' />
<US />
</api>
</div>
);
},
};
export default {
category: 'Components',
subtitle: '徽标数',
type: 'Data Display',
zhType: '数据展示',
title: 'Badge',
render() {
return (
<div id="components-badge-demo">
<md cn={md.cn} us={md.us} />
<Basic />
<NoWapper />
<Overflow />
<Dot />
<Status />
<Change />
<Title />
<api>
<CN slot="cn" />
<US />
</api>
</div>
);
},
};
</script>
<style>

7
components/badge/demo/no-wrapper.md
View File

@ -13,8 +13,11 @@ Used in standalone when children is empty.
<template>
<div>
<a-badge count="25" />
<a-badge count="4" :numberStyle="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
<a-badge count="109" :numberStyle= "{backgroundColor: '#52c41a'} " />
<a-badge
count="4"
:numberStyle="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}"
/>
<a-badge count="109" :numberStyle="{backgroundColor: '#52c41a'} " />
</div>
</template>
```

20
components/badge/demo/title.md
View File

@ -17,15 +17,15 @@
</div>
</template>
<style scoped>
#components-badge-demo-title .ant-badge:not(.ant-badge-status) {
margin-right: 20px;
}
.head-example {
width: 42px;
height: 42px;
border-radius: 4px;
background: #eee;
display: inline-block;
}
#components-badge-demo-title .ant-badge:not(.ant-badge-status) {
margin-right: 20px;
}
.head-example {
width: 42px;
height: 42px;
border-radius: 4px;
background: #eee;
display: inline-block;
}
</style>
```

8
components/badge/index.en_US.md
View File

@ -1,17 +1,17 @@
## API
````html
```html
<a-badge :count="5">
<a href="#" class="head-example" />
</a-badge>
````
```
```html
<a-badge :count="5" />
````
```
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| count | Number to show in badge | number\|string \| slot | |
| dot | Whether to display a red dot instead of `count` | boolean | `false` |
| offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - |

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

@ -1,19 +1,18 @@
## API
````html
```html
<a-badge :count="5">
<a href="#" class="head-example" />
</a-badge>
````
```
```html
<a-badge :count="5" />
````
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot | |
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot | |
| dot | 不展示数字，只有一个小红点 | boolean | false |
| offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - |
| overflowCount | 展示封顶的数字值 | number | 99 |

64
components/breadcrumb/demo/index.vue
View File

@ -1,14 +1,14 @@
<script>
import Basic from './basic.md';
import WithIcon from './withIcon.md';
import Separator from './separator.md';
import Router from './router';
import Basic from './basic.md';
import WithIcon from './withIcon.md';
import Separator from './separator.md';
import Router from './router';
import US from './../index.en-US.md';
import CN from './../index.zh-CN.md';
import US from './../index.en-US.md';
import CN from './../index.zh-CN.md';
const md = {
cn: `# Breadcrumb面包屑
const md = {
cn: `# Breadcrumb面包屑
显示当前页面在系统层级结构中的位置，并能向上返回。
## 何时使用
- 当系统拥有超过两级以上的层级结构时；
@ -16,7 +16,7 @@
- 当需要向上导航的功能时。
## 代码演示
`,
us: `# Breadcrumb
us: `# Breadcrumb
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
## When to use
- When the system has more than two layers in a hierarchy.
@ -25,28 +25,28 @@
- When the application has multi-layer architecture.
## Examples
`,
};
};
export default {
category: 'Components',
subtitle: '面包屑',
type: 'Navigation',
zhType: '导航',
title: 'Breadcrumb',
render () {
return (
<div>
<md cn={md.cn} us={md.us} />
<Basic />
<WithIcon />
<Separator />
<Router/>
<api>
<CN slot='cn' />
<US />
</api>
</div>
);
},
};
export default {
category: 'Components',
subtitle: '面包屑',
type: 'Navigation',
zhType: '导航',
title: 'Breadcrumb',
render() {
return (
<div>
<md cn={md.cn} us={md.us} />
<Basic />
<WithIcon />
<Separator />
<Router />
<api>
<CN slot="cn" />
<US />
</api>
</div>
);
},
};
</script>

60
components/breadcrumb/demo/router.md
View File

@ -10,39 +10,43 @@ Used together with `vue-router`
```html
<template>
<div>
<a-breadcrumb :routes="routes">
<template slot="itemRender" slot-scope="{route, params, routes, paths}">
<span v-if="routes.indexOf(route) === routes.length - 1">
{{route.breadcrumbName}}
</span>
<router-link v-else :to="`${basePath}/${paths.join('/')}`">
{{route.breadcrumbName}}
</router-link>
</template>
</a-breadcrumb>
<br/>
{{$route.path}}
</div>
<div>
<a-breadcrumb :routes="routes">
<template slot="itemRender" slot-scope="{route, params, routes, paths}">
<span v-if="routes.indexOf(route) === routes.length - 1">
{{route.breadcrumbName}}
</span>
<router-link v-else :to="`${basePath}/${paths.join('/')}`">
{{route.breadcrumbName}}
</router-link>
</template>
</a-breadcrumb>
<br />
{{$route.path}}
</div>
</template>
<script>
export default {
data(){
const { lang } = this.$route.params
data() {
const { lang } = this.$route.params;
return {
basePath: `/${lang}/components/breadcrumb`,
routes: [{
path: 'index',
breadcrumbName: '首页'
}, {
path: 'first',
breadcrumbName: '一级面包屑'
}, {
path: 'second',
breadcrumbName: '当前页面'
}],
}
routes: [
{
path: 'index',
breadcrumbName: '首页',
},
{
path: 'first',
breadcrumbName: '一级面包屑',
},
{
path: 'second',
breadcrumbName: '当前页面',
},
],
};
},
}
};
</script>
```

30
components/breadcrumb/demo/separator.md
View File

@ -11,20 +11,20 @@
```html
<template>
<div>
<a-breadcrumb separator=">">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
<a-breadcrumb-item href="">Application List</a-breadcrumb-item>
<a-breadcrumb-item>An Application</a-breadcrumb-item>
</a-breadcrumb>
<a-breadcrumb>
<span slot="separator" style="color: red">></span>
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
<a-breadcrumb-item href="">Application List</a-breadcrumb-item>
<a-breadcrumb-item>An Application</a-breadcrumb-item>
</a-breadcrumb>
</div>
<div>
<a-breadcrumb separator=">">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
<a-breadcrumb-item href="">Application List</a-breadcrumb-item>
<a-breadcrumb-item>An Application</a-breadcrumb-item>
</a-breadcrumb>
<a-breadcrumb>
<span slot="separator" style="color: red">></span>
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
<a-breadcrumb-item href="">Application List</a-breadcrumb-item>
<a-breadcrumb-item>An Application</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>
```

24
components/breadcrumb/demo/withIcon.md
View File

@ -10,17 +10,17 @@
```html
<template>
<a-breadcrumb>
<a-breadcrumb-item href="">
<a-icon type="home" />
</a-breadcrumb-item>
<a-breadcrumb-item href="">
<a-icon type="user" />
<span>Application List</span>
</a-breadcrumb-item>
<a-breadcrumb-item>
Application
</a-breadcrumb-item>
</a-breadcrumb>
<a-breadcrumb>
<a-breadcrumb-item href="">
<a-icon type="home" />
</a-breadcrumb-item>
<a-breadcrumb-item href="">
<a-icon type="user" />
<span>Application List</span>
</a-breadcrumb-item>
<a-breadcrumb-item>
Application
</a-breadcrumb-item>
</a-breadcrumb>
</template>
```

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

@ -1,8 +1,8 @@
## API
| Property | Description | Type | Optional | Default |
| -------- | ----------- | ---- | -------- | ------- |
| itemRender | Custom item renderer, slot="itemRender" and slot-scope="{route, params, routes, paths}" | ({route, params, routes, paths}) => vNode | | - |
| --- | --- | --- | --- | --- |
| itemRender | Custom item renderer, slot="itemRender" and slot-scope="{route, params, routes, paths}" | ({route, params, routes, paths}) => vNode | | - |
| params | Routing parameters | object | | - |
| routes | The routing stack information of router | object\[] | | - |
| separator | Custom separator | string\|slot | | `/` |
@ -11,35 +11,39 @@
The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
````html
```html
<template>
<a-breadcrumb :routes="routes">
<template slot="itemRender" slot-scope="{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>
</template>
</a-breadcrumb>
<a-breadcrumb :routes="routes">
<template slot="itemRender" slot-scope="{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>
</template>
</a-breadcrumb>
</template>
<script>
export default {
data(){
data() {
return {
routes: [{
path: 'index',
breadcrumbName: '首页'
}, {
path: 'first',
breadcrumbName: '一级面包屑'
}, {
path: 'second',
breadcrumbName: '当前页面'
}],
}
routes: [
{
path: 'index',
breadcrumbName: '首页',
},
{
path: 'first',
breadcrumbName: '一级面包屑',
},
{
path: 'second',
breadcrumbName: '当前页面',
},
],
};
},
}
};
</script>
````
```

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

@ -2,7 +2,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| itemRender | 自定义链接函数，和 vue-router 配置使用， 也可使用slot="itemRender" 和 slot-scope="props" | ({route, params, routes, paths}) => vNode | | - |
| itemRender | 自定义链接函数，和 vue-router 配置使用， 也可使用 slot="itemRender" 和 slot-scope="props" | ({route, params, routes, paths}) => vNode | | - |
| params | 路由的参数 | object | | - |
| routes | router 的路由栈信息 | object\[] | | - |
| separator | 分隔符自定义 | string\|slot | | '/' |
@ -11,35 +11,39 @@
和 vue-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
````html
```html
<template>
<a-breadcrumb :routes="routes">
<template slot="itemRender" slot-scope="{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>
</template>
</a-breadcrumb>
<a-breadcrumb :routes="routes">
<template slot="itemRender" slot-scope="{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>
</template>
</a-breadcrumb>
</template>
<script>
export default {
data(){
data() {
return {
routes: [{
path: 'index',
breadcrumbName: '首页'
}, {
path: 'first',
breadcrumbName: '一级面包屑'
}, {
path: 'second',
breadcrumbName: '当前页面'
}],
}
routes: [
{
path: 'index',
breadcrumbName: '首页',
},
{
path: 'first',
breadcrumbName: '一级面包屑',
},
{
path: 'second',
breadcrumbName: '当前页面',
},
],
};
},
}
};
</script>
````
```

2
components/button/demo/basic.md
View File

@ -1,4 +1,3 @@
<cn>
#### 按钮类型
按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
@ -24,4 +23,3 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto
</div>
</template>
```

2
components/button/demo/block.md
View File

@ -1,4 +1,3 @@
<cn>
#### block 按钮
`block`属性将使按钮适合其父宽度。
@ -20,4 +19,3 @@
</div>
</template>
```

32
components/button/demo/button-group.md
View File

@ -32,12 +32,8 @@ The `size` can be set to `large`, `small` or left unset resulting in a default s
<h4>With Icon</h4>
<a-button-group>
<a-button type="primary">
<a-icon type="left" />Go back
</a-button>
<a-button type="primary">
Go forward<a-icon type="right" />
</a-button>
<a-button type="primary"> <a-icon type="left" />Go back </a-button>
<a-button type="primary"> Go forward<a-icon type="right" /> </a-button>
</a-button-group>
<a-button-group>
<a-button type="primary" icon="cloud" />
@ -46,17 +42,17 @@ The `size` can be set to `large`, `small` or left unset resulting in a default s
</div>
</template>
<style>
#components-button-demo-button-group h4 {
margin: 16px 0;
font-size: 14px;
line-height: 1;
font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
margin-right: 8px;
}
#components-button-demo-button-group h4 {
margin: 16px 0;
font-size: 14px;
line-height: 1;
font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
margin-right: 8px;
}
</style>
```

1
components/button/demo/disabled.md
View File

@ -1,4 +1,3 @@
<cn>
#### 不可用状态
添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

14
components/button/demo/index.vue
View File

@ -39,22 +39,22 @@ export default {
zhType: '通用',
title: 'Button',
subtitle: '按钮',
render () {
render() {
return (
<div>
<md cn={md.cn} us={md.us}/>
<md cn={md.cn} us={md.us} />
<Basic />
<ButtonGroup />
<Disabled />
<Ghost />
<Icon/>
<Icon />
<Loading />
<Multiple />
<Size />
<Block />
<api>
<CN slot='cn' />
<US/>
<CN slot="cn" />
<US />
</api>
</div>
);
@ -62,11 +62,11 @@ export default {
};
</script>
<style>
[id^="components-button-demo-"] .ant-btn {
[id^='components-button-demo-'] .ant-btn {
margin-right: 8px;
margin-bottom: 12px;
}
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
[id^='components-button-demo-'] .ant-btn-group > .ant-btn {
margin-right: 0;
}
</style>

28
components/button/demo/loading.md
View File

@ -30,21 +30,21 @@ A loading indicator can be added to a button by setting the `loading` property o
</div>
</template>
<script>
export default {
data () {
return {
loading: false,
iconLoading: false,
}
},
methods: {
enterLoading () {
this.loading = true
export default {
data() {
return {
loading: false,
iconLoading: false,
};
},
enterIconLoading () {
this.iconLoading = { delay: 1000 }
methods: {
enterLoading() {
this.loading = true;
},
enterIconLoading() {
this.iconLoading = { delay: 1000 };
},
},
},
}
};
</script>
```

18
components/button/demo/multiple.md
View File

@ -19,19 +19,17 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
<a-menu-item key="2">2nd item</a-menu-item>
<a-menu-item key="3">3rd item</a-menu-item>
</a-menu>
<a-button>
Actions <a-icon type="down" />
</a-button>
<a-button> Actions <a-icon type="down" /> </a-button>
</a-dropdown>
</div>
</template>
<script>
export default {
methods: {
handleMenuClick(e) {
console.log('click', e);
}
}
}
export default {
methods: {
handleMenuClick(e) {
console.log('click', e);
},
},
};
</script>
```

30
components/button/demo/size.md
View File

@ -30,27 +30,23 @@ If a large or small button is desired, set the `size` property to either `large`
<a-button type="primary" icon="download" :size="size">Download</a-button>
<br />
<a-button-group :size="size">
<a-button type="primary">
<a-icon type="left" />Backward
</a-button>
<a-button type="primary">
Forward<a-icon type="right" />
</a-button>
<a-button type="primary"> <a-icon type="left" />Backward </a-button>
<a-button type="primary"> Forward<a-icon type="right" /> </a-button>
</a-button-group>
</div>
</template>
<script>
export default {
data () {
return {
size: 'large',
}
},
methods: {
handleSizeChange (e) {
this.size = e.target.value
export default {
data() {
return {
size: 'large',
};
},
},
}
methods: {
handleSizeChange(e) {
this.size = e.target.value;
},
},
};
</script>
```

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

@ -3,7 +3,7 @@
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| disabled | disabled state of button | boolean | `false` |
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false |
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
@ -15,16 +15,15 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| block | option to fit button width to its parent width | boolean | `false` |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| click | set the handler to handle `click` event | (event) => void |
`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
`<Button href="http://example.com">Hello world!</Button>` will be rendered into `<a href="http://example.com"><span>Hello world!</span></a>`.
| Events Name | Description | Arguments |
| ----------- | --------------------------------------- | --------------- |
| click | set the handler to handle `click` event | (event) => void |
`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag. `<Button href="http://example.com">Hello world!</Button>` will be rendered into `<a href="http://example.com"><span>Hello world!</span></a>`.
## FAQ
### How to remove space between 2 chinese characters
Use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.

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

@ -11,22 +11,21 @@
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
| icon | 设置按钮的图标类型 | string | - |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设| string | `default` |
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设 | string | `default` |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击按钮时的回调 | (event) => void |
`<a-button>Hello world!</a-button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到原生 button 上。
`<Button href="http://example.com">Hello world!</Button>` 则会渲染为 `<a href="http://example.com"><span>Hello world!</span></a>`。
| 事件名称 | 说明 | 回调参数 |
| -------- | ---------------- | --------------- |
| click | 点击按钮时的回调 | (event) => void |
`<a-button>Hello world!</a-button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到原生 button 上。 `<Button href="http://example.com">Hello world!</Button>` 则会渲染为 `<a href="http://example.com"><span>Hello world!</span></a>`。
## FAQ
### 如何移除 2 个汉字之间的空格
设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。

14
components/calendar/demo/basic.md
View File

@ -13,12 +13,12 @@ A basic calendar component with Year/Month switch.
<a-calendar @panelChange="onPanelChange" />
</template>
<script>
export default {
methods: {
onPanelChange(value, mode) {
console.log(value, mode);
}
}
}
export default {
methods: {
onPanelChange(value, mode) {
console.log(value, mode);
},
},
};
</script>
```

15
components/calendar/demo/card.md
View File

@ -15,13 +15,12 @@ Nested inside a container element for rendering in limited space.
</div>
</template>
<script>
export default {
methods: {
onPanelChange(value, mode) {
console.log(value, mode);
}
}
}
export default {
methods: {
onPanelChange(value, mode) {
console.log(value, mode);
},
},
};
</script>
```

8
components/calendar/demo/index.vue
View File

@ -32,17 +32,17 @@ export default {
subtitle: '日历',
cols: 1,
title: 'Calendar',
render () {
render() {
return (
<div>
<md cn={md.cn} us={md.us}/>
<md cn={md.cn} us={md.us} />
<Basic />
<Card />
<NoticeCalendar />
<Select />
<api>
<CN slot='cn' />
<US/>
<CN slot="cn" />
<US />
</api>
</div>
);

111
components/calendar/demo/notice-calendar.md
View File

@ -25,63 +25,66 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w
</a-calendar>
</template>
<script>
export default {
methods: {
getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
]; break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
]; break;
default:
}
return listData || [];
},
export default {
methods: {
getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
];
break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
];
break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
];
break;
default:
}
return listData || [];
},
getMonthData(value) {
if (value.month() === 8) {
return 1394;
}
getMonthData(value) {
if (value.month() === 8) {
return 1394;
}
},
},
}
}
};
</script>
<style scoped>
.events {
list-style: none;
margin: 0;
padding: 0;
}
.events .ant-badge-status {
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
font-size: 12px;
}
.notes-month {
text-align: center;
font-size: 28px;
}
.notes-month section {
font-size: 28px;
}
.events {
list-style: none;
margin: 0;
padding: 0;
}
.events .ant-badge-status {
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
font-size: 12px;
}
.notes-month {
text-align: center;
font-size: 28px;
}
.notes-month section {
font-size: 28px;
}
</style>
```

49
components/calendar/demo/select.md
View File

@ -11,35 +11,40 @@ A basic calendar component with Year/Month switch.
```html
<template>
<div>
<a-alert :message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`" />
<div :style="{ display: 'inline-block', width: '500px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
<a-alert
:message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`"
/>
<div
:style="{ display: 'inline-block', width: '500px', border: '1px solid #d9d9d9', borderRadius: '4px' }"
>
<a-calendar :value="value" @select="onSelect" @panelChange="onPanelChange" />
</div>
<div :style="{ display: 'inline-block', width: '500px',marginLeft: '20px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
<div
:style="{ display: 'inline-block', width: '500px',marginLeft: '20px', border: '1px solid #d9d9d9', borderRadius: '4px' }"
>
<a-calendar v-model="value1" />
</div>
</div>
</template>
<script>
import moment from 'moment';
export default {
data() {
return {
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
value1: moment('2017-01-25'),
}
},
methods: {
onSelect(value) {
this.value = value
this.selectedValue = value
import moment from 'moment';
export default {
data() {
return {
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
value1: moment('2017-01-25'),
};
},
onPanelChange (value) {
this.value = value
}
}
}
methods: {
onSelect(value) {
this.value = value;
this.selectedValue = value;
},
onPanelChange(value) {
this.value = value;
},
},
};
</script>
```

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

@ -1,26 +1,22 @@
## API
**Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `moment` correctly.
````html
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');
```html
// The default locale is en-US, if you want to use other locale, just set locale in entry file
globally. // import moment from 'moment'; // import 'moment/locale/zh-cn'; //
moment.locale('zh-cn');
<a-calendar
@panelChange="onPanelChange"
@select="onSelect"
>
<a-calendar @panelChange="onPanelChange" @select="onSelect">
<template slot="dateCellRender" slot-scope="value"></template>
<template slot="monthCellRender" slot-scope="value"></template>
</a-calendar>
````
```
customize the progress dot by setting a scoped slot
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| dateCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will be appended to the cell | function(date: moment) | - |
| dateFullCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will override the cell | function(date: moment) | - |
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
@ -34,8 +30,9 @@ customize the progress dot by setting a scoped slot
| value(v-model) | The current selected date | [moment](http://momentjs.com/) | current date |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| panelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
| select | Callback for when a date is selected | function(date: moment） | - |
| change | Callback for when value change | function(date: moment） | - |
| Events Name | Description | Arguments |
| ----------- | ------------------------------------ | ------------------------------------ |
| panelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
| select | Callback for when a date is selected | function(date: moment） | - |
| change | Callback for when value change | function(date: moment） | - |

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

@ -1,22 +1,16 @@
## API
**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
````html
// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');
```html
// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale // import moment from
'moment'; // import 'moment/locale/zh-cn'; // moment.locale('zh-cn');
<a-calendar
@panelChange="onPanelChange"
@select="onSelect"
>
<a-calendar @panelChange="onPanelChange" @select="onSelect">
<template slot="dateCellRender" slot-scope="value"></template>
<template slot="monthCellRender" slot-scope="value"></template>
</a-calendar>
````
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
@ -33,8 +27,9 @@
| value(v-model) | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| panelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |
| select | 点击选择日期回调 | function(date: moment） | 无 |
| change | 日期变化时的回调, 面板变化有可能导致日期变化| function(date: moment） | 无 |
| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: moment） | 无 |

2
components/card/demo/basic.md
View File

@ -19,7 +19,7 @@ Supports two sizes: `default` and `small`.
<p>card content</p>
<p>card content</p>
</a-card>
<br>
<br />
<a-card size="small" title="Small size card" style="width: 300px">
<a href="#" slot="extra">more</a>
<p>card content</p>

15
components/card/demo/border-less.md
View File

@ -10,13 +10,12 @@
```html
<template>
<div style="background:#ECECEC; padding:30px">
<a-card title="Card title" :bordered="false" style="width: 300px">
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</a-card>
</div>
<div style="background:#ECECEC; padding:30px">
<a-card title="Card title" :bordered="false" style="width: 300px">
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</a-card>
</div>
</template>
```

26
components/card/demo/flexible-content.md
View File

@ -10,19 +10,17 @@
```html
<template>
<a-card
hoverable
style="width: 240px"
>
<img
alt="example"
src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
slot="cover"
/>
<a-card-meta
title="Europe Street beat">
<template slot="description">www.instagram.com</template>
</a-card-meta>
</a-card>
<a-card hoverable style="width: 240px">
<img
alt="example"
src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
slot="cover"
/>
<a-card-meta title="Europe Street beat">
<template slot="description"
>www.instagram.com</template
>
</a-card-meta>
</a-card>
</template>
```

18
components/card/demo/grid-card.md
View File

@ -10,14 +10,14 @@ Grid style card content.
```html
<template>
<a-card title="Card Title">
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
</a-card>
<a-card title="Card Title">
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
</a-card>
</template>
```

10
components/card/demo/in-column.md
View File

@ -13,19 +13,19 @@
<div style="background-color: #ececec; padding: 20px;">
<a-row :gutter="16">
<a-col :span="8">
<a-card title="Card title" :bordered=false>
<a-card title="Card title" :bordered="false">
<p>card content</p>
</a-card>
</a-col>
<a-col :span="8">
<a-card title="Card title" :bordered=false>
<a-card title="Card title" :bordered="false">
<p>card content</p>
</a-card>
</a-card>
</a-col>
<a-col :span="8">
<a-card title="Card title" :bordered=false>
<a-card title="Card title" :bordered="false">
<p>card content</p>
</a-card>
</a-card>
</a-col>
</a-row>
</div>

24
components/card/demo/index.vue
View File

@ -36,22 +36,22 @@ export default {
title: 'Card',
subtitle: '卡片',
cols: 1,
render () {
render() {
return (
<div>
<md cn={md.cn} us={md.us} />
<Basic/>
<BorderLess/>
<FlexibleContent/>
<GridCard/>
<InColumn/>
<Inner/>
<Loading/>
<Meta/>
<Simple/>
<Tabs/>
<Basic />
<BorderLess />
<FlexibleContent />
<GridCard />
<InColumn />
<Inner />
<Loading />
<Meta />
<Simple />
<Tabs />
<api>
<CN slot='cn' />
<CN slot="cn" />
<US />
</api>
</div>

4
components/card/demo/inner.md
View File

@ -11,8 +11,7 @@
```html
<template>
<a-card title="Card title">
<p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500"
>
<p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500">
Group title
</p>
<a-card title="Inner card title">
@ -25,5 +24,4 @@
</a-card>
</a-card>
</template>
```

10
components/card/demo/loading.md
View File

@ -22,15 +22,13 @@
data() {
return {
loading: true,
}
};
},
methods: {
handleClick() {
this.loading = !this.loading
}
this.loading = !this.loading;
},
},
}
};
</script>
```

38
components/card/demo/meta.md
View File

@ -10,25 +10,23 @@
```html
<template>
<a-card
hoverable
style="width: 300px"
>
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
slot="cover"
/>
<template class="ant-card-actions" slot="actions">
<a-icon type="setting" />
<a-icon type="edit" />
<a-icon type="ellipsis" />
</template>
<a-card-meta
title="Card title"
description="This is the description">
<a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
</a-card-meta>
</a-card>
<a-card hoverable style="width: 300px">
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
slot="cover"
/>
<template class="ant-card-actions" slot="actions">
<a-icon type="setting" />
<a-icon type="edit" />
<a-icon type="ellipsis" />
</template>
<a-card-meta title="Card title" description="This is the description">
<a-avatar
slot="avatar"
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</a-card-meta>
</a-card>
</template>
```

80
components/card/demo/tabs.md
View File

@ -18,9 +18,7 @@
:activeTabKey="key"
@tabChange="key => onTabChange(key, 'key')"
>
<span slot="customRender" slot-scope="item">
<a-icon type="home"/>{{item.key}}
</span>
<span slot="customRender" slot-scope="item"> <a-icon type="home" />{{item.key}} </span>
<a href="#" slot="extra">More</a>
{{contentList[key]}}
</a-card>
@ -39,42 +37,48 @@
</template>
<script>
export default {
data () {
return {
tabList: [{
export default {
data() {
return {
tabList: [
{
key: 'tab1',
// tab: 'tab1',
scopedSlots: { tab: 'customRender' },
},
{
key: 'tab2',
tab: 'tab2',
},
],
contentList: {
tab1: 'content1',
tab2: 'content2',
},
tabListNoTitle: [
{
key: 'article',
tab: 'article',
},
{
key: 'app',
tab: 'app',
},
{
key: 'project',
tab: 'project',
},
],
key: 'tab1',
// tab: 'tab1',
scopedSlots: { tab: 'customRender'}
}, {
key: 'tab2',
tab: 'tab2',
}],
contentList: {
tab1: 'content1',
tab2: 'content2',
},
tabListNoTitle: [{
key: 'article',
tab: 'article',
}, {
key: 'app',
tab: 'app',
}, {
key: 'project',
tab: 'project',
}],
key: 'tab1',
noTitleKey: 'app',
}
},
methods: {
onTabChange (key, type) {
console.log(key, type)
this[type] = key
noTitleKey: 'app',
};
},
},
}
methods: {
onTabChange(key, type) {
console.log(key, type);
this[type] = key;
},
},
};
</script>
```

19
components/card/index.en-US.md
View File

@ -3,7 +3,7 @@
### Card
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| actions | The action list, shows at the bottom of the Card. | slots | - |
| activeTabKey | Current TabPane's key | string | - |
| headStyle | Inline style to apply to the card head | object | - |
@ -20,16 +20,17 @@
| type | Card style type, can be set to `inner` or not set | string | - |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| tabChange | Callback when tab is switched | (key) => void | - |
| Events Name | Description | Arguments |
| ----------- | ----------------------------- | ------------- |
| tabChange | Callback when tab is switched | (key) => void | - |
### Card.Grid
### Card.Meta
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| avatar | avatar or icon | slot | - |
| description | description content | string\|slot | - |
| title | title content | string\|slot | - |
| Property | Description | Type | Default |
| ----------- | ------------------- | ------------ | ------- |
| avatar | avatar or icon | slot | - |
| description | description content | string\|slot | - |
| title | title content | string\|slot | - |

36
components/card/index.zh-CN.md
View File

@ -1,36 +1,36 @@
## API
### Card
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| actions | 卡片操作组，位置在卡片底部 |slots | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| actions | 卡片操作组，位置在卡片底部 | slots | - |
| activeTabKey | 当前激活页签的 key | string | - |
| headStyle | 自定义标题区域样式 | object | - |
| bodyStyle | 内容区域自定义样式 | object | - |
| bordered | 是否有边框 | boolean | true |
| cover | 卡片封面 | slot | - |
| bordered | 是否有边框 | boolean | true |
| cover | 卡片封面 | slot | - |
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 |
| extra | 卡片右上角的操作区域 | string\|slot | - |
| extra | 卡片右上角的操作区域 | string\|slot | - |
| hoverable | 鼠标移过时可浮起 | boolean | false |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
| tabList | 页签标题列表, 可以通过scopedSlots属性自定义tab | Array<{key: string, tab: any, scopedSlots: {tab: 'XXX'}}> | - |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
| tabList | 页签标题列表, 可以通过 scopedSlots 属性自定义 tab | Array<{key: string, tab: any, scopedSlots: {tab: 'XXX'}}> | - |
| size | card 的尺寸 | `default` \| `small` | `default` |
| title | 卡片标题 | string\|slot | - |
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
| title | 卡片标题 | string\|slot | - |
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| 事件名称 | 说明 | 回调参数 |
| --------- | -------------- | ------------- |
| tabChange | 页签切换的回调 | (key) => void | - |
### Card.Grid
### Card.Meta
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| avatar | 头像/图标 | slot | - |
| description | 描述内容 | string\|slot | - |
| title | 标题内容 | string\|slot | - |
| Property | Description | Type | Default |
| ----------- | ----------- | ------------ | ------- |
| avatar | 头像/图标 | slot | - |
| description | 描述内容 | string\|slot | - |
| title | 标题内容 | string\|slot | - |

25
components/carousel/demo/autoplay.md
View File

@ -18,21 +18,20 @@ Timing of scrolling to the next card/picture.
</a-carousel>
</template>
<script>
export default {
}
export default {};
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
</style>
```

34
components/carousel/demo/basic.md
View File

@ -18,26 +18,26 @@ Basic usage.
</a-carousel>
</template>
<script>
export default {
methods: {
onChange (a, b, c) {
console.log(a, b, c)
export default {
methods: {
onChange(a, b, c) {
console.log(a, b, c);
},
},
},
}
};
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
</style>
```

61
components/carousel/demo/customArrows.md
View File

@ -12,17 +12,14 @@ Custom arrows display
<template>
<a-carousel arrows>
<div
slot="prevArrow" slot-scope="props"
slot="prevArrow"
slot-scope="props"
class="custom-slick-arrow"
style="left: 10px;zIndex: 1"
>
<a-icon type="left-circle" />
</div>
<div
slot="nextArrow" slot-scope="props"
class="custom-slick-arrow"
style="right: 10px"
>
<div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
<a-icon type="right-circle" />
</div>
<div><h3>1</h3></div>
@ -32,35 +29,35 @@ Custom arrows display
</a-carousel>
</template>
<script>
export default {}
export default {};
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel >>> .custom-slick-arrow {
width: 25px;
height: 25px;
font-size: 25px;
color: #fff;
background-color: rgba(31,45,61,.11);
opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
opacity: 0.5;
}
.ant-carousel >>> .custom-slick-arrow {
width: 25px;
height: 25px;
font-size: 25px;
color: #fff;
background-color: rgba(31, 45, 61, 0.11);
opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
opacity: 0.5;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
</style>
```

69
components/carousel/demo/customPaging.md
View File

@ -20,45 +20,46 @@ Custom paging display
</a-carousel>
</template>
<script>
const baseUrl = 'https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/'
export default {
data() {
return {
baseUrl,
}
},
methods: {
getImgUrl(i) {
return `${baseUrl}abstract0${i + 1}.jpg`
}
}
}
const baseUrl =
'https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/';
export default {
data() {
return {
baseUrl,
};
},
methods: {
getImgUrl(i) {
return `${baseUrl}abstract0${i + 1}.jpg`;
},
},
};
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-dots {
height: auto
}
.ant-carousel >>> .slick-slide img{
border: 5px solid #FFF;
/* For demo */
.ant-carousel >>> .slick-dots {
height: auto;
}
.ant-carousel >>> .slick-slide img {
border: 5px solid #fff;
display: block;
margin: auto;
max-width: 80%;
}
.ant-carousel >>> .slick-thumb {
bottom: -45px;
}
.ant-carousel >>> .slick-thumb li {
width: 60px;
height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
width: 100%;
height: 100%;
filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img{
}
.ant-carousel >>> .slick-thumb {
bottom: -45px;
}
.ant-carousel >>> .slick-thumb li {
width: 60px;
height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
width: 100%;
height: 100%;
filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
filter: grayscale(0%);
}
}
</style>
```

25
components/carousel/demo/fade.md
View File

@ -18,21 +18,20 @@ Slides use fade for transition.
</a-carousel>
</template>
<script>
export default {
}
export default {};
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
</style>
```

4
components/carousel/demo/index.vue
View File

@ -37,7 +37,7 @@ export default {
zhType: '数据展示',
title: 'Carousel',
subtitle: '走马灯',
render () {
render() {
return (
<div>
<md cn={md.cn} us={md.us} />
@ -48,7 +48,7 @@ export default {
<CustomPaging />
<CustomArrows />
<api>
<CN slot='cn' />
<CN slot="cn" />
<US />
</api>
</div>

25
components/carousel/demo/vertical.md
View File

@ -18,21 +18,20 @@ Vertical pagination.
</a-carousel>
</template>
<script>
export default {
}
export default {};
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
/* For demo */
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
</style>
```

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

@ -1,7 +1,7 @@
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| --- | --- | --- | --- |
| afterChange | Callback function called after the current index changes | function(current) | - |
| autoplay | Whether to scroll automatically | boolean | `false` |
| beforeChange | Callback function called before the current index changes | function(from, to) | - |
@ -13,9 +13,9 @@
## Methods
| Name | Description |
| ---- | ----------- |
| --- | --- |
| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |
| next() | Change current slide to next slide |
| prev() | Change current slide to previous slide |
For more info on the parameters, refer to the [vc-slick props](<https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3>)
For more info on the parameters, refer to the [vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3)

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

@ -1,21 +1,21 @@
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterChange | 切换面板的回调 | function(current) | 无 |
| autoplay | 是否自动切换 | boolean | false |
| beforeChange | 切换面板的回调 | function(from, to) | 无 |
| dots | 是否显示面板指示点 | boolean | true |
| easing | 动画效果 | string | linear |
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
| vertical | 垂直显示 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | -------------------------------- | ------------------ | ------- |
| afterChange | 切换面板的回调 | function(current) | 无 |
| autoplay | 是否自动切换 | boolean | false |
| beforeChange | 切换面板的回调 | function(from, to) | 无 |
| dots | 是否显示面板指示点 | boolean | true |
| easing | 动画效果 | string | linear |
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
| vertical | 垂直显示 | boolean | false |
## 方法
| 名称 | 描述 |
| --- | --- |
| 名称 | 描述 |
| ------------------------------ | ------------------------------------------------- |
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
| next() | 切换到下一面板 |
| prev() | 切换到上一面板 |
| next() | 切换到下一面板 |
| prev() | 切换到上一面板 |
更多参数可参考：[vc-slick props](<https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3>)
更多参数可参考：[vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3)

81
components/cascader/demo/basic.md
View File

@ -1,4 +1,3 @@
<cn>
#### 基本
省市区级联。
@ -14,40 +13,50 @@ Cascade selection box for selecting province/city/district.
<a-cascader :options="options" @change="onChange" placeholder="Please select" />
</template>
<script>
export default {
data() {
return {
options: [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}]
}
},
methods: {
onChange(value) {
console.log(value);
}
}
}
export default {
data() {
return {
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
],
};
},
methods: {
onChange(value) {
console.log(value);
},
},
};
</script>
```

81
components/cascader/demo/change-on-select.md
View File

@ -1,4 +1,3 @@
<cn>
#### 选择即改变
这种交互允许只选中父级选项。
@ -14,40 +13,50 @@ Allow only select parent options.
<a-cascader :options="options" @change="onChange" changeOnSelect />
</template>
<script>
export default {
data() {
return {
options: [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}]
}
},
methods: {
onChange(value) {
console.log(value);
}
}
}
export default {
data() {
return {
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
],
};
},
methods: {
onChange(value) {
console.log(value);
},
},
};
</script>
```

101
components/cascader/demo/custom-render.md
View File

@ -1,4 +1,3 @@
<cn>
#### 自定义已选项
例如给最后一项加上邮编链接。
@ -11,60 +10,76 @@ For instance, add an external link after the selected value.
```html
<template>
<a-cascader :options="options" :defaultValue="['zhejiang', 'hangzhou', 'xihu']" style="width: 100%">
<a-cascader
:options="options"
:defaultValue="['zhejiang', 'hangzhou', 'xihu']"
style="width: 100%"
>
<template slot="displayRender" slot-scope="{labels, selectedOptions}">
<span v-for="(label, index) in labels" :key="selectedOptions[index].value">
<span v-if="index === labels.length - 1">
{{label}} (<a @click="e => handleAreaClick(e, label, selectedOptions[index])">{{selectedOptions[index].code}}</a>)
{{label}} (<a @click="e => handleAreaClick(e, label, selectedOptions[index])"
>{{selectedOptions[index].code}}</a
>)
</span>
<span v-else @click="onChange">
{{label}} /
{{label}} /
</span>
</span>
</template>
</a-cascader>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
code: 752100,
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
code: 453400,
}],
}],
}]
}
},
methods: {
onChange(value) {
console.log(value);
export default {
data() {
return {
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
code: 752100,
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
code: 453400,
},
],
},
],
},
],
};
},
handleAreaClick(e, label, option) {
e.stopPropagation();
console.log('clicked', label, option);
methods: {
onChange(value) {
console.log(value);
},
handleAreaClick(e, label, option) {
e.stopPropagation();
console.log('clicked', label, option);
},
},
}
}
};
</script>
```

87
components/cascader/demo/custom-trigger.md
View File

@ -1,4 +1,3 @@
<cn>
#### 可以自定义显示
切换按钮和结果分开。
@ -12,50 +11,58 @@ Separate trigger button and result.
```html
<template>
<span>
{{text}}
&nbsp;
{{text}} &nbsp;
<a-cascader :options="options" @change="onChange">
<a href="#">Change city</a>
</a-cascader>
</span>
</template>
<script>
export default {
data() {
return {
text: 'Unselect',
options: [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake',
}],
}],
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
}],
}],
}]
}
},
methods: {
onChange(value, selectedOptions) {
this.text = selectedOptions.map(o => o.label).join(', ');
}
}
}
export default {
data() {
return {
text: 'Unselect',
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
],
};
},
methods: {
onChange(value, selectedOptions) {
this.text = selectedOptions.map(o => o.label).join(', ');
},
},
};
</script>
```

Some files were not shown because too many files have changed in this diff Show More