diff --git a/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design-vue---.md b/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design-vue---.md index 41306aa0d..235cefe3d 100644 --- a/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design-vue---.md +++ b/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design-vue---.md @@ -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. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index f55848bb1..dc955618f 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -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. \ No newline at end of file +> If this PR related with other PR or following info. You can type here. diff --git a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md index 60bcdb279..02f20810b 100644 --- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md +++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md @@ -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 @@ ### 后续计划（非新功能可选） -> 如果这个提交后面还有相关的其他提交和跟进信息，可以写在这里。 \ No newline at end of file +> 如果这个提交后面还有相关的其他提交和跟进信息，可以写在这里。 diff --git a/BACKERS.md b/BACKERS.md index 03b43ea6d..4990f389e 100644 --- a/BACKERS.md +++ b/BACKERS.md @@ -35,9 +35,8 @@

支付宝/微信

-### 使用支付宝/微信的赞助的用户，如需要添加名单，赞助后可发github账号到邮箱(415800467@qq.com) +### 使用支付宝/微信的赞助的用户，如需要添加名单，赞助后可发 github 账号到邮箱(415800467@qq.com) - [fastgoo](https://github.com/fastgoo) - [sendya](https://github.com/sendya) - [limichange](https://github.com/limichange) - diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 94c71d99a..74f5dd76f 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -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 ``` diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md index 0c071e081..3950d6e90 100644 --- a/components/affix/demo/target.md +++ b/components/affix/demo/target.md @@ -21,14 +21,14 @@ Set a `target` for 'Affix', which is listen to scroll event of target element (d ``` diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md index b58ff8bfe..2bef8f630 100644 --- a/components/affix/index.en-US.md +++ b/components/affix/index.en-US.md @@ -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 ... -```` +``` diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md index b3160e1b6..075f4cda0 100644 --- a/components/affix/index.zh-CN.md +++ b/components/affix/index.zh-CN.md @@ -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 ... -```` +``` diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md index da0d10833..0d92ada72 100644 --- a/components/alert/demo/banner.md +++ b/components/alert/demo/banner.md @@ -13,7 +13,11 @@ Display Alert as a banner at top of page.

- +

diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md index d42ca2859..c06ef1fc9 100644 --- a/components/alert/demo/closable.md +++ b/components/alert/demo/closable.md @@ -27,12 +27,12 @@ To show close button.
``` diff --git a/components/alert/demo/custom-icon.md b/components/alert/demo/custom-icon.md index 1b74407a6..b26ede4dd 100644 --- a/components/alert/demo/custom-icon.md +++ b/components/alert/demo/custom-icon.md @@ -11,19 +11,19 @@ Decent icon make information more clear and more friendly. ```html ``` - diff --git a/components/auto-complete/demo/index.vue b/components/auto-complete/demo/index.vue index 4e1408fb8..e0a739753 100644 --- a/components/auto-complete/demo/index.vue +++ b/components/auto-complete/demo/index.vue @@ -28,23 +28,22 @@ export default { zhType: '数据录入', cols: 2, title: 'AutoComplete', - render () { + render() { return (
- - - - - - - + + + + + + + - - + +
); }, }; - diff --git a/components/auto-complete/demo/non-case-sensitive.md b/components/auto-complete/demo/non-case-sensitive.md index ea7ae6363..21981d958 100644 --- a/components/auto-complete/demo/non-case-sensitive.md +++ b/components/auto-complete/demo/non-case-sensitive.md @@ -1,4 +1,3 @@ - #### 不区分大小写 不区分大小写的 AutoComplete @@ -19,18 +18,19 @@ A non-case-sensitive AutoComplete /> ``` - diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md index 564358dd0..0db247376 100644 --- a/components/auto-complete/demo/options.md +++ b/components/auto-complete/demo/options.md @@ -1,4 +1,3 @@ - #### 自定义选项 也可以直接传递slot="dataSource"的Option @@ -11,35 +10,30 @@ You could pass `slot="dataSource` as children of `AutoComplete`, instead of usin ```html ``` - diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md index 1eba7303a..74a3dd205 100644 --- a/components/auto-complete/demo/uncertain-category.md +++ b/components/auto-complete/demo/uncertain-category.md @@ -1,4 +1,3 @@ - #### 查询模式 - 不确定类目 查询模式 - 不确定类目 @@ -44,67 +43,68 @@ Lookup-Patterns - Uncertain Category ``` - diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 8eb8d3a54..e92257329 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -1,11 +1,11 @@ ## API -````html +```html -```` +``` | 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 | diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 7cdc64771..fe8ad4a31 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -1,8 +1,8 @@ ## API -````html +```html -```` +``` | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | @@ -22,6 +22,7 @@ | open | 是否展开下拉菜单 | boolean | - | ### 事件 + | 事件名称 | 说明 | 回调参数 | | --- | --- | --- | | change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | @@ -33,7 +34,7 @@ ## 方法 -| 名称 | 描述 | -| --- | --- | -| blur() | 移除焦点 | +| 名称 | 描述 | +| ------- | -------- | +| blur() | 移除焦点 | | focus() | 获取焦点 | diff --git a/components/avatar/demo/badge.md b/components/avatar/demo/badge.md index 6ec85620d..63cc0a452 100644 --- a/components/avatar/demo/badge.md +++ b/components/avatar/demo/badge.md @@ -12,10 +12,10 @@ Usually used for messages remind. diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md index cf29b1ff1..5dc18e8d2 100644 --- a/components/avatar/demo/basic.md +++ b/components/avatar/demo/basic.md @@ -13,11 +13,11 @@ Three sizes and two shapes are available.
- - - + + +
-
+
diff --git a/components/avatar/demo/dynamic.md b/components/avatar/demo/dynamic.md index cbc33b78e..ffb12b576 100644 --- a/components/avatar/demo/dynamic.md +++ b/components/avatar/demo/dynamic.md @@ -11,27 +11,31 @@ For letter type Avatar, when the letters are too long to display, the font size ```html ``` diff --git a/components/avatar/demo/index.vue b/components/avatar/demo/index.vue index eaeb46173..48a242cf1 100644 --- a/components/avatar/demo/index.vue +++ b/components/avatar/demo/index.vue @@ -24,23 +24,23 @@ export default { type: 'Data Display', zhType: '数据展示', title: 'Avatar', - render () { + render() { return (
- - -
- -
- -
- -
+ + +
+ +
+ +
+ +
- ``` - diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md index a113e5ab7..dbaadc63c 100644 --- a/components/badge/demo/change.md +++ b/components/badge/demo/change.md @@ -33,25 +33,25 @@
``` diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md index 5110baa10..376b97271 100644 --- a/components/badge/demo/dot.md +++ b/components/badge/demo/dot.md @@ -11,24 +11,24 @@ If count equals 0, it won't display the dot. ```html ``` diff --git a/components/badge/demo/index.vue b/components/badge/demo/index.vue index fbb4b7fb0..52d0151d1 100644 --- a/components/badge/demo/index.vue +++ b/components/badge/demo/index.vue @@ -1,55 +1,55 @@ ``` diff --git a/components/badge/index.en_US.md b/components/badge/index.en_US.md index 60f3f8714..2494012cd 100644 --- a/components/badge/index.en_US.md +++ b/components/badge/index.en_US.md @@ -1,17 +1,17 @@ ## API -````html +```html -```` +``` ```html -```` +``` | 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] | - | diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index bc9bc5ffb..10d20d80c 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -1,19 +1,18 @@ ## API - -````html +```html -```` +``` ```html -```` +``` | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| 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 | diff --git a/components/breadcrumb/demo/index.vue b/components/breadcrumb/demo/index.vue index f49301452..1ec3cf19d 100644 --- a/components/breadcrumb/demo/index.vue +++ b/components/breadcrumb/demo/index.vue @@ -1,14 +1,14 @@ diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md index 5c320226f..3ddc510e3 100644 --- a/components/breadcrumb/demo/router.md +++ b/components/breadcrumb/demo/router.md @@ -10,39 +10,43 @@ Used together with `vue-router` ```html ``` diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md index ea116882c..426f1e0d7 100644 --- a/components/breadcrumb/demo/separator.md +++ b/components/breadcrumb/demo/separator.md @@ -11,20 +11,20 @@ ```html ``` diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md index d1269e924..62b1ed914 100644 --- a/components/breadcrumb/demo/withIcon.md +++ b/components/breadcrumb/demo/withIcon.md @@ -10,17 +10,17 @@ ```html ``` diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index ac0aca05d..c2ec6dd1c 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -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 -```` \ No newline at end of file +``` diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index 1b65475c2..9b0c49d92 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -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 -```` +``` diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md index a4a4659fe..d5f0c8364 100644 --- a/components/button/demo/basic.md +++ b/components/button/demo/basic.md @@ -1,4 +1,3 @@ - #### 按钮类型 按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。 @@ -24,4 +23,3 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto
``` - diff --git a/components/button/demo/block.md b/components/button/demo/block.md index fab314eb9..d1c3c5d60 100644 --- a/components/button/demo/block.md +++ b/components/button/demo/block.md @@ -1,4 +1,3 @@ - #### block 按钮 `block`属性将使按钮适合其父宽度。 @@ -20,4 +19,3 @@
``` - diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md index 78c14db1c..798b2e98c 100644 --- a/components/button/demo/button-group.md +++ b/components/button/demo/button-group.md @@ -32,12 +32,8 @@ The `size` can be set to `large`, `small` or left unset resulting in a default s

With Icon

- - Go back - - - Go forward - + Go back + Go forward @@ -46,17 +42,17 @@ The `size` can be set to `large`, `small` or left unset resulting in a default s ``` diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md index 315688845..dc9d2bec7 100644 --- a/components/button/demo/disabled.md +++ b/components/button/demo/disabled.md @@ -1,4 +1,3 @@ - #### 不可用状态 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。 diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue index dfcf95363..aa0b11bd6 100644 --- a/components/button/demo/index.vue +++ b/components/button/demo/index.vue @@ -39,22 +39,22 @@ export default { zhType: '通用', title: 'Button', subtitle: '按钮', - render () { + render() { return (
- + - + - - + +
); @@ -62,11 +62,11 @@ export default { }; diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index 3cda8a2e3..a244cb16f 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -30,21 +30,21 @@ A loading indicator can be added to a button by setting the `loading` property o ``` diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md index 31c533664..fca2c4118 100644 --- a/components/button/demo/multiple.md +++ b/components/button/demo/multiple.md @@ -19,19 +19,17 @@ If you need several buttons, we recommend that you use 1 primary button + n seco 2nd item 3rd item - - Actions - + Actions ``` diff --git a/components/button/demo/size.md b/components/button/demo/size.md index eb787420b..4e220e765 100644 --- a/components/button/demo/size.md +++ b/components/button/demo/size.md @@ -30,27 +30,23 @@ If a large or small button is desired, set the `size` property to either `large` Download
- - Backward - - - Forward - + Backward + Forward ``` diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 0e14ef23c..dee7dfc81 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -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 | -`` will be rendered into ``, and all the properties which are not listed above will be transferred to the `` will be rendered into `Hello world!`. +| Events Name | Description | Arguments | +| ----------- | --------------------------------------- | --------------- | +| click | set the handler to handle `click` event | (event) => void | + +`` will be rendered into ``, and all the properties which are not listed above will be transferred to the `` will be rendered into `Hello world!`. ## FAQ ### How to remove space between 2 chinese characters Use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`. - diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index c3b071d75..f61819d1c 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -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 | -`Hello world!` 最终会被渲染为 ``，并且除了上表中的属性，其它属性都会直接传到原生 button 上。 -`` 则会渲染为 `Hello world!`。 +| 事件名称 | 说明 | 回调参数 | +| -------- | ---------------- | --------------- | +| click | 点击按钮时的回调 | (event) => void | + +`Hello world!` 最终会被渲染为 ``，并且除了上表中的属性，其它属性都会直接传到原生 button 上。 `` 则会渲染为 `Hello world!`。 ## FAQ ### 如何移除 2 个汉字之间的空格 设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。 - diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md index b5e011db7..58d7dd8b8 100644 --- a/components/calendar/demo/basic.md +++ b/components/calendar/demo/basic.md @@ -13,12 +13,12 @@ A basic calendar component with Year/Month switch. ``` diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md index 8e4c69deb..723ee4b22 100644 --- a/components/calendar/demo/card.md +++ b/components/calendar/demo/card.md @@ -15,13 +15,12 @@ Nested inside a container element for rendering in limited space. ``` - diff --git a/components/calendar/demo/index.vue b/components/calendar/demo/index.vue index 6fffabbe9..265c681bf 100644 --- a/components/calendar/demo/index.vue +++ b/components/calendar/demo/index.vue @@ -32,17 +32,17 @@ export default { subtitle: '日历', cols: 1, title: 'Calendar', - render () { + render() { return (
- + -   - Monitor window resize + +   Monitor window resize

diff --git a/components/vc-calendar/demo/antd-calendar.vue b/components/vc-calendar/demo/antd-calendar.vue index bcbe5086f..70f84df06 100644 --- a/components/vc-calendar/demo/antd-calendar.vue +++ b/components/vc-calendar/demo/antd-calendar.vue @@ -24,32 +24,32 @@ if (cn) { now.locale('en-gb').utcOffset(0); } -function getFormat (time) { +function getFormat(time) { return time ? format : 'YYYY-MM-DD'; } const defaultCalendarValue = now.clone(); defaultCalendarValue.add(-1, 'month'); -const timePickerElement = (h) => ; +const timePickerElement = h => ; -function disabledTime (date) { +function disabledTime(date) { console.log('disabledTime', date); - if (date && (date.date() === 15)) { + if (date && date.date() === 15) { return { - disabledHours () { + disabledHours() { return [3, 4]; }, }; } return { - disabledHours () { + disabledHours() { return [1, 2]; }, }; } -function disabledDate (current) { +function disabledDate(current) { if (!current) { // allow empty select return false; @@ -67,7 +67,7 @@ const Demo = { defaultCalendarValue: PropTypes.object, }, mixins: [BaseMixin], - data () { + data() { return { showTime: true, showDateInput: true, @@ -76,109 +76,105 @@ const Demo = { }; }, methods: { - onChange (value) { - console.log('DatePicker change: ', (value && value.format(format))); + onChange(value) { + console.log('DatePicker change: ', value && value.format(format)); this.setState({ value, }); }, - onShowTimeChange (e) { + onShowTimeChange(e) { this.setState({ showTime: e.target.checked, }); }, - onShowDateInputChange (e) { + onShowDateInputChange(e) { this.setState({ showDateInput: e.target.checked, }); }, - toggleDisabled () { + toggleDisabled() { this.setState({ disabled: !this.disabled, }); }, }, - render (h) { + render(h) { const state = this.$data; - const calendar = (); - return (
-
- -      - -      - -
-
- { - return ( - - - - ); - }, + const calendar = ( + + ); + return ( +
+
+ +      + +      + +
+
- + { + return ( + + + + ); + }, + }} + > +
-
); + ); }, }; @@ -189,45 +185,47 @@ const DemoMultiFormat = { value: now, }), methods: { - onChange (value) { - console.log('Calendar change: ', (value && value.format(format))); + onChange(value) { + console.log('Calendar change: ', value && value.format(format)); this.value = value; }, }, - render () { + render() { const state = this.$data; - return (
-
- Accepts multiple input formats -
- {multiFormats.join(', ')} + return ( +
+
+ Accepts multiple input formats +
+ {multiFormats.join(', ')} +
+
- -
); + ); }, }; -function onStandaloneSelect (value) { +function onStandaloneSelect(value) { console.log('onStandaloneSelect'); console.log(value && value.format(format)); } -function onStandaloneChange (value) { +function onStandaloneChange(value) { console.log('onStandaloneChange'); console.log(value && value.format(format)); } export default { - render (h) { + render(h) { return (
({mode} extra footer)} + renderFooter={mode => {mode} extra footer} />
@@ -269,5 +267,4 @@ export default { ); }, }; - diff --git a/components/vc-calendar/demo/antd-month-calendar.vue b/components/vc-calendar/demo/antd-month-calendar.vue index f9a3fd3aa..c914cf7d0 100644 --- a/components/vc-calendar/demo/antd-month-calendar.vue +++ b/components/vc-calendar/demo/antd-month-calendar.vue @@ -33,7 +33,7 @@ const Demo = { defaultValue: PropTypes.object, }, - data () { + data() { return { showTime: true, disabled: false, @@ -41,96 +41,91 @@ const Demo = { }; }, methods: { - onChange (value) { + onChange(value) { console.log(`DatePicker change: ${value && value.format(format)}`); this.setState({ value, }); }, - onShowTimeChange (e) { + onShowTimeChange(e) { this.setState({ showTime: e.target.checked, }); }, - toggleDisabled () { + toggleDisabled() { this.setState({ disabled: !this.disabled, }); }, }, - render () { + render() { const state = this.$data; - const calendar = (); - return (
-
-      - -
-
- { - return ( - - ); - }, + const calendar = ; + return ( +
+
+      + +
+
- + { + return ( + + ); + }, + }} + > +
-
); + ); }, }; -function onStandaloneSelect (value) { - console.log('month-calendar select', (value && value.format(format))); +function onStandaloneSelect(value) { + console.log('month-calendar select', value && value.format(format)); } -function onStandaloneChange (value) { - console.log('month-calendar change', (value && value.format(format))); +function onStandaloneChange(value) { + console.log('month-calendar change', value && value.format(format)); } -function disabledDate (value) { - return value.year() > now.year() || - value.year() === now.year() && value.month() > now.month(); +function disabledDate(value) { + return value.year() > now.year() || (value.year() === now.year() && value.month() > now.month()); } -function onMonthCellContentRender (value) { +function onMonthCellContentRender(value) { // console.log('month-calendar onMonthCellContentRender', (value && value.format(format))); return `${value.month() + 1}月`; } export default { - render () { + render() { return (
; +const timePickerElement = h => ( + +); -function newArray (start, end) { +function newArray(start, end) { const result = []; for (let i = start; i < end; i++) { result.push(i); @@ -44,7 +48,7 @@ function newArray (start, end) { return result; } -function disabledDate (current) { +function disabledDate(current) { const date = moment(); date.hour(0); date.minute(0); @@ -52,16 +56,16 @@ function disabledDate (current) { return current.isBefore(date); // can not select days before today } -function disabledTime (time, type) { +function disabledTime(time, type) { console.log('disabledTime', time, type); if (type === 'start') { return { - disabledHours () { + disabledHours() { const hours = newArray(0, 60); hours.splice(20, 4); return hours; }, - disabledMinutes (h) { + disabledMinutes(h) { if (h === 20) { return newArray(0, 31); } else if (h === 23) { @@ -69,18 +73,18 @@ function disabledTime (time, type) { } return []; }, - disabledSeconds () { + disabledSeconds() { return [55, 56]; }, }; } return { - disabledHours () { + disabledHours() { const hours = newArray(0, 60); hours.splice(2, 6); return hours; }, - disabledMinutes (h) { + disabledMinutes(h) { if (h === 20) { return newArray(0, 31); } else if (h === 23) { @@ -88,50 +92,50 @@ function disabledTime (time, type) { } return []; }, - disabledSeconds () { + disabledSeconds() { return [55, 56]; }, }; } const formatStr = 'YYYY-MM-DD HH:mm:ss'; -function format (v) { +function format(v) { return v ? v.format(formatStr) : ''; } -function isValidRange (v) { +function isValidRange(v) { return v && v[0] && v[1]; } -function onStandaloneChange (value) { +function onStandaloneChange(value) { console.log('onChange'); console.log(value[0] && format(value[0]), value[1] && format(value[1])); } -function onStandaloneSelect (value) { +function onStandaloneSelect(value) { console.log('onSelect'); console.log(format(value[0]), format(value[1])); } const Demo = { mixins: [BaseMixin], - data () { + data() { return { value: [], hoverValue: [], }; }, methods: { - onChange (value) { + onChange(value) { console.log('onChange', value); this.setState({ value }); }, - onHoverChange (hoverValue) { + onHoverChange(hoverValue) { this.setState({ hoverValue }); }, }, - render (h) { + render(h) { const state = this.$data; const calendar = ( ); return ( - - { - ({ value }) => { - return ( + + {({ value }) => { + return ( + - ); - } - } - ); + + ); + }} + + ); }, }; export default { - render (h) { + render(h) { return (

calendar

@@ -201,5 +201,4 @@ export default { ); }, }; - diff --git a/components/vc-calendar/demo/full-calendar.vue b/components/vc-calendar/demo/full-calendar.vue index 5d0eae482..b0a4dbc1d 100644 --- a/components/vc-calendar/demo/full-calendar.vue +++ b/components/vc-calendar/demo/full-calendar.vue @@ -28,26 +28,26 @@ if (cn) { const defaultCalendarValue = now.clone(); defaultCalendarValue.add(-1, 'month'); -function onSelect (value) { +function onSelect(value) { console.log('select', value.format(format)); } export default { mixins: [BaseMixin], - data () { + data() { return { type: 'month', }; }, methods: { - onTypeChange (type) { + onTypeChange(type) { this.setState({ type, }); }, }, - render () { + render() { return (
\ No newline at end of file + diff --git a/components/vc-cascader/demo/animation.vue b/components/vc-cascader/demo/animation.vue index 7604d0a00..b7b7c4b23 100644 --- a/components/vc-cascader/demo/animation.vue +++ b/components/vc-cascader/demo/animation.vue @@ -3,60 +3,76 @@ import '../assets/index.less'; import Cascader from '../index'; -const addressOptions = [{ - label: '福建', - value: 'fj', - children: [{ - label: '福州', - value: 'fuzhou', - children: [{ - label: '马尾', - value: 'mawei', - }], - }, { - label: '泉州', - value: 'quanzhou', - }], -}, { - label: '浙江', - value: 'zj', - children: [{ - label: '杭州', - value: 'hangzhou', - children: [{ - label: '余杭', - value: 'yuhang', - }], - }], -}, { - label: '北京', - value: 'bj', - children: [{ - label: '朝阳区', - value: 'chaoyang', - }, { - label: '海淀区', - value: 'haidian', - }], -}]; +const addressOptions = [ + { + label: '福建', + value: 'fj', + children: [ + { + label: '福州', + value: 'fuzhou', + children: [ + { + label: '马尾', + value: 'mawei', + }, + ], + }, + { + label: '泉州', + value: 'quanzhou', + }, + ], + }, + { + label: '浙江', + value: 'zj', + children: [ + { + label: '杭州', + value: 'hangzhou', + children: [ + { + label: '余杭', + value: 'yuhang', + }, + ], + }, + ], + }, + { + label: '北京', + value: 'bj', + children: [ + { + label: '朝阳区', + value: 'chaoyang', + }, + { + label: '海淀区', + value: 'haidian', + }, + ], + }, +]; export default { - data () { + data() { return { inputValue: '', }; }, methods: { - onChange (value, selectedOptions) { + onChange(value, selectedOptions) { console.log(value, selectedOptions); this.inputValue = selectedOptions.map(o => o.label).join(', '); }, }, - render () { + render() { return ( - - + + ); }, diff --git a/components/vc-cascader/demo/custom-field-name.vue b/components/vc-cascader/demo/custom-field-name.vue index d7922cdcc..b49fa5786 100644 --- a/components/vc-cascader/demo/custom-field-name.vue +++ b/components/vc-cascader/demo/custom-field-name.vue @@ -3,71 +3,83 @@ import '../assets/index.less'; import Cascader from '../index'; -const addressOptions = [{ - name: '福建', - code: 'fj', - nodes: [{ - name: '福州', - code: 'fuzhou', - nodes: [{ - name: '马尾', - code: 'mawei', - }], - }, { - name: '泉州', - code: 'quanzhou', - }], -}, { - name: '浙江', - code: 'zj', - nodes: [{ - name: '杭州', - code: 'hangzhou', - nodes: [{ - name: '余杭', - code: 'yuhang', - }], - }], -}, { - name: '北京', - code: 'bj', - nodes: [{ - name: '朝阳区', - code: 'chaoyang', - }, { - name: '海淀区', - code: 'haidian', - disabled: true, - }], -}]; +const addressOptions = [ + { + name: '福建', + code: 'fj', + nodes: [ + { + name: '福州', + code: 'fuzhou', + nodes: [ + { + name: '马尾', + code: 'mawei', + }, + ], + }, + { + name: '泉州', + code: 'quanzhou', + }, + ], + }, + { + name: '浙江', + code: 'zj', + nodes: [ + { + name: '杭州', + code: 'hangzhou', + nodes: [ + { + name: '余杭', + code: 'yuhang', + }, + ], + }, + ], + }, + { + name: '北京', + code: 'bj', + nodes: [ + { + name: '朝阳区', + code: 'chaoyang', + }, + { + name: '海淀区', + code: 'haidian', + disabled: true, + }, + ], + }, +]; export default { - data () { + data() { return { inputValue: '', }; }, methods: { - onChange (value, selectedOptions) { + onChange(value, selectedOptions) { console.log(value, selectedOptions); this.inputValue = selectedOptions.map(o => o.name).join(', '); }, }, - render () { + render() { return ( - + ); }, }; - diff --git a/components/vc-dialog/demo/ant-design.vue b/components/vc-dialog/demo/ant-design.vue index 42e9c134a..9237d4b66 100644 --- a/components/vc-dialog/demo/ant-design.vue +++ b/components/vc-dialog/demo/ant-design.vue @@ -5,14 +5,15 @@ import '../assets/index.less'; // use import Dialog from 'rc-dialog' import Dialog from '../index'; -const clearPath = 'M793 242H366v-74c0-6.7-7.7-10.4-12.9' + +const clearPath = + 'M793 242H366v-74c0-6.7-7.7-10.4-12.9' + '-6.3l-142 112c-4.1 3.2-4.1 9.4 0 12.6l142 112c' + '5.2 4.1 12.9 0.4 12.9-6.3v-74h415v470H175c-4.4' + ' 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-' + '28.7 64-64V306c0-35.3-28.7-64-64-64z'; export default { - data () { + data() { return { visible: false, width: 600, @@ -24,22 +25,22 @@ export default { }; }, methods: { - getSvg (path, props = {}, align = false) { + getSvg(path, props = {}, align = false) { return ( - + ); }, - onClick (e) { + onClick(e) { this.visible = true; this.mousePosition = { x: e.pageX, @@ -47,32 +48,32 @@ export default { }; }, - onClose () { - // console.log(e); + onClose() { + // console.log(e); this.visible = false; }, - onDestroyOnCloseChange (e) { + onDestroyOnCloseChange(e) { this.destroyOnClose = e.target.checked; }, - onForceRenderChange (e) { + onForceRenderChange(e) { this.forceRender = e.target.checked; }, - changeWidth () { + changeWidth() { this.width = this.width === 600 ? 800 : 600; }, - handleCenter (e) { + handleCenter(e) { this.center = e.target.checked; }, - toggleCloseIcon () { + toggleCloseIcon() { this.useIcon = !this.useIcon; }, }, - render () { + render() { const style = { width: this.width + 'px', }; @@ -85,8 +86,8 @@ export default { // getContainer={() => this.$refs.container} visible={this.visible} wrapClassName={wrapClassName} - animation='zoom' - maskAnimation='fade' + animation="zoom" + maskAnimation="fade" onClose={this.onClose} style={style} mousePosition={this.mousePosition} @@ -94,11 +95,11 @@ export default { closeIcon={this.useIcon ? this.getSvg(clearPath, {}, true) : undefined} forceRender={this.forceRender} > - +

basic modal

@@ -106,7 +107,7 @@ export default { return (

ant-design dialog

-
+

- -   +   -   +     - +

{dialog}
diff --git a/components/vc-input-number/demo/index.vue b/components/vc-input-number/demo/index.vue index 131eb2adf..ee33d839e 100644 --- a/components/vc-input-number/demo/index.vue +++ b/components/vc-input-number/demo/index.vue @@ -8,19 +8,18 @@ import Simple from './simple.jsx'; import SmallStep from './small-step.jsx'; export default { - render () { + render() { return (
- - - - + + + +
); }, }; - diff --git a/components/vc-pagination/demo/default.vue b/components/vc-pagination/demo/default.vue index c1ffbb3cd..a97e39772 100644 --- a/components/vc-pagination/demo/default.vue +++ b/components/vc-pagination/demo/default.vue @@ -3,25 +3,19 @@ import VcPagination from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { current: 3, }; }, methods: { - onChange (page) { + onChange(page) { console.log(page); this.current = page; }, }, - render () { - return ( - - ); + render() { + return ; }, }; diff --git a/components/vc-pagination/demo/itemRender.vue b/components/vc-pagination/demo/itemRender.vue index 755529c26..ed3441e68 100644 --- a/components/vc-pagination/demo/itemRender.vue +++ b/components/vc-pagination/demo/itemRender.vue @@ -3,17 +3,17 @@ import VcPagination from '../index'; import '../assets/index.less'; export default { - data () { + data() { return {}; }, methods: { - itemRender (current, type, element) { + itemRender(current, type, element) { if (type === 'page') { return {current}; } return element; }, - textItemRender (current, type, element) { + textItemRender(current, type, element) { if (type === 'prev') { return 'Prev'; } @@ -23,17 +23,11 @@ export default { return element; }, }, - render () { + render() { return (
- - + +
); }, diff --git a/components/vc-pagination/demo/jumper.vue b/components/vc-pagination/demo/jumper.vue index 0d472c218..9294ddbd7 100644 --- a/components/vc-pagination/demo/jumper.vue +++ b/components/vc-pagination/demo/jumper.vue @@ -5,44 +5,44 @@ import '../assets/index.less'; import '../../vc-select/assets/index.less'; export default { - data () { + data() { return {}; }, methods: { - onShowSizeChange (current, pageSize) { + onShowSizeChange(current, pageSize) { console.log(current); console.log(pageSize); }, - onChange (current, pageSize) { + onChange(current, pageSize) { console.log('onChange:current=', current); console.log('onChange:pageSize=', pageSize); }, }, - render () { + render() { return (
- -
- + +
+
); }, diff --git a/components/vc-pagination/demo/jumperWithGoButton.vue b/components/vc-pagination/demo/jumperWithGoButton.vue index 534630fc9..2d8fa71c0 100644 --- a/components/vc-pagination/demo/jumperWithGoButton.vue +++ b/components/vc-pagination/demo/jumperWithGoButton.vue @@ -5,20 +5,20 @@ import '../assets/index.less'; import '../../vc-select/assets/index.less'; export default { - data () { + data() { return {}; }, methods: { - onShowSizeChange (current, pageSize) { + onShowSizeChange(current, pageSize) { console.log(current); console.log(pageSize); }, - onChange (current, pageSize) { + onChange(current, pageSize) { console.log('onChange:current=', current); console.log('onChange:pageSize=', pageSize); }, }, - render () { + render() { return (

customize node

diff --git a/components/vc-pagination/demo/lessPages.vue b/components/vc-pagination/demo/lessPages.vue index c83e9fa1e..9f728f50e 100644 --- a/components/vc-pagination/demo/lessPages.vue +++ b/components/vc-pagination/demo/lessPages.vue @@ -3,26 +3,21 @@ import VcPagination from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { current: 3, }; }, methods: { - onChange (page) { + onChange(page) { console.log(page); this.current = page; }, }, - render () { + render() { return (
- +
); diff --git a/components/vc-pagination/demo/more.vue b/components/vc-pagination/demo/more.vue index f456df5ce..181ba2de8 100644 --- a/components/vc-pagination/demo/more.vue +++ b/components/vc-pagination/demo/more.vue @@ -3,10 +3,10 @@ import VcPagination from '../index'; import '../assets/index.less'; export default { - data () { + data() { return {}; }, - render () { + render() { return (
diff --git a/components/vc-pagination/demo/showTitle.vue b/components/vc-pagination/demo/showTitle.vue index dd0f487b2..9d3d42373 100644 --- a/components/vc-pagination/demo/showTitle.vue +++ b/components/vc-pagination/demo/showTitle.vue @@ -3,18 +3,18 @@ import VcPagination from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { current: 3, }; }, methods: { - onChange (page) { + onChange(page) { console.log(page); this.current = page; }, }, - render () { + render() { return (
- `Total ${total} items`} - total={455} - /> + `Total ${total} items`} total={455} /> `${range[0]} - ${range[1]} of ${total} items`} total={455} diff --git a/components/vc-pagination/demo/simple.vue b/components/vc-pagination/demo/simple.vue index 00f1954bd..bb1a358ca 100644 --- a/components/vc-pagination/demo/simple.vue +++ b/components/vc-pagination/demo/simple.vue @@ -3,16 +3,13 @@ import VcPagination from '../index'; import '../assets/index.less'; export default { - data () { + data() { return {}; }, - render () { + render() { return (
- +
); }, diff --git a/components/vc-pagination/demo/sizer.vue b/components/vc-pagination/demo/sizer.vue index e692f9521..ce58b56a8 100644 --- a/components/vc-pagination/demo/sizer.vue +++ b/components/vc-pagination/demo/sizer.vue @@ -5,18 +5,18 @@ import '../assets/index.less'; import '../../vc-select/assets/index.less'; export default { - data () { + data() { return { pageSize: 20, }; }, methods: { - onShowSizeChange (current, pageSize) { + onShowSizeChange(current, pageSize) { console.log(current); this.pageSize = pageSize; }, }, - render () { + render() { return (
- +
); }, diff --git a/components/vc-pagination/demo/styles.vue b/components/vc-pagination/demo/styles.vue index 26fef396b..6286b9f25 100644 --- a/components/vc-pagination/demo/styles.vue +++ b/components/vc-pagination/demo/styles.vue @@ -3,17 +3,13 @@ import VcPagination from '../index'; import '../assets/index.less'; export default { - data () { + data() { return {}; }, - render () { + render() { return (
- +
); }, diff --git a/components/vc-select/demo/combobox.vue b/components/vc-select/demo/combobox.vue index 07b500b9d..839ff2187 100644 --- a/components/vc-select/demo/combobox.vue +++ b/components/vc-select/demo/combobox.vue @@ -3,62 +3,66 @@ import Select, { Option } from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { disabled: false, value: '', }; }, methods: { - onChange (value, option) { + onChange(value, option) { console.log('onChange', value, option); this.value = value; }, - onKeyDown (e) { + onKeyDown(e) { if (e.keyCode === 13) { console.log('onEnter', this.value); } }, - onSelect (v, option) { + onSelect(v, option) { console.log('onSelect', v, option); }, - toggleDisabled () { + toggleDisabled() { this.disabled = !this.disabled; }, }, - render () { - return (
-

combobox

-

- -

-
- + render() { + return ( +
+

combobox

+

+ +

+
+ +
-
); + ); }, }; diff --git a/components/vc-select/demo/email.vue b/components/vc-select/demo/email.vue index 391ebed15..df0e7108d 100644 --- a/components/vc-select/demo/email.vue +++ b/components/vc-select/demo/email.vue @@ -3,21 +3,21 @@ import Select, { Option } from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { disabled: false, options: [], }; }, methods: { - onChange (value) { + onChange(value) { console.log('onChange', value); let options = []; if (value) { if (value.indexOf('@') >= 0) { options = ; } else { - options = ['gmail.com', 'yahoo.com', 'outlook.com'].map((domain) => { + options = ['gmail.com', 'yahoo.com', 'outlook.com'].map(domain => { const email = `${value}@${domain}`; return ; }); @@ -25,22 +25,24 @@ export default { } this.options = options; }, - onSelect (v) { + onSelect(v) { console.log('onSelect', v); }, }, - render () { - return (); + render() { + return ( + + ); }, }; diff --git a/components/vc-select/demo/force-suggest.vue b/components/vc-select/demo/force-suggest.vue index 082487616..2fa1bf7e3 100644 --- a/components/vc-select/demo/force-suggest.vue +++ b/components/vc-select/demo/force-suggest.vue @@ -4,7 +4,7 @@ import { fetch } from './tbFetchSuggest'; import '../assets/index.less'; export default { - data () { + data() { return { disabled: false, data: [], @@ -12,14 +12,14 @@ export default { }; }, methods: { - onChange (value) { + onChange(value) { console.log('select ', value); // value.label = value.key this.value = value; }, - fetchData (value) { + fetchData(value) { if (value) { - fetch(value, (data) => { + fetch(value, data => { this.data = data; }); } else { @@ -27,38 +27,44 @@ export default { } }, - toggleDisabled () { + toggleDisabled() { this.disabled = !this.disabled; }, }, - render () { + render() { const data = this.data; - const options = data.map((d) => { - return ; + const options = data.map(d => { + return ( + + ); }); - return (
-

force suggest

-

- -

+ return (
- +

force suggest

+

+ +

+
+ +
-
); + ); }, }; diff --git a/components/vc-select/demo/mul-suggest.vue b/components/vc-select/demo/mul-suggest.vue index 8ca1e888e..9f94251aa 100644 --- a/components/vc-select/demo/mul-suggest.vue +++ b/components/vc-select/demo/mul-suggest.vue @@ -4,50 +4,56 @@ import '../assets/index.less'; import { fetch } from './tbFetchSuggest'; export default { - data () { + data() { return { data: [], value: [], }; }, methods: { - onChange (value) { + onChange(value) { console.log('onChange ', value); this.value = value; }, - fetchData (value) { - fetch(value, (data) => { + fetchData(value) { + fetch(value, data => { this.data = data; }); }, }, - render () { + render() { const data = this.data; - const options = data.map((d) => { - return ; + const options = data.map(d => { + return ( + + ); }); - return (
-

multiple suggest

- + return (
- +

multiple suggest

+ +
+ +
-
); + ); }, }; diff --git a/components/vc-select/demo/mul-tag-suggest.vue b/components/vc-select/demo/mul-tag-suggest.vue index 4f245eb99..124d74451 100644 --- a/components/vc-select/demo/mul-tag-suggest.vue +++ b/components/vc-select/demo/mul-tag-suggest.vue @@ -4,53 +4,59 @@ import '../assets/index.less'; import { fetch } from './tbFetchSuggest'; export default { - data () { + data() { return { data: [], value: [], }; }, methods: { - onChange (value) { + onChange(value) { console.log('onChange ', value); this.value = value; }, - onSelect (value) { + onSelect(value) { console.log('select ', value); }, - fetchData (value) { - fetch(value, (data) => { + fetchData(value) { + fetch(value, data => { this.data = data; }); }, }, - render () { + render() { const data = this.data; - const options = data.map((d) => { - return ; + const options = data.map(d => { + return ( + + ); }); - return (
-

multiple suggest

- + return (
- +

multiple suggest

+ +
+ +
-
); + ); }, }; diff --git a/components/vc-select/demo/multiple-readonly.vue b/components/vc-select/demo/multiple-readonly.vue index 147fe96b2..04ff2d774 100644 --- a/components/vc-select/demo/multiple-readonly.vue +++ b/components/vc-select/demo/multiple-readonly.vue @@ -4,55 +4,61 @@ import '../assets/index.less'; import { fetch } from './tbFetchSuggest'; export default { - data () { + data() { return { data: [], value: ['b11'], }; }, methods: { - onChange (value) { + onChange(value) { console.log('onChange ', value); this.value = value; }, - onSelect (value) { + onSelect(value) { console.log('select ', value); }, - fetchData (value) { - fetch(value, (data) => { + fetchData(value) { + fetch(value, data => { this.data = data; }); }, }, - render () { + render() { const children = []; for (let i = 10; i < 36; i++) { // 11 => readonly selected item - children.push(); + children.push( + , + ); } const dropdownMenuStyle = { maxHeight: '200px', }; - return (
-

multiple readonly default selected item

+ return (
- +

multiple readonly default selected item

+
+ +
-
); + ); }, }; diff --git a/components/vc-select/demo/multiple.vue b/components/vc-select/demo/multiple.vue index 6eeaf4d98..53252525a 100644 --- a/components/vc-select/demo/multiple.vue +++ b/components/vc-select/demo/multiple.vue @@ -3,72 +3,74 @@ import Select, { Option } from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { useAnim: 0, value: ['a10'], }; }, methods: { - onChange (value, options) { + onChange(value, options) { console.log('onChange', value, options); this.value = value; }, - onSelect (...args) { + onSelect(...args) { console.log('select ', args); }, - onDeselect (...args) { + onDeselect(...args) { console.log('deselect ', args); }, - useAnimation (e) { + useAnimation(e) { this.useAnim = e.target.checked; }, }, - render () { + render() { const children = []; for (let i = 10; i < 36; i++) { children.push( + 中文{i} + , ); } const dropdownMenuStyle = { maxHeight: '200px', }; - return (
-

multiple select（scroll the menu）

+ return ( +
+

multiple select（scroll the menu）

-

-

+ -

+ + +

-
- +
+ +
-
); + ); }, }; diff --git a/components/vc-select/demo/optgroup.vue b/components/vc-select/demo/optgroup.vue index f6df100cb..49fcfc326 100644 --- a/components/vc-select/demo/optgroup.vue +++ b/components/vc-select/demo/optgroup.vue @@ -4,41 +4,47 @@ import '../assets/index.less'; export default { methods: { - onChange (value, option) { + onChange(value, option) { console.log(`selected ${value}`, option); }, }, - render () { - return (
-

Select OptGroup

-
- + render() { + return ( +
+

Select OptGroup

+
+ +
-
); + ); }, }; diff --git a/components/vc-select/demo/optionFilterProp.vue b/components/vc-select/demo/optionFilterProp.vue index e2bf44e57..ad226373e 100644 --- a/components/vc-select/demo/optionFilterProp.vue +++ b/components/vc-select/demo/optionFilterProp.vue @@ -4,28 +4,36 @@ import '../assets/index.less'; export default { methods: { - onChange (value) { + onChange(value) { console.log(`selected ${value}`); }, }, - render () { - return (
-

Select optionFilterProp

-
- + render() { + return ( +
+

Select optionFilterProp

+
+ +
-
); + ); }, }; diff --git a/components/vc-select/demo/optionLabelProp.vue b/components/vc-select/demo/optionLabelProp.vue index bfce64d9f..01c8bdc79 100644 --- a/components/vc-select/demo/optionLabelProp.vue +++ b/components/vc-select/demo/optionLabelProp.vue @@ -4,27 +4,29 @@ import '../assets/index.less'; export default { methods: { - onChange (value) { + onChange(value) { console.log(`selected ${value}`); }, }, - render () { + render() { const cases = { 0: { name: 'Case 1' }, 1: { name: 'Case 2' }, 2: { name: 'Case 3' }, }; - return (
-

Select optionLabelProp

- -
); + return ( +
+

Select optionLabelProp

+ +
+ ); }, }; diff --git a/components/vc-select/demo/single.vue b/components/vc-select/demo/single.vue index fd6dd516b..8eec484b4 100644 --- a/components/vc-select/demo/single.vue +++ b/components/vc-select/demo/single.vue @@ -3,14 +3,14 @@ import Select, { Option } from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { destroy: false, value: 9, }; }, methods: { - onChange (e) { + onChange(e) { let value; if (e && e.target) { value = e.target.value; @@ -21,81 +21,95 @@ export default { this.value = value; }, - onDestroy () { + onDestroy() { this.destroy = 1; }, - onBlur (v) { + onBlur(v) { console.log('onBlur', v); }, - onFocus () { + onFocus() { console.log('onFocus'); }, }, - render () { + render() { if (this.destroy) { return null; } - return (
-
+ return ( +
+
-

Single Select

+

Single Select

-
- + - - - - {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => { - return ; + + + + + + {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => { + return ( + + ); + })} + +
+ +

native select

+ + + +

+ +

- -

native select

- - -

- -

-
); + ); }, }; diff --git a/components/vc-select/demo/suggest.vue b/components/vc-select/demo/suggest.vue index 102f4d5c7..ed716fdc3 100644 --- a/components/vc-select/demo/suggest.vue +++ b/components/vc-select/demo/suggest.vue @@ -3,64 +3,66 @@ import Select, { Option } from '../index'; import '../assets/index.less'; import { fetch } from './tbFetchSuggest'; export default { - data () { + data() { return { data: [], value: [], }; }, methods: { - onKeyDown (e) { + onKeyDown(e) { if (e.keyCode === 13) { console.log('onEnter', this.value); this.jump(this.value); } }, - onSelect (value) { + onSelect(value) { console.log('select ', value); this.jump(value); }, - jump (v) { + jump(v) { console.log('jump ', v); - // location.href = 'https://s.taobao.com/search?q=' + encodeURIComponent(v); + // location.href = 'https://s.taobao.com/search?q=' + encodeURIComponent(v); }, - fetchData (value) { + fetchData(value) { this.value = value; - fetch(value, (data) => { + fetch(value, data => { this.data = data; }); }, }, - render () { + render() { const data = this.data; - const options = data.map((d) => { + const options = data.map(d => { return ; }); - return (
-

suggest

+ return ( +
+

suggest

-
- } - showArrow={false} - notFoundContent='' - onChange={this.fetchData} - onSelect={this.onSelect} - filterOption={false} - > - {options} - +
+ } + showArrow={false} + notFoundContent="" + onChange={this.fetchData} + onSelect={this.onSelect} + filterOption={false} + > + {options} + +
-
); + ); }, }; diff --git a/components/vc-select/demo/tags.vue b/components/vc-select/demo/tags.vue index 97dc4fe2c..3dabe1c2b 100644 --- a/components/vc-select/demo/tags.vue +++ b/components/vc-select/demo/tags.vue @@ -3,7 +3,7 @@ import Select, { Option } from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { disabled: false, value: ['name2', 'name3'], @@ -11,60 +11,66 @@ export default { }; }, methods: { - onChange (value, option) { + onChange(value, option) { console.log(`changed ${value}`, option); this.value = value; }, - onSelect (value, option) { + onSelect(value, option) { console.log(`selected ${value}`, option.props); }, - onDeselect (value, option) { + onDeselect(value, option) { console.log(`deselected ${value}`, option); }, - toggleDisabled () { + toggleDisabled() { this.disabled = !this.disabled; }, - toggleMaxTagCount (count) { + toggleMaxTagCount(count) { this.maxTagCount = count; }, }, - render () { + render() { const children = []; for (let i = 10; i < 36; i++) { - children.push(); + children.push( + , + ); } - return (
-

tags select（scroll the menu）

- + return (
- +

tags select（scroll the menu）

+ +
+ +
+

+ + + +

-

- - - -

-
); + ); }, }; diff --git a/components/vc-steps/demo/alternativeLabel.vue b/components/vc-steps/demo/alternativeLabel.vue index bf10453f2..19904f8fd 100644 --- a/components/vc-steps/demo/alternativeLabel.vue +++ b/components/vc-steps/demo/alternativeLabel.vue @@ -4,20 +4,21 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return { - description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', + description: + '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', }; }, - render () { + render() { const { description } = this; return ( - - - - - - + + + + + + ); }, diff --git a/components/vc-steps/demo/composable.vue b/components/vc-steps/demo/composable.vue index a3e6fb115..a6956707d 100644 --- a/components/vc-steps/demo/composable.vue +++ b/components/vc-steps/demo/composable.vue @@ -4,19 +4,24 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return { - description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', + description: + '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', }; }, - render () { + render() { const { description } = this; return ( - - - - + + + + ); }, diff --git a/components/vc-steps/demo/customIcon.vue b/components/vc-steps/demo/customIcon.vue index be55d59ab..9454a28be 100644 --- a/components/vc-steps/demo/customIcon.vue +++ b/components/vc-steps/demo/customIcon.vue @@ -4,19 +4,17 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { - return { - - }; + data() { + return {}; }, - render () { + render() { return ( - - + + - - + + ); }, diff --git a/components/vc-steps/demo/dynamic.vue b/components/vc-steps/demo/dynamic.vue index a61472a36..95fa51853 100644 --- a/components/vc-steps/demo/dynamic.vue +++ b/components/vc-steps/demo/dynamic.vue @@ -4,36 +4,49 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return { - steps: [{ - title: '已完成', - description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', - }, { - title: '进行中', - description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', - }, { - title: '待运行', - description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', - }, { - title: '待运行', - description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', - }], + steps: [ + { + title: '已完成', + description: + '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', + }, + { + title: '进行中', + description: + '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', + }, + { + title: '待运行', + description: + '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', + }, + { + title: '待运行', + description: + '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶', + }, + ], }; }, methods: { - addStep () { + addStep() { this.steps.push({ title: '待运行', description: '新的节点', }); }, }, - render () { + render() { return (
- {this.steps.map((step, i) => )} + + {this.steps.map((step, i) => ( + + ))} +
); }, diff --git a/components/vc-steps/demo/errorStep.vue b/components/vc-steps/demo/errorStep.vue index 64d35b362..29f3ed31f 100644 --- a/components/vc-steps/demo/errorStep.vue +++ b/components/vc-steps/demo/errorStep.vue @@ -4,19 +4,20 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return { - description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', + description: + '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', }; }, - render () { + render() { const { description } = this; return ( - - - - - + + + + + ); }, diff --git a/components/vc-steps/demo/nextStep.vue b/components/vc-steps/demo/nextStep.vue index 944d679ec..5018bbf3f 100644 --- a/components/vc-steps/demo/nextStep.vue +++ b/components/vc-steps/demo/nextStep.vue @@ -3,25 +3,25 @@ import Steps, { Step } from '../index'; import '../assets/index.less'; import '../assets/iconfont.less'; -function generateRandomSteps () { +function generateRandomSteps() { const n = Math.floor(Math.random() * 3) + 3; const arr = []; for (let i = 0; i < n; i++) { arr.push({ - title: `步骤${(i + 1)}`, + title: `步骤${i + 1}`, }); } return arr; } const steps = generateRandomSteps(); export default { - data () { + data() { return { currentStep: Math.floor(Math.random() * steps.length), }; }, methods: { - nextStep () { + nextStep() { let s = this.currentStep + 1; if (s === steps.length) { s = 0; @@ -29,28 +29,25 @@ export default { this.currentStep = s; }, }, - render () { + render() { const cs = this.currentStep; return ( -
+
这个demo随机生成3~6个步骤，初始随机进行到其中一个步骤
当前正在执行第{cs + 1}步
-
+
- { - steps.map((s, i) => { - return ( - - ); - }) - } + {steps.map((s, i) => { + return ; + })}
-
+
+ +
); }, @@ -67,4 +64,3 @@ export default { width: 100%; } - diff --git a/components/vc-steps/demo/progressDot.vue b/components/vc-steps/demo/progressDot.vue index f2a299dae..2d55e9efe 100644 --- a/components/vc-steps/demo/progressDot.vue +++ b/components/vc-steps/demo/progressDot.vue @@ -4,20 +4,21 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return { - description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', + description: + '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', }; }, - render () { + render() { const { description } = this; return ( - - - - - - + + + + + + ); }, diff --git a/components/vc-steps/demo/simple.vue b/components/vc-steps/demo/simple.vue index 3172b28cb..420c8b873 100644 --- a/components/vc-steps/demo/simple.vue +++ b/components/vc-steps/demo/simple.vue @@ -4,32 +4,33 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return { - description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', + description: + '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', }; }, - render () { + render() { const { description } = this; return (
- - - - + + + + - - - - + + + + - - - - - + + + + +
); diff --git a/components/vc-steps/demo/smallSize.vue b/components/vc-steps/demo/smallSize.vue index be7e58303..4aa67a2c3 100644 --- a/components/vc-steps/demo/smallSize.vue +++ b/components/vc-steps/demo/smallSize.vue @@ -4,24 +4,24 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return {}; }, - render () { + render() { return (
- - - - - + + + + + - - + + - - + +
); diff --git a/components/vc-steps/demo/vertical.vue b/components/vc-steps/demo/vertical.vue index 57f50ef8b..60ffeb021 100644 --- a/components/vc-steps/demo/vertical.vue +++ b/components/vc-steps/demo/vertical.vue @@ -4,20 +4,21 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return { - description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', + description: + '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', }; }, - render () { + render() { const { description } = this; return ( - - - - - - + + + + + + ); }, diff --git a/components/vc-steps/demo/verticalSmall.vue b/components/vc-steps/demo/verticalSmall.vue index bee192d84..e1289a7df 100644 --- a/components/vc-steps/demo/verticalSmall.vue +++ b/components/vc-steps/demo/verticalSmall.vue @@ -4,20 +4,21 @@ import '../assets/index.less'; import '../assets/iconfont.less'; export default { - data () { + data() { return { - description: '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', + description: + '这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊这里是多信息的描述啊', }; }, - render () { + render() { const { description } = this; return ( - - - - - - + + + + + + ); }, diff --git a/components/vc-switch/demo/simple.vue b/components/vc-switch/demo/simple.vue index d322cb070..99dd757a0 100644 --- a/components/vc-switch/demo/simple.vue +++ b/components/vc-switch/demo/simple.vue @@ -3,29 +3,29 @@ import VcSwitch from '../index'; import '../assets/index.less'; export default { - data () { + data() { return { disabled: false, }; }, methods: { - toggle () { + toggle() { this.disabled = !this.disabled; }, - onChange (value) { + onChange(value) { console.log(`switch checked: ${value}`); // eslint-disable-line }, }, - render () { + render() { return ( -
+
-
+
diff --git a/components/vc-time-picker/demo/all.vue b/components/vc-time-picker/demo/all.vue index b153918ef..d8a73e58a 100644 --- a/components/vc-time-picker/demo/all.vue +++ b/components/vc-time-picker/demo/all.vue @@ -7,18 +7,22 @@ import TimePicker from '../index'; const format = 'h:mm a'; -const now = moment().hour(0).minute(0); +const now = moment() + .hour(0) + .minute(0); -function onChange (value) { +function onChange(value) { console.log(value && value.format(format)); } const showSecond = true; const str = showSecond ? 'HH:mm:ss' : 'HH:mm'; -const now1 = moment().hour(14).minute(30); +const now1 = moment() + .hour(14) + .minute(30); -function generateOptions (length, excludedOptions) { +function generateOptions(length, excludedOptions) { const arr = []; for (let value = 0; value < length; value++) { if (excludedOptions.indexOf(value) < 0) { @@ -28,15 +32,15 @@ function generateOptions (length, excludedOptions) { return arr; } -function onChange1 (value) { +function onChange1(value) { console.log(value && value.format(str)); } -function disabledHours () { +function disabledHours() { return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]; } -function disabledMinutes (h) { +function disabledMinutes(h) { switch (h) { case 9: return generateOptions(60, [30]); @@ -47,58 +51,54 @@ function disabledMinutes (h) { } } -function disabledSeconds (h, m) { - return [h + m % 60]; +function disabledSeconds(h, m) { + return [h + (m % 60)]; } -export default{ - data () { +export default { + data() { return { open: false, value: moment(), }; }, methods: { - setOpen ({ open }) { + setOpen({ open }) { this.open = open; }, - toggleOpen () { + toggleOpen() { this.open = !this.open; }, - handleValueChange (value) { + handleValueChange(value) { console.log(value && value.format('HH:mm:ss')); this.value = value; }, - clear () { + clear() { this.value = undefined; }, }, - render () { + render() { return (
-
-
+
+

Disabled picker

- +

Disabled options

- +
[0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]} disabledMinutes={() => [0, 2, 4, 6, 8]} @@ -127,30 +127,19 @@ export default{ />
- +
- - + +
diff --git a/components/vc-tree/demo/animation.vue b/components/vc-tree/demo/animation.vue index 5ae6490a5..85176cbfb 100644 --- a/components/vc-tree/demo/animation.vue +++ b/components/vc-tree/demo/animation.vue @@ -4,10 +4,10 @@ import Tree, { TreeNode } from '../index'; import '../assets/index.less'; import cssAnimation from '../../_util/css-animation'; -function animate (node, show, done) { +function animate(node, show, done) { let height = node.offsetHeight; return cssAnimation(node, 'collapse', { - start () { + start() { if (!show) { node.style.height = `${node.offsetHeight}px`; } else { @@ -15,10 +15,10 @@ function animate (node, show, done) { node.style.height = 0; } }, - active () { + active() { node.style.height = `${show ? height : 0}px`; }, - end () { + end() { node.style.height = ''; done(); }, @@ -26,31 +26,31 @@ function animate (node, show, done) { } const animation = { - enter (node, done) { + enter(node, done) { return animate(node, true, done); }, - leave (node, done) { + leave(node, done) { return animate(node, false, done); }, }; export default { - render () { + render() { return (

expanded

- - - - - - + + + + + + - + @@ -58,7 +58,6 @@ export default { ); }, }; - - ## Features - An enterprise-class UI design language for web applications. @@ -31,8 +28,8 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha ## Environment Support -* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vue.ant.design/docs/vue/getting-started/#Compatibility)) -* Server-side Rendering +- Modern browsers and Internet Explorer 9+ (with [polyfills](https://vue.ant.design/docs/vue/getting-started/#Compatibility)) +- Server-side Rendering ## Version @@ -79,39 +76,38 @@ Vue.use(DatePicker); And import stylesheets manually: ```jsx -import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less' +import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less' ``` ### Use modularized antd - Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended) - ```js - // .babelrc or babel-loader option - { - "plugins": [ - ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` for less - ] - } - ``` + ```js + // .babelrc or babel-loader option + { + "plugins": [ + ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` for less + ] + } + ``` - > Note: Don't set `libraryDirectory` if you are using webpack 1. + > Note: Don't set `libraryDirectory` if you are using webpack 1. - This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets. + This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets. - ```jsx - // import js and css modularly, parsed by babel-plugin-import - import { DatePicker } from 'ant-design-vue'; - ``` + ```jsx + // import js and css modularly, parsed by babel-plugin-import + import { DatePicker } from 'ant-design-vue'; + ``` - Manually import - ```jsx - import DatePicker from 'ant-design-vue/lib/date-picker'; // for js - import 'ant-design-vue/lib/date-picker/style/css'; // for css - // import 'ant-design-vue/lib/date-picker/style'; // that will import less - ``` - + ```jsx + import DatePicker from 'ant-design-vue/lib/date-picker'; // for js + import 'ant-design-vue/lib/date-picker/style/css'; // for css + // import 'ant-design-vue/lib/date-picker/style'; // that will import less + ``` ## Links @@ -127,10 +123,9 @@ import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less' ## Contributing - If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/issue-helper/). -> If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you! +> If you're new to posting issues, we ask that you read [_How To Ask Questions The Smart Way_](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you! ## THANK YOU diff --git a/docs/vue/introduce.zh-CN.md b/docs/vue/introduce.zh-CN.md index 7c4e38dba..7c6bed880 100644 --- a/docs/vue/introduce.zh-CN.md +++ b/docs/vue/introduce.zh-CN.md @@ -1,4 +1,3 @@ - # Ant Design of Vue 这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。 @@ -21,7 +20,6 @@ } - ## 特性 - 提炼自企业级中后台产品的交互语言和视觉风格。 @@ -30,8 +28,8 @@ ## 支持环境 -* 现代浏览器和 IE9 及以上（需要 [polyfills](https://vue.ant.design/docs/vue/getting-started-cn/#兼容性)）。 -* 支持服务端渲染。 +- 现代浏览器和 IE9 及以上（需要 [polyfills](https://vue.ant.design/docs/vue/getting-started-cn/#兼容性)）。 +- 支持服务端渲染。 ## 版本 @@ -55,14 +53,13 @@ $ yarn add ant-design-vue 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。 -> **组件库使用了 vue 的新特性`slot-scope`(2.5.0新增), `provide / inject`(2.2.0新增)** +> **组件库使用了 vue 的新特性`slot-scope`(2.5.0 新增), `provide / inject`(2.2.0 新增)** ### 浏览器引入 在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `antd`。 -我们在 npm 发布包内的 `ant-design-vue/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge)](https://www.jsdelivr.com/package/npm/ant-design-vue) - 或 [UNPKG](https://unpkg.com/ant-design-vue/dist/) 进行下载。 +我们在 npm 发布包内的 `ant-design-vue/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge)](https://www.jsdelivr.com/package/npm/ant-design-vue) 或 [UNPKG](https://unpkg.com/ant-design-vue/dist/) 进行下载。 > **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。 @@ -79,7 +76,7 @@ Vue.use(DatePicker); 引入样式： ```jsx -import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less' +import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less' ``` ### 按需加载 @@ -88,31 +85,31 @@ import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less' - 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。 - ```js - // .babelrc or babel-loader option - { - "plugins": [ - ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件 - ] - } - ``` + ```js + // .babelrc or babel-loader option + { + "plugins": [ + ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件 + ] + } + ``` - > 注意：webpack 1 无需设置 `libraryDirectory`。 + > 注意：webpack 1 无需设置 `libraryDirectory`。 - 然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。 + 然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。 - ```jsx - // babel-plugin-import 会帮助你加载 JS 和 CSS - import { DatePicker } from 'ant-design-vue'; - ``` + ```jsx + // babel-plugin-import 会帮助你加载 JS 和 CSS + import { DatePicker } from 'ant-design-vue'; + ``` - 手动引入 - ```jsx - import DatePicker from 'ant-design-vue/lib/date-picker'; // 加载 JS - import 'ant-design-vue/lib/date-picker/style/css'; // 加载 CSS - // import 'ant-design-vue/lib/date-picker/style'; // 加载 LESS - ``` + ```jsx + import DatePicker from 'ant-design-vue/lib/date-picker'; // 加载 JS + import 'ant-design-vue/lib/date-picker/style/css'; // 加载 CSS + // import 'ant-design-vue/lib/date-picker/style'; // 加载 LESS + ``` ## 链接 @@ -126,22 +123,20 @@ import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less' - [支持我们](/docs/vue/sponsor-cn) - [Awesome Ant Design](https://github.com/vueComponent/ant-design-vue-awesome) - ## 如何贡献 如果你希望参与贡献，欢迎 [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls)，或给我们 [报告 Bug](https://vuecomponent.github.io/issue-helper/)([国内镜像](http://ant-design-vue.gitee.io/issue-helper/))。 > 强烈推荐阅读 [《提问的智慧》](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)，更好的问题更容易获得帮助。 -## 关于ant-design-vue +## 关于 ant-design-vue -众所周知，Ant Design作为一门设计语言面世，经历过多年的迭代和积累，它对UI的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是React开发者手中的神兵利器。希望ant-design-vue能够让Vue开发者也享受到Ant Design的优秀设计。 +众所周知，Ant Design 作为一门设计语言面世，经历过多年的迭代和积累，它对 UI 的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是 React 开发者手中的神兵利器。希望 ant-design-vue 能够让 Vue 开发者也享受到 Ant Design 的优秀设计。 -ant-design-vue 是 Ant Design 的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致，真正做到了样式0修改，组件API也尽量保持了一致。 +ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步，组件的 html 结构和 css 样式也保持一致，真正做到了样式 0 修改，组件 API 也尽量保持了一致。 Ant Design Vue 致力于提供给程序员**愉悦**的开发体验。 ## 特别感谢 [Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt) - diff --git a/docs/vue/sponsor.en-US.md b/docs/vue/sponsor.en-US.md index 02de87748..d4c18d3f6 100644 --- a/docs/vue/sponsor.en-US.md +++ b/docs/vue/sponsor.en-US.md @@ -5,6 +5,7 @@ ant-design-vue is an MIT licensed open source project and completely free to use ## One-time Donations We accept donations through these channels: +
PayPal
@@ -14,6 +15,7 @@ We accept donations through these channels: ## Recurring Pledges Recurring pledges come with exclusive perks, e.g. having your name listed in the Vue GitHub repository, or have your company logo placed on this website. +
Patreon
@@ -24,13 +26,12 @@ Recurring pledges come with exclusive perks, e.g. having your name listed in the You can consult me by email [415800467@qq.com](415800467@qq.com). - - ## Current sponsors ### 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)] +
diff --git a/docs/vue/sponsor.zh-CN.md b/docs/vue/sponsor.zh-CN.md index 9a09e8815..27bd84ab2 100644 --- a/docs/vue/sponsor.zh-CN.md +++ b/docs/vue/sponsor.zh-CN.md @@ -5,6 +5,7 @@ ant-design-vue 是采用 MIT 许可的开源项目，使用完全免费。 但 ## 一次性赞助 你可以通过以下任意一种方式赞助: +
PayPal
@@ -14,6 +15,7 @@ ant-design-vue 是采用 MIT 许可的开源项目，使用完全免费。 但 ## 周期性赞助 周期性赞助可以获得额外的回报，比如你的名字会出现在 Vue 的 GitHub 仓库中，再比如你的公司 logo 会出现在我们的官网上。 +
Patreon
@@ -24,8 +26,6 @@ ant-design-vue 是采用 MIT 许可的开源项目，使用完全免费。 但 您可以通过邮件咨询[415800467@qq.com](415800467@qq.com)。 - - ## 当前的赞助商 ### Sponsors diff --git a/docs/vue/use-with-vue-cli.en-US.md b/docs/vue/use-with-vue-cli.en-US.md index 161d474c5..6332ee37f 100644 --- a/docs/vue/use-with-vue-cli.en-US.md +++ b/docs/vue/use-with-vue-cli.en-US.md @@ -20,8 +20,7 @@ $ vue create antd-demo And, setup your vue project configuration. -The tool will create and initialize environment and dependencies automatically, -please try config your proxy setting or use another npm registry if any network errors happen during it. +The tool will create and initialize environment and dependencies automatically, please try config your proxy setting or use another npm registry if any network errors happen during it. Then we go inside `antd-demo` and start it. @@ -62,10 +61,10 @@ $ yarn add ant-design-vue Modify `src/main.js`, import Button component from `antd`. ```jsx -import Vue from "vue"; -import Button from "ant-design-vue/lib/button"; -import "ant-design-vue/dist/antd.css"; -import App from "./App"; +import Vue from 'vue'; +import Button from 'ant-design-vue/lib/button'; +import 'ant-design-vue/dist/antd.css'; +import App from './App'; Vue.component(Button.name, Button); @@ -73,9 +72,9 @@ Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ - el: "#app", + el: '#app', components: { App }, - template: "" + template: '', }); ``` @@ -96,8 +95,7 @@ Ok, you should now see a blue primary button displayed on the page. Next you can ## Advanced Guides -We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. -For instance, we actually import all styles of components in the project which may be a network performance issue. +We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import all styles of components in the project which may be a network performance issue. Now we need to customize the default webpack config. diff --git a/docs/vue/use-with-vue-cli.zh-CN.md b/docs/vue/use-with-vue-cli.zh-CN.md index 7c6994b70..7fae3a306 100644 --- a/docs/vue/use-with-vue-cli.zh-CN.md +++ b/docs/vue/use-with-vue-cli.zh-CN.md @@ -61,18 +61,18 @@ $ yarn add ant-design-vue 修改 `src/main.js`，引入 antd 的按钮组件以及全部样式文件。 ```jsx -import Vue from "vue"; -import Button from "ant-design-vue/lib/button"; -import "ant-design-vue/dist/antd.css"; -import App from "./App"; +import Vue from 'vue'; +import Button from 'ant-design-vue/lib/button'; +import 'ant-design-vue/dist/antd.css'; +import App from './App'; Vue.component(Button.name, Button); Vue.config.productionTip = false; new Vue({ - render: h => h(App) -}).$mount("#app"); + render: h => h(App), +}).$mount('#app'); ``` 修改 `src/App.vue`的 template 内容。 diff --git a/package.json b/package.json index f97a18d0f..63d869883 100644 --- a/package.json +++ b/package.json @@ -54,10 +54,6 @@ "url": "https://github.com/vueComponent/ant-design-vue/issues" }, "homepage": "https://vue.ant.design/", - "pre-commit": [ - "lint", - "prettier" - ], "husky": { "hooks": { "pre-commit": "pretty-quick --staged" @@ -223,4 +219,4 @@ "lib/**/style/*", "*.less" ] -} \ No newline at end of file +} diff --git a/site/404.html b/site/404.html index 1ecc2dcaa..ad5c76db0 100644 --- a/site/404.html +++ b/site/404.html @@ -1,84 +1,86 @@ - + - - - - - - - - - + + + + + + + + Ant Design Vue - + - - + var hm = document.createElement('script'); + hm.src = src; + var s = document.getElementsByTagName('script')[0]; + s.parentNode.insertBefore(hm, s); + })(); + + - +
-
-
-

404

-

你要找的页面不存在返回首页

-
- -
+
+
+

404

+

你要找的页面不存在返回首页

+
+ +
- - + diff --git a/site/components/api.vue b/site/components/api.vue index 6333436d0..426f9d2eb 100644 --- a/site/components/api.vue +++ b/site/components/api.vue @@ -1,9 +1,6 @@ @@ -12,9 +9,9 @@ import { isZhCN } from '../util'; export default { name: 'Api', inject: { - demoContext: { default: {}}, + demoContext: { default: {} }, }, - data () { + data() { return { isZhCN: isZhCN(this.demoContext.name), }; diff --git a/site/components/demoBox.vue b/site/components/demoBox.vue index 891f441a4..dd80b537f 100644 --- a/site/components/demoBox.vue +++ b/site/components/demoBox.vue @@ -1,15 +1,9 @@