mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-04 13:08:48 +08:00
chore: rename vue-antd-ui to ant-design-vue
This commit is contained in:
parent
20648c892c
commit
2beed39569
26
.jest.js
26
.jest.js
@ -1,15 +1,12 @@
|
||||
const libDir = process.env.LIB_DIR;
|
||||
|
||||
const transformIgnorePatterns = [
|
||||
'/dist/',
|
||||
'node_modules\/[^/]+?\/(?!(es|node_modules)\/)', // Ignore modules without es dir
|
||||
'/dist/', 'node_modules\/[^/]+?\/(?!(es|node_modules)\/)', // Ignore modules without es dir
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
testURL: 'http://localhost/',
|
||||
setupFiles: [
|
||||
'./tests/setup.js',
|
||||
],
|
||||
setupFiles: ['./tests/setup.js'],
|
||||
moduleFileExtensions: [
|
||||
"js",
|
||||
"jsx",
|
||||
@ -18,25 +15,22 @@ module.exports = {
|
||||
"md",
|
||||
"jpg"
|
||||
],
|
||||
modulePathIgnorePatterns: [
|
||||
'/_site/',
|
||||
],
|
||||
modulePathIgnorePatterns: ['/_site/'],
|
||||
testPathIgnorePatterns: [
|
||||
'/node_modules/',
|
||||
'node',
|
||||
'/node_modules/', 'node'
|
||||
],
|
||||
transform: {
|
||||
".*\\.(vue|md)$": "<rootDir>/node_modules/vue-jest",
|
||||
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest"
|
||||
},
|
||||
testRegex: libDir === 'dist' ? 'demo\\.test\\.js$' : '.*\\.test\\.js$',
|
||||
testRegex: libDir === 'dist'
|
||||
? 'demo\\.test\\.js$'
|
||||
: '.*\\.test\\.js$',
|
||||
moduleNameMapper: {
|
||||
"^@/(.*)$": "<rootDir>/$1",
|
||||
"vue-antd-ui": "<rootDir>/components/index.js",
|
||||
"ant-design-vue": "<rootDir>/components/index.js"
|
||||
},
|
||||
snapshotSerializers: [
|
||||
"<rootDir>/node_modules/jest-serializer-vue"
|
||||
],
|
||||
snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
|
||||
collectCoverage: process.env.COVERAGE === 'true',
|
||||
collectCoverageFrom: [
|
||||
"components/**/*.{js,jsx,vue}",
|
||||
@ -52,5 +46,5 @@ module.exports = {
|
||||
'!components/style.js',
|
||||
"!**/node_modules/**"
|
||||
],
|
||||
transformIgnorePatterns,
|
||||
transformIgnorePatterns
|
||||
};
|
||||
|
@ -5,129 +5,129 @@
|
||||
## 1.0.1
|
||||
|
||||
`2018-07-27`
|
||||
- 🌟 Optimize Chinese input for `Input` components(just support v-model) [4a5154](https://github.com/vueComponent/ant-design/commit/4a51544bd6470ab628dda80e9d7593e4603dd0b6)
|
||||
- 🐞 Fix `treeSelect` `treeData[i].children` throw error when null[#81](https://github.com/vueComponent/ant-design/issues/81)
|
||||
- 🐞 Fix `Calendar` change event call twice[#82](https://github.com/vueComponent/ant-design/issues/82)
|
||||
- 🐞 Fix the `description` and `title` slot attribute of the `Card` component does not work[#83](https://github.com/vueComponent/ant-design/issues/83)
|
||||
- 🐞 Fix `dropdownClassName` attribute of `DataPicker` component does not working[02ab242](https://github.com/vueComponent/ant-design/commit/02ab242197b923f2157f41d98a7930512475a799)
|
||||
- 🌟 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)
|
||||
- 🐞 Fix the `description` and `title` slot attribute of the `Card` component does not work[#83](https://github.com/vueComponent/ant-design-vue/issues/83)
|
||||
- 🐞 Fix `dropdownClassName` attribute of `DataPicker` component does not working[02ab242](https://github.com/vueComponent/ant-design-vue/commit/02ab242197b923f2157f41d98a7930512475a799)
|
||||
|
||||
## 1.0.0
|
||||
|
||||
`2018-07-21`
|
||||
- 🌟 Add `Carousel` component [edddbd](https://github.com/vueComponent/ant-design/commit/edddbd982a279b62229ce825855c14c556866ece)
|
||||
- 🌟 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/issues/73)
|
||||
- 🐞 add `Table` panagation deep watch[#b464c6](https://github.com/vueComponent/ant-design/commit/b464c6f6ee4df6df1b6c55f29ac85b2f462763bc)
|
||||
- 🐞 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/issues/37)
|
||||
- 🐞 Fix `blur` event error when using `Select` component in `Tooltip`[#67](https://github.com/vueComponent/ant-design/issues/67)
|
||||
- 🐞 Modify the `Upload` component `action` attribute to optional[#66](https://github.com/vueComponent/ant-design/issues/66)
|
||||
- 🌟 `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/issues/63)
|
||||
- 🐞 Fix `Transfer` local-provider miss `titles`[#64](https://github.com/vueComponent/ant-design/issues/64)
|
||||
- 🐞 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/issues/62)
|
||||
- 🐞 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/issues/61)
|
||||
- 🐞 Fix `Upload` image preview does not jump correctly[1584b3](https://github.com/vueComponent/ant-design/commit/1584b3839e500d2d6b07abf704f5cd084ca00e87)
|
||||
- 🐞 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/issues/56)
|
||||
- 🐞 Fix `Select` popup position is not updated[8254f7](https://github.com/vueComponent/ant-design/commit/8254f783a32189b63ffcf2c53702b50afef1f3db)
|
||||
- 🐞 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/issues/53)
|
||||
- 🐞 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/issues/49)
|
||||
- 🐞 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/commit/7c923278b3678a822ff90da0cb8db7653d79e15c)
|
||||
- `Select`: 🐞 add `focus` `blur` methods[52f6f5](https://github.com/vueComponent/ant-design/commit/52f6f50dbe38631c0e698a6ea23b3686f6c2a375)
|
||||
- 🌟 `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`
|
||||
- 🐞 Fix Radiogroup `disabled` className[9df74b](https://github.com/vueComponent/ant-design/commit/9df74bedd7640b6066010c498f942ce544c658b7)
|
||||
- 🐞 Fix `autoFoucs` `focus` `blur` `mouseenter` `mouseleave` not working[f7886c](https://github.com/vueComponent/ant-design/commit/f7886c7203730bedf519bc45f5f78726735d3aac)
|
||||
- `TimePicker`: 🐞 Fix `autoFoucs` `focus` `blur` not working[28d009](https://github.com/vueComponent/ant-design/commit/28d009d3ced807051a86a2c09cd2764303de98f7)
|
||||
- 🐞 Fix Radiogroup `disabled` className[9df74b](https://github.com/vueComponent/ant-design-vue/commit/9df74bedd7640b6066010c498f942ce544c658b7)
|
||||
- 🐞 Fix `autoFoucs` `focus` `blur` `mouseenter` `mouseleave` not working[f7886c](https://github.com/vueComponent/ant-design-vue/commit/f7886c7203730bedf519bc45f5f78726735d3aac)
|
||||
- `TimePicker`: 🐞 Fix `autoFoucs` `focus` `blur` not working[28d009](https://github.com/vueComponent/ant-design-vue/commit/28d009d3ced807051a86a2c09cd2764303de98f7)
|
||||
|
||||
## 0.6.1
|
||||
|
||||
`2018-06-17`
|
||||
- 🌟 Add `List` Component
|
||||
- `Table`
|
||||
- 🐞 Fix `'querySelectorAll` error when updating height[#33](https://github.com/vueComponent/ant-design/issues/33)
|
||||
- 🐞 fix `defaultChecked` not working[ec1999](https://github.com/vueComponent/ant-design/commit/ec1999dea4cea126b78e3fd84bef620b876e9841)
|
||||
- `columns key` support `number` type[9b7f5c](https://github.com/vueComponent/ant-design/commit/9b7f5c2f81b6f83190e5b022b2b1e28de3f68a2b)
|
||||
- 🐞 Fix `'querySelectorAll` error when updating height[#33](https://github.com/vueComponent/ant-design-vue/issues/33)
|
||||
- 🐞 fix `defaultChecked` not working[ec1999](https://github.com/vueComponent/ant-design-vue/commit/ec1999dea4cea126b78e3fd84bef620b876e9841)
|
||||
- `columns key` support `number` type[9b7f5c](https://github.com/vueComponent/ant-design-vue/commit/9b7f5c2f81b6f83190e5b022b2b1e28de3f68a2b)
|
||||
- `Tooltip`: 🛠 update events API `change` to `visibleChange`
|
||||
- `Textarea`: 🐞 Fix `autoFoucs` not working[787927](https://github.com/vueComponent/ant-design/commit/787927912307db7edb9821a440feacd216e3a6a2)
|
||||
- `InputSearch`: 🐞 Add `focus` `blur` methods[3cff62](https://github.com/vueComponent/ant-design/commit/3cff62997d16811ae17618f9b41617973d805d7d)
|
||||
- `InputNumber`: 🐞 Fix `autoFoucs` not working[88f165](https://github.com/vueComponent/ant-design/commit/88f165edb5c3993f4dba90c3267a1ea037e0869b)
|
||||
- `DatePicker`: 🐞 Fix `autoFoucs` not working[264abf](https://github.com/vueComponent/ant-design/commit/264abff59791181b9190ca0914b780a8df6aa81a)
|
||||
- `Cascader`: 🐞 Fix `autoFoucs` not working[be69bd](https://github.com/vueComponent/ant-design/commit/be69bd9af1bae184a4ebe8c4ef9560479ab11027)
|
||||
- `Rate`: 🐞 Fix `autoFoucs` not working,and `blur` error[c2c984](https://github.com/vueComponent/ant-design/commit/c2c9841eb9b8e5ce4decff57a925e60d4bd7d809)
|
||||
- `RangePicker`: 🐞 Fix value type check error problem[228f44](https://github.com/vueComponent/ant-design/commit/228f4478a5d169d22960c97d1d8a8320c58da9cc)
|
||||
- `Textarea`: 🐞 Fix `autoFoucs` not working[787927](https://github.com/vueComponent/ant-design-vue/commit/787927912307db7edb9821a440feacd216e3a6a2)
|
||||
- `InputSearch`: 🐞 Add `focus` `blur` methods[3cff62](https://github.com/vueComponent/ant-design-vue/commit/3cff62997d16811ae17618f9b41617973d805d7d)
|
||||
- `InputNumber`: 🐞 Fix `autoFoucs` not working[88f165](https://github.com/vueComponent/ant-design-vue/commit/88f165edb5c3993f4dba90c3267a1ea037e0869b)
|
||||
- `DatePicker`: 🐞 Fix `autoFoucs` not working[264abf](https://github.com/vueComponent/ant-design-vue/commit/264abff59791181b9190ca0914b780a8df6aa81a)
|
||||
- `Cascader`: 🐞 Fix `autoFoucs` not working[be69bd](https://github.com/vueComponent/ant-design-vue/commit/be69bd9af1bae184a4ebe8c4ef9560479ab11027)
|
||||
- `Rate`: 🐞 Fix `autoFoucs` not working,and `blur` error[c2c984](https://github.com/vueComponent/ant-design-vue/commit/c2c9841eb9b8e5ce4decff57a925e60d4bd7d809)
|
||||
- `RangePicker`: 🐞 Fix value type check error problem[228f44](https://github.com/vueComponent/ant-design-vue/commit/228f4478a5d169d22960c97d1d8a8320c58da9cc)
|
||||
|
||||
## 0.6.0
|
||||
|
||||
`2018-06-04`
|
||||
- 🌟 Add `Anchor` Component
|
||||
- `Table`
|
||||
- 🐞 Fix show `emptyText` problem when `loading.spinning` [17b9dc](https://github.com/vueComponent/ant-design/commit/17b9dc14f5225eb75542facdb5053f4916b9d77f)
|
||||
- 🐞 Fixed `header style` not working [#30](https://github.com/vueComponent/ant-design/pull/30)
|
||||
- 🐞 `DatePicker`: Fix the issue of `change` event repeatedly call when `showTime` is `true` [81ab82](https://github.com/vueComponent/ant-design/commit/81ab829b1d0f67ee926b106de788fc5b41ec4f9c)
|
||||
- 🐞 `InputNumber`: Fix `placeholder` not working [ce39dc](https://github.com/vueComponent/ant-design/commit/ce39dc3506474a4b31632e03c38b518cf4060cef#diff-c9d10303f22c684e66d71ab1f9dac5f9R50)
|
||||
- 🐞 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)
|
||||
|
||||
## 0.5.4
|
||||
|
||||
`2018-05-26`
|
||||
- 🐞 Fix missing `less` file problem in dist directory[ca084b9](https://github.com/vueComponent/ant-design/commit/ca084b9e6f0958c25a8278454c864ac8127cce95)
|
||||
- 🐞 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/commit/90583a3c42e8b520747d6f6ac10cfd718d447030)
|
||||
- 🐞 Fixed issue with building `antd-with-locales.js` containing test files[90583a3](https://github.com/vueComponent/ant-design-vue/commit/90583a3c42e8b520747d6f6ac10cfd718d447030)
|
||||
|
||||
## 0.5.2
|
||||
|
||||
`2018-05-25`
|
||||
|
||||
- 🐞 `Timeline`: Fix duplicated loading component bug [fa5141b](https://github.com/vueComponent/ant-design/commit/fa5141bd0061385f251b9026a07066677426b319)
|
||||
- 🐞 `Timeline`: Fix duplicated loading component bug [fa5141b](https://github.com/vueComponent/ant-design-vue/commit/fa5141bd0061385f251b9026a07066677426b319)
|
||||
- `Transfer`
|
||||
- 🐞 Fix search box clear button does not work Problem [4582da3](https://github.com/vueComponent/ant-design/commit/4582da3725e65c47a542f164532ab75a5618c265)
|
||||
- 💄 Override property change listener logic to avoid unnecessary [0920d23](https://github.com/vueComponent/ant-design/commit/0920d23f12f6c133f667cd65316f1f0e6af27a33)
|
||||
- 💄 `Select`: Optimizing `title` display logic [9314957](https://github.com/vueComponent/ant-design/commit/931495768f8b573d12ce4e058e853c875f22bcd3)
|
||||
- 🐞 Fix search box clear button does not work Problem [4582da3](https://github.com/vueComponent/ant-design-vue/commit/4582da3725e65c47a542f164532ab75a5618c265)
|
||||
- 💄 Override property change listener logic to avoid unnecessary [0920d23](https://github.com/vueComponent/ant-design-vue/commit/0920d23f12f6c133f667cd65316f1f0e6af27a33)
|
||||
- 💄 `Select`: Optimizing `title` display logic [9314957](https://github.com/vueComponent/ant-design-vue/commit/931495768f8b573d12ce4e058e853c875f22bcd3)
|
||||
- `Form`
|
||||
- 🐞 Fixed Form component `directive` error [#20](https://github.com/vueComponent/ant-design/issues/20)
|
||||
- 🌟 Maintain an ref for wrapped component instance, use `wrappedComponentRef` [c5e421c](https://github.com/vueComponent/ant-design/commit/c5e421cdb2768e93288ce7b4654bee2114f8e5ba)
|
||||
- 🐞 `DatePicker`: Fix calendar keyboard event does not work [e9b6914](https://github.com/vueComponent/ant-design/commit/e9b6914282b1ac8d84b4262b8a6b33aa4e515831)
|
||||
- `Avatar`: Fixing font size adaptation issues [#22](https://github.com/vueComponent/ant-design/pull/22)
|
||||
- 🐞 Fixed Form component `directive` error [#20](https://github.com/vueComponent/ant-design-vue/issues/20)
|
||||
- 🌟 Maintain an ref for wrapped component instance, use `wrappedComponentRef` [c5e421c](https://github.com/vueComponent/ant-design-vue/commit/c5e421cdb2768e93288ce7b4654bee2114f8e5ba)
|
||||
- 🐞 `DatePicker`: Fix calendar keyboard event does not work [e9b6914](https://github.com/vueComponent/ant-design-vue/commit/e9b6914282b1ac8d84b4262b8a6b33aa4e515831)
|
||||
- `Avatar`: Fixing font size adaptation issues [#22](https://github.com/vueComponent/ant-design-vue/pull/22)
|
||||
- 🌟 Added single test for some components
|
||||
- 🌟 sorted component library `dependencies` and `devDependencies`, deleted unused packages, and added `peerDependencies`
|
||||
|
||||
@ -135,7 +135,7 @@
|
||||
|
||||
`2018-05-10`
|
||||
|
||||
- 🐞 `Table`: Fix `customRow` events not working[#16](https://github.com/vueComponent/ant-design/issues/16)
|
||||
- 🐞 `Table`: Fix `customRow` events not working[#16](https://github.com/vueComponent/ant-design-vue/issues/16)
|
||||
|
||||
## 0.5.0
|
||||
|
||||
@ -172,11 +172,11 @@
|
||||
|
||||
#### Others
|
||||
|
||||
- support use [Vue.use(antd)](https://github.com/vueComponent/ant-design/issues/3)
|
||||
- support use [Vue.use(antd)](https://github.com/vueComponent/ant-design-vue/issues/3)
|
||||
|
||||
|
||||
## 0.3.1
|
||||
|
||||
#### Features
|
||||
|
||||
- first version, provide 45 [components](https://github.com/vueComponent/ant-design/blob/c7e83d6142f0c5e72ef8fe794620478e69a50a8e/site/components.js)
|
||||
- first version, provide 45 [components](https://github.com/vueComponent/ant-design-vue/blob/c7e83d6142f0c5e72ef8fe794620478e69a50a8e/site/components.js)
|
||||
|
@ -5,78 +5,78 @@
|
||||
## 1.0.1
|
||||
|
||||
`2018-07-27`
|
||||
- 🌟 针对`Input`组件优化中文输入(仅在v-model绑定时生效) [4a5154](https://github.com/vueComponent/ant-design/commit/4a51544bd6470ab628dda80e9d7593e4603dd0b6)
|
||||
- 🐞 修复`TreeSelect` `treeeData[i].children`为`null`时报错问题[#81](https://github.com/vueComponent/ant-design/issues/81)
|
||||
- 🐞 修复`Calendar`组件的 change 事件触发两次的问题[#82](https://github.com/vueComponent/ant-design/issues/82)
|
||||
- 🐞 修复`Card`组件的`description`和`title`属性slot不生效问题[#83](https://github.com/vueComponent/ant-design/issues/83)
|
||||
- 🐞 修复`DataPicker`组件的`dropdownClassName`属性不生效问题[02ab242](https://github.com/vueComponent/ant-design/commit/02ab242197b923f2157f41d98a7930512475a799)
|
||||
- 🌟 针对`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)
|
||||
- 🐞 修复`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/commit/edddbd982a279b62229ce825855c14c556866ece)
|
||||
- 🌟 新增`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/issues/73)
|
||||
- 🐞 add `Table` panagation deep watch[#b464c6](https://github.com/vueComponent/ant-design/commit/b464c6f6ee4df6df1b6c55f29ac85b2f462763bc)
|
||||
- 🐞 修复`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/issues/37)
|
||||
- 🐞 修复`Tooltip`中使用`Select`组件时,`blur`事件报错问题[#67](https://github.com/vueComponent/ant-design/issues/67)
|
||||
- 🐞 修改`Upload`组件`action`属性为可选[#66](https://github.com/vueComponent/ant-design/issues/66)
|
||||
- 🌟 `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/issues/63)
|
||||
- 🐞 修复`Transfer`国际化缺少titles问题[#64](https://github.com/vueComponent/ant-design/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/issues/62)
|
||||
- 🐞 修复`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/issues/61)
|
||||
- 🐞 修复`Upload`图片预览不能正确跳转问题[1584b3](https://github.com/vueComponent/ant-design/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/issues/56)
|
||||
- 🐞 修复`Select`的弹出框位置不更新问题[8254f7](https://github.com/vueComponent/ant-design/commit/8254f783a32189b63ffcf2c53702b50afef1f3db)
|
||||
- 🐞 修复`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/issues/53)
|
||||
- 🐞 修复`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/issues/49)
|
||||
- 🐞 修复`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/commit/7c923278b3678a822ff90da0cb8db7653d79e15c)
|
||||
- `Select`: 🐞 添加`focus` `blur`方法[52f6f5](https://github.com/vueComponent/ant-design/commit/52f6f50dbe38631c0e698a6ea23b3686f6c2a375)
|
||||
- 🌟 `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/commit/9df74bedd7640b6066010c498f942ce544c658b7)
|
||||
- 🐞 修复`autoFoucs` `focus` `blur` `mouseenter` `mouseleave` 不生效问题[f7886c](https://github.com/vueComponent/ant-design/commit/f7886c7203730bedf519bc45f5f78726735d3aac)
|
||||
- `TimePicker`: 🐞 修复`autoFoucs` `focus` `blur`不生效问题[28d009](https://github.com/vueComponent/ant-design/commit/28d009d3ced807051a86a2c09cd2764303de98f7)
|
||||
- 🐞 修复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
|
||||
@ -84,18 +84,18 @@
|
||||
`2018-06-17`
|
||||
- 🌟 新增`List`列表组件
|
||||
- `Table`
|
||||
- 🐞 修复更新高度时报错问题[#33](https://github.com/vueComponent/ant-design/issues/33)
|
||||
- 🐞 修复`defaultChecked`不生效问题[ec1999](https://github.com/vueComponent/ant-design/commit/ec1999dea4cea126b78e3fd84bef620b876e9841)
|
||||
- `columns key`支持数字类型[9b7f5c](https://github.com/vueComponent/ant-design/commit/9b7f5c2f81b6f83190e5b022b2b1e28de3f68a2b)
|
||||
- 🐞 修复更新高度时报错问题[#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`
|
||||
- `Textarea`: 🐞 修复`autoFoucs`不生效问题[787927](https://github.com/vueComponent/ant-design/commit/787927912307db7edb9821a440feacd216e3a6a2)
|
||||
- `InputSearch`: 🐞 添加`focus` `blur`方法[3cff62](https://github.com/vueComponent/ant-design/commit/3cff62997d16811ae17618f9b41617973d805d7d)
|
||||
- `InputNumber`: 🐞 修复`autoFoucs`不生效问题[88f165](https://github.com/vueComponent/ant-design/commit/88f165edb5c3993f4dba90c3267a1ea037e0869b)
|
||||
- `DatePicker`: 🐞 修复`autoFoucs`不生效问题[264abf](https://github.com/vueComponent/ant-design/commit/264abff59791181b9190ca0914b780a8df6aa81a)
|
||||
- `Cascader`: 🐞 修复`autoFoucs`不生效问题[be69bd](https://github.com/vueComponent/ant-design/commit/be69bd9af1bae184a4ebe8c4ef9560479ab11027)
|
||||
- `Rate`: 🐞 修复`autoFoucs`不生效问题,及`blur`报错问题[c2c984](https://github.com/vueComponent/ant-design/commit/c2c9841eb9b8e5ce4decff57a925e60d4bd7d809)
|
||||
- `RangePicker`: 🐞 修复值类型校验出错问题[228f44](https://github.com/vueComponent/ant-design/commit/228f4478a5d169d22960c97d1d8a8320c58da9cc)
|
||||
- `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)
|
||||
- `DatePicker`: 🐞 修复`autoFoucs`不生效问题[264abf](https://github.com/vueComponent/ant-design-vue/commit/264abff59791181b9190ca0914b780a8df6aa81a)
|
||||
- `Cascader`: 🐞 修复`autoFoucs`不生效问题[be69bd](https://github.com/vueComponent/ant-design-vue/commit/be69bd9af1bae184a4ebe8c4ef9560479ab11027)
|
||||
- `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
|
||||
@ -103,36 +103,36 @@
|
||||
`2018-06-04`
|
||||
- 🌟 新增`Anchor`锚点组件
|
||||
- `Table`
|
||||
- 🐞 修复`loading.spinning`时显示`emptyText`问题[17b9dc](https://github.com/vueComponent/ant-design/commit/17b9dc14f5225eb75542facdb5053f4916b9d77f)
|
||||
- 🐞 修复`header style`不生效问题[#30](https://github.com/vueComponent/ant-design/pull/30)
|
||||
- `DatePicker`: 🐞 修复属性`showTime`为`true`时,重复调用`change`事件问题[81ab82](https://github.com/vueComponent/ant-design/commit/81ab829b1d0f67ee926b106de788fc5b41ec4f9c)
|
||||
- `InputNumber`: 🐞 修复`placeholder`不生效问题[ce39dc](https://github.com/vueComponent/ant-design/commit/ce39dc3506474a4b31632e03c38b518cf4060cef#diff-c9d10303f22c684e66d71ab1f9dac5f9R50)
|
||||
- 🐞 修复`loading.spinning`时显示`emptyText`问题[17b9dc](https://github.com/vueComponent/ant-design-vue/commit/17b9dc14f5225eb75542facdb5053f4916b9d77f)
|
||||
- 🐞 修复`header style`不生效问题[#30](https://github.com/vueComponent/ant-design-vue/pull/30)
|
||||
- `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/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/commit/90583a3c42e8b520747d6f6ac10cfd718d447030)
|
||||
- 🐞 修复构建`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/commit/fa5141bd0061385f251b9026a07066677426b319)
|
||||
- 🐞 `Timeline`: 修复重复显示loading组件bug[fa5141b](https://github.com/vueComponent/ant-design-vue/commit/fa5141bd0061385f251b9026a07066677426b319)
|
||||
- `Transfer`
|
||||
- 🐞 修复搜索框的清除按钮不起作用问题[4582da3](https://github.com/vueComponent/ant-design/commit/4582da3725e65c47a542f164532ab75a5618c265)
|
||||
- 💄 重写了属性变化监听逻辑,避免不必要的[0920d23](https://github.com/vueComponent/ant-design/commit/0920d23f12f6c133f667cd65316f1f0e6af27a33)
|
||||
- 💄 `Select`: 优化`title`显示逻辑[9314957](https://github.com/vueComponent/ant-design/commit/931495768f8b573d12ce4e058e853c875f22bcd3)
|
||||
- 🐞 修复搜索框的清除按钮不起作用问题[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/issues/20)
|
||||
- 🌟 优化获取Form包装组件实例功能[c5e421c](https://github.com/vueComponent/ant-design/commit/c5e421cdb2768e93288ce7b4654bee2114f8e5ba)
|
||||
- 🐞 `DatePicker`: 修复日历键盘事件不起作用问题[e9b6914](https://github.com/vueComponent/ant-design/commit/e9b6914282b1ac8d84b4262b8a6b33aa4e515831)
|
||||
- `Avatar`: 修复字体大小自适应问题[#22](https://github.com/vueComponent/ant-design/pull/22)
|
||||
- 🐞 修复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
|
||||
|
||||
@ -141,7 +141,7 @@
|
||||
|
||||
`2018-05-10`
|
||||
|
||||
- 🐞 `Table`: 修复 `customRow` 自定义事件不生效问题[#16](https://github.com/vueComponent/ant-design/issues/16)
|
||||
- 🐞 `Table`: 修复 `customRow` 自定义事件不生效问题[#16](https://github.com/vueComponent/ant-design-vue/issues/16)
|
||||
|
||||
## 0.5.0
|
||||
|
||||
@ -179,12 +179,12 @@
|
||||
|
||||
#### 其它
|
||||
|
||||
- 支持导入所有组件[Vue.use(antd)](https://github.com/vueComponent/ant-design/issues/3)
|
||||
- 支持导入所有组件[Vue.use(antd)](https://github.com/vueComponent/ant-design-vue/issues/3)
|
||||
|
||||
|
||||
## 0.3.1
|
||||
|
||||
#### Features
|
||||
|
||||
- 对外第一个版本,提供常用45个[组件](https://github.com/vueComponent/ant-design/blob/c7e83d6142f0c5e72ef8fe794620478e69a50a8e/site/components.js)
|
||||
- 对外第一个版本,提供常用45个[组件](https://github.com/vueComponent/ant-design-vue/blob/c7e83d6142f0c5e72ef8fe794620478e69a50a8e/site/components.js)
|
||||
|
||||
|
2
LICENSE
2
LICENSE
@ -1,7 +1,7 @@
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017-present vue-antd-ui
|
||||
Copyright (c) 2017-present ant-design-vue
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
@ -1,30 +1,30 @@
|
||||
<p align="center">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">
|
||||
<img width="230" src="https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png">
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">
|
||||
<img width="230" src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/logo.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# [Ant Design Vue](https://vuecomponent.github.io/ant-design/)
|
||||
# [Ant Design Vue](https://vuecomponent.github.io/ant-design-vue/)
|
||||
|
||||
[![Travis branch](https://img.shields.io/travis/vueComponent/ant-design.svg?style=flat-square)](https://travis-ci.org/vueComponent/ant-design)
|
||||
[![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design)
|
||||
[![bitHound Dependencies](https://www.bithound.io/github/vueComponent/ant-design/badges/dependencies.svg)](https://www.bithound.io/github/vueComponent/ant-design/master/dependencies/npm)
|
||||
[![bitHound Dev Dependencies](https://www.bithound.io/github/vueComponent/ant-design/badges/devDependencies.svg)](https://www.bithound.io/github/vueComponent/ant-design/master/dependencies/npm)
|
||||
[![npm package](https://img.shields.io/npm/v/vue-antd-ui.svg?style=flat-square)](https://www.npmjs.org/package/vue-antd-ui)
|
||||
[![NPM downloads](http://img.shields.io/npm/dm/vue-antd-ui.svg?style=flat-square)](http://www.npmtrends.com/vue-antd-ui)
|
||||
[![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design)
|
||||
[![bitHound Dependencies](https://www.bithound.io/github/vueComponent/ant-design-vue/badges/dependencies.svg)](https://www.bithound.io/github/vueComponent/ant-design-vue/master/dependencies/npm)
|
||||
[![bitHound Dev Dependencies](https://www.bithound.io/github/vueComponent/ant-design-vue/badges/devDependencies.svg)](https://www.bithound.io/github/vueComponent/ant-design-vue/master/dependencies/npm)
|
||||
[![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](https://img.shields.io/gitter/room/vueComponent/ant-design.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(中文)
|
||||
|
||||
|
||||
Ant Design 3.X 的 Vue 实现,开发和服务于企业级后台产品。
|
||||
|
||||
[官网国内镜像](http://tangjinzhou.gitee.io/ant-design/docs/vue/introduce-cn/)
|
||||
[官网国内镜像](http://tangjinzhou.gitee.io/ant-design-vue/docs/vue/introduce-cn/)
|
||||
|
||||
[README in English](README.md)
|
||||
|
||||
## 赞助
|
||||
|
||||
vue-antd-ui是一个开源的独立项目,为了项目能够更好的持续的发展,我们期望获得你的支持,你可以通过如下任何一种方式支持我们:
|
||||
ant-design-vue是一个开源的独立项目,为了项目能够更好的持续的发展,我们期望获得你的支持,你可以通过如下任何一种方式支持我们:
|
||||
|
||||
- [Patreon](https://www.patreon.com/tangjinzhou)
|
||||
- [opencollective](https://opencollective.com/ant-design-278)
|
||||
@ -45,11 +45,11 @@ vue-antd-ui是一个开源的独立项目,为了项目能够更好的持续的
|
||||
### 使用 npm 或 yarn 安装
|
||||
|
||||
```bash
|
||||
$ npm install vue-antd-ui --save
|
||||
$ npm install ant-design-vue --save
|
||||
```
|
||||
|
||||
```bash
|
||||
$ yarn add vue-antd-ui
|
||||
$ yarn add ant-design-vue
|
||||
```
|
||||
|
||||
如果你的网络环境不佳,推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
|
||||
@ -57,7 +57,7 @@ $ yarn add vue-antd-ui
|
||||
|
||||
## 链接
|
||||
|
||||
- [首页](https://vuecomponent.github.io/ant-design/)
|
||||
- [首页](https://vuecomponent.github.io/ant-design-vue/)
|
||||
- [Vue官方文档](https://cn.vuejs.org/)
|
||||
- [Antd React](http://ant.design/)
|
||||
|
||||
|
26
README.md
26
README.md
@ -1,23 +1,23 @@
|
||||
<p align="center">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">
|
||||
<img width="230" src="https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png">
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">
|
||||
<img width="230" src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/logo.png">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
# [Ant Design Vue](https://vuecomponent.github.io/ant-design/)
|
||||
# [Ant Design Vue](https://vuecomponent.github.io/ant-design-vue/)
|
||||
|
||||
[![Travis branch](https://img.shields.io/travis/vueComponent/ant-design.svg?style=flat-square)](https://travis-ci.org/vueComponent/ant-design)
|
||||
[![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design)
|
||||
[![bitHound Dependencies](https://www.bithound.io/github/vueComponent/ant-design/badges/dependencies.svg)](https://www.bithound.io/github/vueComponent/ant-design/master/dependencies/npm)
|
||||
[![bitHound Dev Dependencies](https://www.bithound.io/github/vueComponent/ant-design/badges/devDependencies.svg)](https://www.bithound.io/github/vueComponent/ant-design/master/dependencies/npm)
|
||||
[![npm package](https://img.shields.io/npm/v/vue-antd-ui.svg?style=flat-square)](https://www.npmjs.org/package/vue-antd-ui)
|
||||
[![NPM downloads](http://img.shields.io/npm/dm/vue-antd-ui.svg?style=flat-square)](http://www.npmtrends.com/vue-antd-ui)
|
||||
[![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design)
|
||||
[![bitHound Dependencies](https://www.bithound.io/github/vueComponent/ant-design-vue/badges/dependencies.svg)](https://www.bithound.io/github/vueComponent/ant-design-vue/master/dependencies/npm)
|
||||
[![bitHound Dev Dependencies](https://www.bithound.io/github/vueComponent/ant-design-vue/badges/devDependencies.svg)](https://www.bithound.io/github/vueComponent/ant-design-vue/master/dependencies/npm)
|
||||
[![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](https://img.shields.io/gitter/room/vueComponent/ant-design.svg?style=flat-square)](https://gitter.im/vueComponent/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(中文)
|
||||
|
||||
An enterprise-class UI components based on Ant Design 3.X and Vue.
|
||||
|
||||
[官网国内镜像](http://tangjinzhou.gitee.io/ant-design/docs/vue/introduce-cn/)
|
||||
[官网国内镜像](http://tangjinzhou.gitee.io/ant-design-vue/docs/vue/introduce-cn/)
|
||||
|
||||
[中文 README](README-zh_CN.md)
|
||||
|
||||
@ -29,7 +29,7 @@ An enterprise-class UI components based on Ant Design 3.X and Vue.
|
||||
|
||||
## Donation
|
||||
|
||||
vue-antd-ui is an open source independent project. In order to achieve better and sustainable development of the project, we hope to get your support. You can support us in any of the following ways:
|
||||
ant-design-vue is an open source independent project. In order to achieve better and sustainable development of the project, we hope to get your support. You can support us in any of the following ways:
|
||||
|
||||
- [Patreon](https://www.patreon.com/tangjinzhou)
|
||||
- [opencollective](https://opencollective.com/ant-design-278)
|
||||
@ -44,11 +44,11 @@ vue-antd-ui is an open source independent project. In order to achieve better an
|
||||
**We recommend using npm or yarn to install**,it not only makes development easier,but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
|
||||
```bash
|
||||
$ npm install vue-antd-ui --save
|
||||
$ npm install ant-design-vue --save
|
||||
```
|
||||
|
||||
```bash
|
||||
$ yarn add vue-antd-ui
|
||||
$ 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).
|
||||
@ -56,7 +56,7 @@ If you are in a bad network environment,you can try other registries and tools
|
||||
|
||||
## Links
|
||||
|
||||
- [Home page](https://vuecomponent.github.io/ant-design/)
|
||||
- [Home page](https://vuecomponent.github.io/ant-design-vue/)
|
||||
- [Vue](https://vuejs.org/)
|
||||
- [Ant Design React](http://ant.design/)
|
||||
|
||||
|
@ -18,18 +18,15 @@ module.exports = function (modules) {
|
||||
},
|
||||
]
|
||||
|
||||
// if (distFileBaseName !== 'antd') {
|
||||
// pluginImportOptions.push({
|
||||
// style: 'css',
|
||||
// libraryDirectory: 'components',
|
||||
// libraryName: 'antd',
|
||||
// })
|
||||
// }
|
||||
// if (distFileBaseName !== 'antd') { pluginImportOptions.push({ style:
|
||||
// 'css', libraryDirectory: 'components', libraryName: 'antd', }) }
|
||||
|
||||
babelConfig.plugins.push([
|
||||
require.resolve('babel-plugin-import'),
|
||||
pluginImportOptions,
|
||||
])
|
||||
babelConfig
|
||||
.plugins
|
||||
.push([
|
||||
require.resolve('babel-plugin-import'),
|
||||
pluginImportOptions,
|
||||
])
|
||||
|
||||
const config = {
|
||||
devtool: 'source-map',
|
||||
@ -40,8 +37,12 @@ module.exports = function (modules) {
|
||||
},
|
||||
|
||||
resolve: {
|
||||
modules: ['node_modules', path.join(__dirname, '../node_modules')],
|
||||
extensions: ['.js', '.jsx', '.vue', '.md', '.json'],
|
||||
modules: [
|
||||
'node_modules', path.join(__dirname, '../node_modules'),
|
||||
],
|
||||
extensions: [
|
||||
'.js', '.jsx', '.vue', '.md', '.json',
|
||||
],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js',
|
||||
'@': process.cwd(),
|
||||
@ -73,26 +74,24 @@ module.exports = function (modules) {
|
||||
options: {
|
||||
loaders: {
|
||||
js: [
|
||||
{ loader: 'babel-loader',
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['env'],
|
||||
plugins: [
|
||||
'transform-vue-jsx',
|
||||
'transform-object-rest-spread',
|
||||
],
|
||||
}},
|
||||
plugins: ['transform-vue-jsx', 'transform-object-rest-spread'],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
}, {
|
||||
test: /\.(js|jsx)$/,
|
||||
loader: 'babel-loader', exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
options: babelConfig,
|
||||
},
|
||||
{
|
||||
}, {
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
@ -101,19 +100,13 @@ module.exports = function (modules) {
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
}, {
|
||||
loader: 'postcss-loader',
|
||||
options: Object.assign(
|
||||
{},
|
||||
postcssConfig,
|
||||
{ sourceMap: true }
|
||||
),
|
||||
options: Object.assign({}, postcssConfig, { sourceMap: true }),
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
{
|
||||
}, {
|
||||
test: /\.less$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
@ -122,16 +115,10 @@ module.exports = function (modules) {
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
}, {
|
||||
loader: 'postcss-loader',
|
||||
options: Object.assign(
|
||||
{},
|
||||
postcssConfig,
|
||||
{ sourceMap: true }
|
||||
),
|
||||
},
|
||||
{
|
||||
options: Object.assign({}, postcssConfig, { sourceMap: true }),
|
||||
}, {
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
@ -144,16 +131,12 @@ module.exports = function (modules) {
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new ExtractTextPlugin({
|
||||
filename: '[name].css',
|
||||
disable: false,
|
||||
allChunks: true,
|
||||
}),
|
||||
new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true }),
|
||||
new CaseSensitivePathsPlugin(),
|
||||
new webpack.BannerPlugin(`
|
||||
${distFileBaseName} v${pkg.version}
|
||||
|
||||
Copyright 2017-present, vue-antd-ui.
|
||||
Copyright 2017-present, ant-design-vue.
|
||||
All rights reserved.
|
||||
`),
|
||||
new webpack.ProgressPlugin((percentage, msg, addInfo) => {
|
||||
@ -187,32 +170,38 @@ All rights reserved.
|
||||
|
||||
const uncompressedConfig = deepAssign({}, config)
|
||||
|
||||
config.plugins = config.plugins.concat([
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
output: {
|
||||
ascii_only: true,
|
||||
},
|
||||
compress: {
|
||||
warnings: false,
|
||||
},
|
||||
}),
|
||||
new webpack.optimize.ModuleConcatenationPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
|
||||
}),
|
||||
])
|
||||
config.plugins = config
|
||||
.plugins
|
||||
.concat([
|
||||
new webpack
|
||||
.optimize
|
||||
.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
output: {
|
||||
ascii_only: true,
|
||||
},
|
||||
compress: {
|
||||
warnings: false,
|
||||
},
|
||||
}),
|
||||
new webpack
|
||||
.optimize
|
||||
.ModuleConcatenationPlugin(),
|
||||
new webpack.LoaderOptionsPlugin({ minimize: true }),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
|
||||
}),
|
||||
])
|
||||
|
||||
uncompressedConfig.entry = {
|
||||
[distFileBaseName]: entry,
|
||||
}
|
||||
|
||||
uncompressedConfig.plugins.push(new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('development'),
|
||||
}))
|
||||
uncompressedConfig
|
||||
.plugins
|
||||
.push(new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('development'),
|
||||
}))
|
||||
|
||||
return [config, uncompressedConfig]
|
||||
}
|
||||
|
@ -137,8 +137,8 @@ function tag () {
|
||||
execSync(`git config --global user.email ${process.env.GITHUB_USER_EMAIL}`)
|
||||
execSync(`git config --global user.name ${process.env.GITHUB_USER_NAME}`)
|
||||
execSync(`git tag ${version}`)
|
||||
execSync(`git push https://${process.env.GITHUB_TOKEN}@github.com/vueComponent/ant-design.git ${version}:${version}`)
|
||||
execSync(`git push https://${process.env.GITHUB_TOKEN}@github.com/vueComponent/ant-design.git master:master`)
|
||||
execSync(`git push https://${process.env.GITHUB_TOKEN}@github.com/vueComponent/ant-design-vue.git ${version}:${version}`)
|
||||
execSync(`git push https://${process.env.GITHUB_TOKEN}@github.com/vueComponent/ant-design-vue.git master:master`)
|
||||
console.log('tagged')
|
||||
}
|
||||
|
||||
|
@ -10,7 +10,7 @@
|
||||
| autoFocus | get focus when component mounted | boolean | false |
|
||||
| backfill | backfill selected item the input when using keyboard | boolean | false |
|
||||
| slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |
|
||||
| dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | |
|
||||
| dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
|
||||
| defaultValue | Initial selected option. | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes }> | - |
|
||||
| disabled | Whether disabled select | boolean | false |
|
||||
|
@ -10,7 +10,7 @@
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |
|
||||
| slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |
|
||||
| dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | |
|
||||
| dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
|
||||
| defaultValue | 指定默认选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array<{ key: string, label: string\|vNodes}> | 无 |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
|
@ -27,7 +27,7 @@ customize the progress dot by setting a scoped slot
|
||||
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - |
|
||||
| fullscreen | Whether to display in full-screen | boolean | `true` |
|
||||
| locale | The calendar's locale | object | [default]
|
||||
(https://github.com/vueComponent/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
(https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json) |
|
||||
| mode | The display mode of the calendar | `month` \| `year` | `month` |
|
||||
| monthCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will be appended to the cell | function(date: moment) | - |
|
||||
| monthFullCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will override the cell | function(date: moment) | - |
|
||||
|
@ -25,7 +25,7 @@
|
||||
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
|
||||
| fullscreen | 是否全屏显示 | boolean | true |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json) |
|
||||
| mode | 初始模式,`month/year` | string | month |
|
||||
| monthCellRender | 作用域插槽,自定义渲染月单元格,返回内容会被追加到单元格 | function(date: moment) | 无 |
|
||||
| monthFullCellRender | 作用域插槽,自定义渲染月单元格,返回内容覆盖单元格 | function(date: moment) | 无 |
|
||||
|
@ -279,63 +279,63 @@ exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
|
||||
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
|
||||
<div>
|
||||
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -345,22 +345,22 @@ exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
|
||||
<ul class="slick-dots slick-thumb" style="display: block;">
|
||||
<li class="slick-active">
|
||||
<a class="">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg">
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a class="">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||
<img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -20,7 +20,7 @@ Custom paging display
|
||||
</a-carousel>
|
||||
</template>
|
||||
<script>
|
||||
const baseUrl = 'https://raw.githubusercontent.com/vueComponent/ant-design/master/components/vc-slick/assets/img/react-slick/'
|
||||
const baseUrl = 'https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
@ -18,4 +18,4 @@
|
||||
| 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/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>)
|
||||
|
@ -18,4 +18,4 @@
|
||||
| next() | 切换到下一面板 |
|
||||
| prev() | 切换到上一面板 |
|
||||
|
||||
更多参数可参考:[vc-slick props](<https://github.com/vueComponent/ant-design/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>)
|
||||
|
@ -31,7 +31,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| disabled | determine whether the DatePicker is disabled | boolean | false |
|
||||
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
|
||||
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
|
||||
| locale | localization configuration | object | [default](https://github.com/vueComponent/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| locale | localization configuration | object | [default](https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json) |
|
||||
| open | open state of picker | boolean | - |
|
||||
| placeholder | placeholder of date input | string\|RangePicker\[] | - |
|
||||
| popupStyle | to customize the style of the popup calendar | object | {} |
|
||||
@ -58,7 +58,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| disabledTime | to specify the time that cannot be selected | function(date) | - |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
|
||||
| renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/ant-design/components/time-picker/#API) |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker/#API) |
|
||||
| showTime.defaultValue | to set default time of selected date | [moment](http://momentjs.com/) | moment() |
|
||||
| showToday | whether to show "Today" button | boolean | true |
|
||||
| value(v-model) | to set date | [moment](http://momentjs.com/) | - |
|
||||
@ -107,7 +107,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
|
||||
| ranges | preseted ranges for quick selection | { \[range: string\]: [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]: [moment](http://momentjs.com/)\[] } | - |
|
||||
| renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/ant-design/components/time-picker/#API) |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker/#API) |
|
||||
| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
|
||||
| value(v-model) | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
|
||||
|
||||
|
@ -31,7 +31,7 @@
|
||||
| disabled | 禁用 | boolean | false |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
|
||||
| getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json) |
|
||||
| open | 控制弹层是否展开 | boolean | - |
|
||||
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - |
|
||||
| popupStyle | 额外的弹出日历样式 | object | {} |
|
||||
@ -59,7 +59,7 @@
|
||||
| disabledTime | 不可选择的时间 | function(date) | 无 |
|
||||
| format | 展示的日期格式,配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/ant-design/components/time-picker-cn/#API) |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker-cn/#API) |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/) | moment() |
|
||||
| showToday | 是否展示“今天”按钮 | boolean | true |
|
||||
| value(v-model) | 日期 | [moment](http://momentjs.com/) | 无 |
|
||||
@ -110,7 +110,7 @@
|
||||
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
|
||||
| ranges | 预设时间范围快捷选择 | { \[range: string\]: [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]: [moment](http://momentjs.com/)\[] } | 无 |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/ant-design/components/time-picker-cn/#API) |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker-cn/#API) |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
|
||||
| value(v-model) | 日期 | [moment](http://momentjs.com/)\[] | 无 |
|
||||
|
||||
|
@ -6,7 +6,7 @@
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| disabled | whether the dropdown menu is disabled | boolean | - |
|
||||
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
|
||||
| overlay(slot) | the dropdown menu | [Menu](/ant-design/components/menu) | - |
|
||||
| overlay(slot) | the dropdown menu | [Menu](/ant-design-vue/components/menu) | - |
|
||||
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||
| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
|
||||
| visible(v-model) | whether the dropdown menu is visible | boolean | - |
|
||||
@ -16,7 +16,7 @@
|
||||
| --- | --- | --- |
|
||||
| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | function(visible) |
|
||||
|
||||
You should use [Menu](/ant-design/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
|
||||
You should use [Menu](/ant-design-vue/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
|
||||
|
||||
> Warning: You must set a unique `key` for `Menu.Item`.
|
||||
>
|
||||
@ -27,11 +27,11 @@ You should use [Menu](/ant-design/components/menu/) as `overlay`. The menu items
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| disabled | whether the dropdown menu is disabled | boolean | - |
|
||||
| overlay(slot) | the dropdown menu | [Menu](/ant-design/components/menu) | - |
|
||||
| overlay(slot) | the dropdown menu | [Menu](/ant-design-vue/components/menu) | - |
|
||||
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||
| size | size of the button, the same as [Button](/ant-design/components/button) | string | `default` |
|
||||
| size | size of the button, the same as [Button](/ant-design-vue/components/button) | string | `default` |
|
||||
| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
|
||||
| type | type of the button, the same as [Button](/ant-design/components/button) | string | `default` |
|
||||
| type | type of the button, the same as [Button](/ant-design-vue/components/button) | string | `default` |
|
||||
| visible | whether the dropdown menu is visible | boolean | - |
|
||||
|
||||
|
||||
@ -39,5 +39,5 @@ You should use [Menu](/ant-design/components/menu/) as `overlay`. The menu items
|
||||
### Dropdown.Button events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| click | a callback function, the same as [Button](/ant-design/components/button), which will be executed when you click the button on the left | Function |
|
||||
| click | a callback function, the same as [Button](/ant-design-vue/components/button), which will be executed when you click the button on the left | Function |
|
||||
| visibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function |
|
||||
|
@ -6,12 +6,12 @@
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | 菜单是否禁用 | boolean | - |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 | Function(triggerNode) | `() => document.body` |
|
||||
| overlay(slot) | 菜单 | [Menu](/ant-design/components/menu-cn) | - |
|
||||
| overlay(slot) | 菜单 | [Menu](/ant-design-vue/components/menu-cn) | - |
|
||||
| placement | 菜单弹出位置:`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
|
||||
| visible(v-model) | 菜单是否显示 | boolean | - |
|
||||
|
||||
`overlay` 菜单使用 [Menu](/ant-design/components/menu-cn/),还包括菜单项 `Menu.Item`,分割线 `Menu.Divider`。
|
||||
`overlay` 菜单使用 [Menu](/ant-design-vue/components/menu-cn/),还包括菜单项 `Menu.Item`,分割线 `Menu.Divider`。
|
||||
|
||||
> 注意: Menu.Item 必须设置唯一的 key 属性。
|
||||
>
|
||||
@ -28,15 +28,15 @@
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | 菜单是否禁用 | boolean | - |
|
||||
| overlay(slot) | 菜单 | [Menu](/ant-design/components/menu-cn/) | - |
|
||||
| overlay(slot) | 菜单 | [Menu](/ant-design-vue/components/menu-cn/) | - |
|
||||
| placement | 菜单弹出位置:`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
|
||||
| size | 按钮大小,和 [Button](/ant-design/components/button-cn/) 一致 | string | 'default' |
|
||||
| size | 按钮大小,和 [Button](/ant-design-vue/components/button-cn/) 一致 | string | 'default' |
|
||||
| trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextmenu`> | `['hover']` |
|
||||
| type | 按钮类型,和 [Button](/ant-design/components/button-cn/) 一致 | string | 'default' |
|
||||
| type | 按钮类型,和 [Button](/ant-design-vue/components/button-cn/) 一致 | string | 'default' |
|
||||
| visible(v-model) | 菜单是否显示 | boolean | - |
|
||||
|
||||
### Dropdown.Button事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击左侧按钮的回调,和 [Button](/ant-design/components/button-cn/) 一致 | Function |
|
||||
| click | 点击左侧按钮的回调,和 [Button](/ant-design-vue/components/button-cn/) 一致 | Function |
|
||||
| visibleChange | 菜单显示状态改变时调用,参数为 visible | function(visible) |
|
||||
|
@ -12,8 +12,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { setTimeout } from 'timers'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
const AdvancedSearchForm = {
|
||||
data () {
|
||||
|
@ -1,22 +1,22 @@
|
||||
<cn>
|
||||
#### 自定义表单控件
|
||||
自定义或第三方的表单控件,也可以与 Form 组件一起使用。只要该组件遵循以下的约定:
|
||||
> * 提供受控属性 `value` 或其它与 [`valuePropName`](/ant-design/components/form-cn/#getFieldDecorator(id,-options)-参数) 的值同名的属性。
|
||||
> * 提供 `onChange` 事件或 [`trigger`](/ant-design/components/form-cn/#getFieldDecorator(id,-options)-参数) 的值同名的事件。
|
||||
> * 提供受控属性 `value` 或其它与 [`valuePropName`](/ant-design-vue/components/form-cn/#getFieldDecorator(id,-options)-参数) 的值同名的属性。
|
||||
> * 提供 `onChange` 事件或 [`trigger`](/ant-design-vue/components/form-cn/#getFieldDecorator(id,-options)-参数) 的值同名的事件。
|
||||
> * 不能是函数式组件。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Customized Form Controls
|
||||
Customized or third-party form controls can be used in Form, too. Controls must follow these conventions:
|
||||
> * It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](/ant-design/components/form/#getFieldDecorator(id,-options)-parameters).
|
||||
> * It has event `onChange` or an event which name is equal to the value of [`trigger`](/ant-design/components/form/#getFieldDecorator(id,-options)-parameters).
|
||||
> * It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](/ant-design-vue/components/form/#getFieldDecorator(id,-options)-parameters).
|
||||
> * It has event `onChange` or an event which name is equal to the value of [`trigger`](/ant-design-vue/components/form/#getFieldDecorator(id,-options)-parameters).
|
||||
> * It must be a class component.
|
||||
</us>
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
const hasProp = (instance, prop) => {
|
||||
const $options = instance.$options || {}
|
||||
|
@ -10,7 +10,7 @@ Add or remove form items dynamically.
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
let uuid = 0
|
||||
const DynamicFieldSet = {
|
||||
|
@ -10,7 +10,7 @@ When user visit a page with a list of items, and want to create a new item. The
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
const CollectionCreateForm = Form.create()(
|
||||
{
|
||||
|
@ -16,7 +16,7 @@ The properties passed by the upper component must be declared in the props of `F
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
const CustomizedForm = Form.create({
|
||||
props: ['username'], // must declare like vue `props` https://vuejs.org/v2/api/#props
|
||||
|
@ -10,7 +10,7 @@ Normal login form which can contain more elements.
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
const NormalLoginForm = {
|
||||
methods: {
|
||||
|
@ -10,7 +10,7 @@ Fill in this form to create a new account for you.
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
const residences = [{
|
||||
value: 'zhejiang',
|
||||
|
@ -10,7 +10,7 @@ the `value` of time-related components is `moment`. So, we need to pre-process t
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
const TimeRelatedForm = {
|
||||
methods: {
|
||||
|
@ -10,7 +10,7 @@ Demostration for validataion configuration for form controls which are not show
|
||||
|
||||
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
import { Form } from 'ant-design-vue'
|
||||
|
||||
const Demo = {
|
||||
methods: {
|
||||
|
@ -33,11 +33,11 @@ If you use the `template` syntax, you can use ʻautoFormCreate` to turn on autom
|
||||
|
||||
Related examples are as follows:
|
||||
|
||||
[coordinated-controls](/ant-design/components/form/#components-form-demo-coordinated-controls)
|
||||
[coordinated-controls](/ant-design-vue/components/form/#components-form-demo-coordinated-controls)
|
||||
|
||||
[dynamic-rules](/ant-design/components/form/#components-form-demo-dynamic-rules)
|
||||
[dynamic-rules](/ant-design-vue/components/form/#components-form-demo-dynamic-rules)
|
||||
|
||||
[horizontal-login-form](/ant-design/components/form/#components-form-demo-horizontal-login-form)
|
||||
[horizontal-login-form](/ant-design-vue/components/form/#components-form-demo-horizontal-login-form)
|
||||
|
||||
### Form.create(options)
|
||||
|
||||
@ -137,10 +137,10 @@ Note:
|
||||
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
|
||||
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot | |
|
||||
| label | Label text | string\|slot | |
|
||||
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/ant-design/components/grid/#Col) | |
|
||||
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/ant-design-vue/components/grid/#Col) | |
|
||||
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
|
||||
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | |
|
||||
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/ant-design/components/grid/#Col) | |
|
||||
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/ant-design-vue/components/grid/#Col) | |
|
||||
| fieldDecoratorId | Corresponds to the first parameter `id` of `getFieldDecorator(id, options)`. If you need to collect data, you need to set this field. | string | |
|
||||
| fieldDecoratorOptions | Corresponds to the second parameter `options` of `getFieldDecorator(id, options)`. | object | {} |
|
||||
|
||||
|
@ -33,11 +33,11 @@
|
||||
|
||||
相关示例如下:
|
||||
|
||||
[coordinated-controls](/ant-design/components/form-cn/#components-form-demo-coordinated-controls)
|
||||
[coordinated-controls](/ant-design-vue/components/form-cn/#components-form-demo-coordinated-controls)
|
||||
|
||||
[dynamic-rules](/ant-design/components/form-cn/#components-form-demo-dynamic-rules)
|
||||
[dynamic-rules](/ant-design-vue/components/form-cn/#components-form-demo-dynamic-rules)
|
||||
|
||||
[horizontal-login-form](/ant-design/components/form-cn/#components-form-demo-horizontal-login-form)
|
||||
[horizontal-login-form](/ant-design-vue/components/form-cn/#components-form-demo-horizontal-login-form)
|
||||
|
||||
### Form.create(options)
|
||||
|
||||
@ -136,10 +136,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
|
||||
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false |
|
||||
| help | 提示信息,如不设置,则会根据校验规则自动生成 | string\|slot | |
|
||||
| label | label 标签的文本 | string\|slot | |
|
||||
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/ant-design/components/grid-cn/#Col) | |
|
||||
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/ant-design-vue/components/grid-cn/#Col) | |
|
||||
| required | 是否必填,如不设置,则会根据校验规则自动生成 | boolean | false |
|
||||
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/ant-design/components/grid-cn/#Col) | |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/ant-design-vue/components/grid-cn/#Col) | |
|
||||
| fieldDecoratorId | 对应`getFieldDecorator(id, options)`的第一个参数`id`,如需收集数据需要设置该字段 | string | 无 |
|
||||
| fieldDecoratorOptions | 对应`getFieldDecorator(id, options)`的第二个参数`options` | object | {} |
|
||||
|
||||
|
@ -1,12 +1,12 @@
|
||||
|
||||
<cn>
|
||||
#### 输入时格式化展示
|
||||
结合 [Tooltip](/ant-design/components/tooltip-cn/) 组件,实现一个数值输入框,方便内容超长时的全量展现。
|
||||
结合 [Tooltip](/ant-design-vue/components/tooltip-cn/) 组件,实现一个数值输入框,方便内容超长时的全量展现。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Format Tooltip Input
|
||||
You can use the Input in conjunction with [Tooltip](/ant-design/components/tooltip/) component to create a Numeric Input, which can provide a good experience for extra-long content display.
|
||||
You can use the Input in conjunction with [Tooltip](/ant-design-vue/components/tooltip/) component to create a Numeric Input, which can provide a good experience for extra-long content display.
|
||||
</us>
|
||||
|
||||
```html
|
||||
|
@ -9,7 +9,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
|
||||
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-image ant-avatar-circle"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
|
||||
<div class="ant-list-item-meta-content">
|
||||
<h4 class="ant-list-item-meta-title">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">Ant Design Title 1</a>
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">Ant Design Title 1</a>
|
||||
</h4>
|
||||
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
|
||||
</div>
|
||||
@ -20,7 +20,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
|
||||
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-image ant-avatar-circle"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
|
||||
<div class="ant-list-item-meta-content">
|
||||
<h4 class="ant-list-item-meta-title">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">Ant Design Title 2</a>
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">Ant Design Title 2</a>
|
||||
</h4>
|
||||
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
|
||||
</div>
|
||||
@ -31,7 +31,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
|
||||
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-image ant-avatar-circle"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
|
||||
<div class="ant-list-item-meta-content">
|
||||
<h4 class="ant-list-item-meta-title">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">Ant Design Title 3</a>
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">Ant Design Title 3</a>
|
||||
</h4>
|
||||
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
|
||||
</div>
|
||||
@ -42,7 +42,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
|
||||
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-image ant-avatar-circle"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
|
||||
<div class="ant-list-item-meta-content">
|
||||
<h4 class="ant-list-item-meta-title">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">Ant Design Title 4</a>
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">Ant Design Title 4</a>
|
||||
</h4>
|
||||
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team</div>
|
||||
</div>
|
||||
@ -360,7 +360,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-image ant-avatar-circle"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
|
||||
<div class="ant-list-item-meta-content">
|
||||
<h4 class="ant-list-item-meta-title">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">ant design part 0</a>
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">ant design part 0</a>
|
||||
</h4>
|
||||
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>
|
||||
</div>
|
||||
@ -392,7 +392,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-image ant-avatar-circle"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
|
||||
<div class="ant-list-item-meta-content">
|
||||
<h4 class="ant-list-item-meta-title">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">ant design part 1</a>
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">ant design part 1</a>
|
||||
</h4>
|
||||
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>
|
||||
</div>
|
||||
@ -424,7 +424,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
<div class="ant-list-item-meta-avatar"><span class="ant-avatar ant-avatar-image ant-avatar-circle"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span></div>
|
||||
<div class="ant-list-item-meta-content">
|
||||
<h4 class="ant-list-item-meta-title">
|
||||
<a href="https://vuecomponent.github.io/ant-design/">ant design part 2</a>
|
||||
<a href="https://vuecomponent.github.io/ant-design-vue/">ant design part 2</a>
|
||||
</h4>
|
||||
<div class="ant-list-item-meta-description">Ant Design, a design language for background applications, is refined by Ant UED Team.</div>
|
||||
</div>
|
||||
|
@ -18,7 +18,7 @@ Basic list.
|
||||
<a-list-item-meta
|
||||
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
||||
>
|
||||
<a slot="title" href="https://vuecomponent.github.io/ant-design/">{{item.title}}</a>
|
||||
<a slot="title" href="https://vuecomponent.github.io/ant-design-vue/">{{item.title}}</a>
|
||||
<a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
|
@ -26,7 +26,7 @@ Load more list with `loadMore` property.
|
||||
<a-list-item-meta
|
||||
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
|
||||
>
|
||||
<a slot="title" href="https://vuecomponent.github.io/ant-design/">{{item.name.last}}</a>
|
||||
<a slot="title" href="https://vuecomponent.github.io/ant-design-vue/">{{item.name.last}}</a>
|
||||
<a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
</a-list-item-meta>
|
||||
<div>content</div>
|
||||
|
@ -1,11 +1,11 @@
|
||||
<cn>
|
||||
#### 响应式的栅格列表
|
||||
响应式的栅格列表。尺寸与 [Layout Grid](https://vuecomponent.github.io/ant-design/components/grid-cn/#Col) 保持一致。
|
||||
响应式的栅格列表。尺寸与 [Layout Grid](https://vuecomponent.github.io/ant-design-vue/components/grid-cn/#Col) 保持一致。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Responsive grid list
|
||||
Responsive grid list. The size property is as same as [Layout Grid](https://vuecomponent.github.io/ant-design/components/grid/#Col).
|
||||
Responsive grid list. The size property is as same as [Layout Grid](https://vuecomponent.github.io/ant-design-vue/components/grid/#Col).
|
||||
</us>
|
||||
|
||||
```html
|
||||
|
@ -38,7 +38,7 @@ Setting `itemLayout` property with `vertical` to create a vertical list.
|
||||
const listData = []
|
||||
for (let i = 0; i < 23; i++) {
|
||||
listData.push({
|
||||
href: 'https://vuecomponent.github.io/ant-design/',
|
||||
href: 'https://vuecomponent.github.io/ant-design-vue/',
|
||||
title: `ant design part ${i}`,
|
||||
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
|
||||
description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
|
||||
|
@ -10,9 +10,9 @@
|
||||
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - |
|
||||
| header | List header renderer | string\|slot | - |
|
||||
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |
|
||||
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://vuecomponent.github.io/ant-design/components/spin/#API) | false |
|
||||
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://vuecomponent.github.io/ant-design-vue/components/spin/#API) | false |
|
||||
| loadMore | Shows a load more content | string\|slot | - |
|
||||
| pagination | Pagination [config](https://vuecomponent.github.io/ant-design/components/pagination/#API), hide it by setting it to false | boolean \| object | false |
|
||||
| pagination | Pagination [config](https://vuecomponent.github.io/ant-design-vue/components/pagination/#API), hide it by setting it to false | boolean \| object | false |
|
||||
| split | Toggles rendering of the split under the list item | boolean | true |
|
||||
| renderItem | Custom item renderer, slot="renderItem" and slot-scope="item, index" | (item, index) => vNode | | - |
|
||||
|
||||
|
@ -10,9 +10,9 @@
|
||||
| grid | 列表栅格配置 | object | - |
|
||||
| header | 列表头部 | string\|slot | - |
|
||||
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |
|
||||
| loading | 当卡片内容还在加载中时,可以用 `loading` 展示一个占位 | boolean\|[object](https://vuecomponent.github.io/ant-design/components/spin-cn/#API) | false |
|
||||
| loading | 当卡片内容还在加载中时,可以用 `loading` 展示一个占位 | boolean\|[object](https://vuecomponent.github.io/ant-design-vue/components/spin-cn/#API) | false |
|
||||
| loadMore | 加载更多 | string\|slot | - |
|
||||
| pagination | 对应的 `pagination` [配置]((https://vuecomponent.github.io/ant-design/components/pagination-cn/#API)), 设置 `false` 不显示 | boolean\|object | false |
|
||||
| pagination | 对应的 `pagination` [配置]((https://vuecomponent.github.io/ant-design-vue/components/pagination-cn/#API)), 设置 `false` 不显示 | boolean\|object | false |
|
||||
| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` |
|
||||
| split | 是否展示分割线 | boolean | true |
|
||||
| renderItem | 自定义`Item`函数,也可使用slot="renderItem" 和 slot-scope="item, index" | (item, index) => vNode | | - |
|
||||
|
@ -59,9 +59,9 @@ Components which need localization support are listed here, you can toggle the l
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// you should use import zhCN from 'vue-antd-ui/lib/locale-provider/zh_CN'
|
||||
import zhCN from 'vue-antd-ui/locale-provider/zh_CN';
|
||||
import { Modal } from 'vue-antd-ui';
|
||||
// you should use import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
|
||||
import zhCN from 'ant-design-vue/locale-provider/zh_CN';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/zh-cn';
|
||||
moment.locale('en');
|
||||
|
@ -15,8 +15,8 @@ Wrap your app with `LocaleProvider`, and apply the corresponding language packag
|
||||
</a-locale-provider>
|
||||
</template>
|
||||
<script>
|
||||
// you should use import enUS from 'vue-antd-ui/lib/locale-provider/en_US';
|
||||
import enUS from 'vue-antd-ui/locale-provider/en_US';
|
||||
// you should use import enUS from 'ant-design-vue/lib/locale-provider/en_US';
|
||||
import enUS from 'ant-design-vue/locale-provider/en_US';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
|
@ -14,7 +14,7 @@
|
||||
</a-locale-provider>
|
||||
</template>
|
||||
<script>
|
||||
import fr_FR from 'vue-antd-ui/lib/locale-provider/fr_FR';
|
||||
import fr_FR from 'ant-design-vue/lib/locale-provider/fr_FR';
|
||||
import 'moment/locale/zh-cn';
|
||||
export default {
|
||||
data() {
|
||||
@ -26,7 +26,7 @@ export default {
|
||||
</script>
|
||||
````
|
||||
|
||||
We provide some locale like English, Chinese, Russian, German, French and etc, all locale packages can be found in [here](https://github.com/vueComponent/ant-design/tree/master/components/locale-provider).
|
||||
We provide some locale like English, Chinese, Russian, German, French and etc, all locale packages can be found in [here](https://github.com/vueComponent/ant-design-vue/tree/master/components/locale-provider).
|
||||
|
||||
Note: if you need to use antd's UMD dist file, please use `antd/dist/antd-with-locales.js` and corresponding moment locale:
|
||||
|
||||
@ -43,7 +43,7 @@ const { LocaleProvider, locales } = window.antd;
|
||||
|
||||
### Add a new language
|
||||
|
||||
If you can't find your language, you are welcome to create a locale package based on [en_US](https://github.com/vueComponent/ant-design/blob/master/components/locale-provider/en_US.js) and send us a pull request.
|
||||
If you can't find your language, you are welcome to create a locale package based on [en_US](https://github.com/vueComponent/ant-design-vue/blob/master/components/locale-provider/en_US.js) and send us a pull request.
|
||||
|
||||
### Other localization needs
|
||||
|
||||
|
@ -13,7 +13,7 @@ LocaleProvider 使用 Vue 的 [provide/inject](https://cn.vuejs.org/v2/api/#prov
|
||||
</a-locale-provider>
|
||||
</template>
|
||||
<script>
|
||||
import zh_CN from 'vue-antd-ui/lib/locale-provider/zh_CN';
|
||||
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
|
||||
import 'moment/locale/zh-cn';
|
||||
export default {
|
||||
data() {
|
||||
@ -25,7 +25,7 @@ export default {
|
||||
</script>
|
||||
````
|
||||
|
||||
我们提供了英语,中文,俄语,法语,德语等多种语言支持,所有语言包可以在 [这里](https://github.com/vueComponent/ant-design/tree/master/components/locale-provider) 找到。
|
||||
我们提供了英语,中文,俄语,法语,德语等多种语言支持,所有语言包可以在 [这里](https://github.com/vueComponent/ant-design-vue/tree/master/components/locale-provider) 找到。
|
||||
|
||||
注意:如果你需要使用 UMD 版的 dist 文件,应该引入 `antd/dist/antd-with-locales.js`,同时引入 moment 对应的 locale,然后按以下方式使用:
|
||||
|
||||
@ -42,7 +42,7 @@ const { LocaleProvider, locales } = window.antd;
|
||||
|
||||
### 增加语言包
|
||||
|
||||
如果你找不到你需要的语言包,欢迎你在 [英文语言包](https://github.com/vueComponent/ant-design/blob/master/components/locale-provider/en_US.js) 的基础上创建一个新的语言包,并给我们 Pull Request。
|
||||
如果你找不到你需要的语言包,欢迎你在 [英文语言包](https://github.com/vueComponent/ant-design-vue/blob/master/components/locale-provider/en_US.js) 的基础上创建一个新的语言包,并给我们 Pull Request。
|
||||
|
||||
### 其他国际化需求
|
||||
|
||||
|
@ -19,7 +19,7 @@ In the various types of information modal dialog, only one button to close dialo
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Modal } from 'vue-antd-ui'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
export default {
|
||||
methods: {
|
||||
info() {
|
||||
|
@ -28,7 +28,7 @@ Make it pop up under some conditions.
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { message } from 'vue-antd-ui'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
|
@ -106,7 +106,7 @@ There are 12 `placement` options available. Use `arrowPointAtCenter` if you want
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { message } from 'vue-antd-ui'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
|
@ -14,7 +14,7 @@
|
||||
| confirm | callback of confirmation | function(e) | - |
|
||||
| visibleChange | Callback executed when visibility of the tooltip card is changed | function(visible) | - |
|
||||
|
||||
Consult [Tooltip's documentation](/ant-design/components/tooltip/#API) to find more APIs.
|
||||
Consult [Tooltip's documentation](/ant-design-vue/components/tooltip/#API) to find more APIs.
|
||||
|
||||
## Note
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
||||
| confirm | 点击确认的回调 | function(e) |
|
||||
| visibleChange | 显示隐藏的回调 | function(visible) |
|
||||
|
||||
更多属性请参考 [Tooltip](/ant-design/components/tooltip-cn/#API)。
|
||||
更多属性请参考 [Tooltip](/ant-design-vue/components/tooltip-cn/#API)。
|
||||
|
||||
## 注意
|
||||
|
||||
|
@ -6,7 +6,7 @@
|
||||
| content | Content of the card | string\|slot\|vNode | - |
|
||||
| title | Title of the card | string\|slot\VNode | - |
|
||||
|
||||
Consult [Tooltip's documentation](/ant-design/components/tooltip/#API) to find more APIs.
|
||||
Consult [Tooltip's documentation](/ant-design-vue/components/tooltip/#API) to find more APIs.
|
||||
|
||||
## Note
|
||||
|
||||
|
@ -6,7 +6,7 @@
|
||||
| content | 卡片内容 | string\|slot\|VNode | 无 |
|
||||
| title | 卡片标题 | string\|slot\|VNode | 无 |
|
||||
|
||||
更多属性请参考 [Tooltip](/ant-design/components/tooltip-cn/#API)。
|
||||
更多属性请参考 [Tooltip](/ant-design-vue/components/tooltip-cn/#API)。
|
||||
|
||||
## 注意
|
||||
|
||||
|
@ -2,13 +2,13 @@
|
||||
<cn>
|
||||
#### 智能提示
|
||||
输入框自动完成功能,下面是一个账号注册表单的例子。
|
||||
推荐使用 [AutoComplete](/ant-design/components/auto-complete-cn/) 组件。
|
||||
推荐使用 [AutoComplete](/ant-design-vue/components/auto-complete-cn/) 组件。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Automatic completion
|
||||
Automatic completion of select input.
|
||||
Using the [AutoComplete](/ant-design/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable.
|
||||
Using the [AutoComplete](/ant-design-vue/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable.
|
||||
</us>
|
||||
|
||||
```html
|
||||
|
@ -2,13 +2,13 @@
|
||||
<cn>
|
||||
#### 联动
|
||||
省市联动是典型的例子。
|
||||
推荐使用 [Cascader](/ant-design/components/cascader-cn/) 组件。
|
||||
推荐使用 [Cascader](/ant-design-vue/components/cascader-cn/) 组件。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### coordinate
|
||||
Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated.
|
||||
Using the [Cascader](/ant-design/components/cascader) component is strongly recommended instead as it is more flexible and capable.
|
||||
Using the [Cascader](/ant-design-vue/components/cascader) component is strongly recommended instead as it is more flexible and capable.
|
||||
</us>
|
||||
|
||||
```html
|
||||
|
@ -1,11 +1,11 @@
|
||||
<cn>
|
||||
#### 带输入框的滑块
|
||||
和 [数字输入框](/ant-design/components/input-number-cn/) 组件保持同步。
|
||||
和 [数字输入框](/ant-design-vue/components/input-number-cn/) 组件保持同步。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Slider with InputNumber
|
||||
Synchronize with [InptNumber](/ant-design/components/input-number/) component.
|
||||
Synchronize with [InptNumber](/ant-design-vue/components/input-number/) component.
|
||||
</us>
|
||||
|
||||
```html
|
||||
|
@ -30,7 +30,7 @@ Table with editable cells.
|
||||
<script>
|
||||
import EditableCell from './EditableCell'
|
||||
/*
|
||||
* EditableCell Code https://github.com/vueComponent/ant-design/blob/master/components/table/demo/EditableCell.vue
|
||||
* EditableCell Code https://github.com/vueComponent/ant-design-vue/blob/master/components/table/demo/EditableCell.vue
|
||||
*/
|
||||
export default {
|
||||
components: {
|
||||
|
@ -46,9 +46,9 @@ const columns = [{
|
||||
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` |
|
||||
| footer | Table footer renderer | Function(currentPageData)\|slot-scope | |
|
||||
| indentSize | Indent size in pixels of tree data | number | 15 |
|
||||
| loading | Loading status of table | boolean\|[object](/ant-design/components/spin) | `false` |
|
||||
| loading | Loading status of table | boolean\|[object](/ant-design-vue/components/spin) | `false` |
|
||||
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' |
|
||||
| pagination | Pagination [config](#pagination) or [`Pagination`] (/ant-design/components/pagination/), hide it by setting it to `false` | object | |
|
||||
| pagination | Pagination [config](#pagination) or [`Pagination`] (/ant-design-vue/components/pagination/), hide it by setting it to `false` | object | |
|
||||
| rowClassName | Row's className | Function(record, index):string | - |
|
||||
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
|
||||
| rowSelection | Row selection [config](#rowSelection) | object | null |
|
||||
@ -143,7 +143,7 @@ Properties for pagination.
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' |
|
||||
|
||||
More about pagination, please check [`Pagination`](/ant-design/components/pagination/).
|
||||
More about pagination, please check [`Pagination`](/ant-design-vue/components/pagination/).
|
||||
|
||||
### rowSelection
|
||||
|
||||
|
@ -46,9 +46,9 @@ const columns = [{
|
||||
| expandRowByClick | 通过点击行来展开子行 | boolean | `false` |
|
||||
| footer | 表格尾部 | Function(currentPageData)\|slot-scope | |
|
||||
| indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 |
|
||||
| loading | 页面是否加载中 | boolean\|[object](/ant-design/components/spin-cn) | false |
|
||||
| loading | 页面是否加载中 | boolean\|[object](/ant-design-vue/components/spin-cn) | false |
|
||||
| locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' |
|
||||
| pagination | 分页器,参考[配置项](#pagination)或 [pagination](/ant-design/components/pagination-cn/),设为 false 时不展示和进行分页 | object | |
|
||||
| pagination | 分页器,参考[配置项](#pagination)或 [pagination](/ant-design-vue/components/pagination-cn/),设为 false 时不展示和进行分页 | object | |
|
||||
| rowClassName | 表格行的类名 | Function(record, index):string | - |
|
||||
| rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string\|Function(record):string | 'key' |
|
||||
| rowSelection | 列表项是否可选择,[配置项](#rowSelection) | object | null |
|
||||
@ -142,7 +142,7 @@ const columns = [{
|
||||
| --- | --- | --- | --- |
|
||||
| position | 指定分页显示的位置 | 'top' \| 'bottom' \| 'both' | 'bottom' |
|
||||
|
||||
更多配置项,请查看 [`Pagination`](/ant-design/components/pagination/)。
|
||||
更多配置项,请查看 [`Pagination`](/ant-design-vue/components/pagination/)。
|
||||
|
||||
### rowSelection
|
||||
|
||||
|
@ -23,7 +23,7 @@ Multiple and checkable.
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeSelect } from 'vue-antd-ui'
|
||||
import { TreeSelect } from 'ant-design-vue'
|
||||
const SHOW_PARENT = TreeSelect.SHOW_PARENT
|
||||
|
||||
const treeData = [{
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import Trigger from '../index'
|
||||
import '../assets/index.less'
|
||||
import { Input, Button } from 'vue-antd-ui'
|
||||
import { Input, Button } from 'ant-design-vue'
|
||||
function getPopupAlign (state) {
|
||||
return {
|
||||
offset: [state.offsetX, state.offsetY],
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
import BaseMixin from '../../_util/BaseMixin'
|
||||
import createDOMForm from '../src/createDOMForm'
|
||||
import { Modal } from 'vue-antd-ui'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import { regionStyle, errorStyle } from './styles'
|
||||
|
||||
const Form = {
|
||||
@ -12,9 +12,7 @@ const Form = {
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
}
|
||||
return { visible: false }
|
||||
},
|
||||
methods: {
|
||||
onSubmit (e) {
|
||||
@ -29,56 +27,53 @@ const Form = {
|
||||
},
|
||||
|
||||
onCancel () {
|
||||
this.setState({
|
||||
visible: false,
|
||||
})
|
||||
this.setState({ visible: false })
|
||||
},
|
||||
|
||||
open () {
|
||||
this.setState({
|
||||
visible: true,
|
||||
})
|
||||
this.setState({ visible: true })
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { getFieldProps, getFieldError } = this.form
|
||||
return (<div style={{ margin: '20px' }}>
|
||||
<h2>modal</h2>
|
||||
<Modal
|
||||
visible={this.visible}
|
||||
bodyStyle={{
|
||||
height: '200px',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
onCancel={this.onCancel}
|
||||
title='modal'
|
||||
>
|
||||
<div ref='dialogContent'>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<input
|
||||
{...getFieldProps('required', {
|
||||
rules: [{
|
||||
required: true,
|
||||
message: '必填',
|
||||
}],
|
||||
})}
|
||||
/>
|
||||
<div style={errorStyle}>
|
||||
{getFieldError('required') ? getFieldError('required').join(',')
|
||||
: <b style={{ visibility: 'hidden' }}>1</b>}
|
||||
</div>
|
||||
<div style={{ marginTop: '300px' }}>
|
||||
<button>submit</button>
|
||||
</div>
|
||||
</form>
|
||||
return (
|
||||
<div style={{
|
||||
margin: '20px',
|
||||
}}>
|
||||
<h2>modal</h2>
|
||||
<Modal
|
||||
visible={this.visible}
|
||||
bodyStyle={{
|
||||
height: '200px',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
onCancel={this.onCancel}
|
||||
title='modal'>
|
||||
<div ref='dialogContent'>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<input
|
||||
{...getFieldProps('required', { rules: [{ required: true, message: '必填' }] })}/>
|
||||
<div style={errorStyle}>
|
||||
{getFieldError('required')
|
||||
? getFieldError('required').join(',')
|
||||
: <b style={{
|
||||
visibility: 'hidden',
|
||||
}}>1</b>}
|
||||
</div>
|
||||
<div style={{
|
||||
marginTop: '300px',
|
||||
}}>
|
||||
<button>submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Modal>
|
||||
<div style={regionStyle}>
|
||||
<button onClick={this.open}>open</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<div style={ regionStyle }>
|
||||
<button onClick={this.open}>open</button>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default createDOMForm()(Form)
|
||||
|
@ -1,7 +1,7 @@
|
||||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
|
||||
import createDOMForm from '../src/createDOMForm'
|
||||
import { DatePicker, Select } from 'vue-antd-ui'
|
||||
import { DatePicker, Select } from 'ant-design-vue'
|
||||
import { regionStyle, errorStyle } from './styles'
|
||||
const { Option } = Select
|
||||
|
||||
@ -12,28 +12,23 @@ const Email = {
|
||||
render () {
|
||||
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
||||
const errors = getFieldError('email')
|
||||
return (<div style={ regionStyle }>
|
||||
<div>email sync validate</div>
|
||||
<div>
|
||||
<input {...getFieldProps('email', {
|
||||
initialValue: '',
|
||||
rules: [
|
||||
{
|
||||
type: 'email',
|
||||
message: <b key='err'>错误的 email 格式</b>,
|
||||
},
|
||||
],
|
||||
})}
|
||||
/></div>
|
||||
<div style={errorStyle}>
|
||||
{errors}
|
||||
return (
|
||||
<div style={regionStyle}>
|
||||
<div>email sync validate</div>
|
||||
<div>
|
||||
<input
|
||||
{...getFieldProps('email', { initialValue: '', rules: [{ type: 'email', message: <b key='err'>错误的 email 格式</b> }] })}/></div>
|
||||
<div style={errorStyle}>
|
||||
{errors}
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('email')
|
||||
? 'validating'
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('email') ? 'validating' : null}
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
const User = {
|
||||
@ -57,29 +52,28 @@ const User = {
|
||||
render () {
|
||||
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
||||
const errors = getFieldError('user')
|
||||
return (<div style={ regionStyle }>
|
||||
<div><span style={{ color: 'red' }}>*</span> user async validate</div>
|
||||
<div>
|
||||
<input {...getFieldProps('user', {
|
||||
initialValue: '',
|
||||
validateFirst: true,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
validator: this.userExists,
|
||||
},
|
||||
],
|
||||
})}
|
||||
/></div>
|
||||
<div style={errorStyle}>
|
||||
{(errors) ? errors.join(',') : null}
|
||||
return (
|
||||
<div style={regionStyle}>
|
||||
<div>
|
||||
<span style={{
|
||||
color: 'red',
|
||||
}}>*</span>
|
||||
user async validate</div>
|
||||
<div>
|
||||
<input
|
||||
{...getFieldProps('user', { initialValue: '', validateFirst: true, rules: [{ required: true }, { validator: this.userExists }] })}/></div>
|
||||
<div style={errorStyle}>
|
||||
{(errors)
|
||||
? errors.join(',')
|
||||
: null}
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('user')
|
||||
? 'validating'
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('user') ? 'validating' : null}
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
@ -90,31 +84,37 @@ const CustomInput = {
|
||||
render () {
|
||||
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
||||
const errors = getFieldError('select')
|
||||
return (<div style={ regionStyle }>
|
||||
<div><span style={{ color: 'red' }}>*</span> custom select sync validate</div>
|
||||
<div><Select
|
||||
placeholder='please select'
|
||||
style={{ width: '200px' }}
|
||||
{...getFieldProps('select', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
})}
|
||||
>
|
||||
<Option value='1'>1</Option>
|
||||
<Option value='2'>2</Option>
|
||||
</Select></div>
|
||||
<div style={errorStyle}>
|
||||
{(errors) ? errors.join(',') : null}
|
||||
return (
|
||||
<div style={regionStyle}>
|
||||
<div>
|
||||
<span style={{
|
||||
color: 'red',
|
||||
}}>*</span>
|
||||
custom select sync validate</div>
|
||||
<div>
|
||||
<Select
|
||||
placeholder='please select'
|
||||
style={{
|
||||
width: '200px',
|
||||
}}
|
||||
{...getFieldProps('select', { rules: [{ required: true }] })}>
|
||||
<Option value='1'>1</Option>
|
||||
<Option value='2'>2</Option>
|
||||
</Select>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors)
|
||||
? errors.join(',')
|
||||
: null}
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('select')
|
||||
? 'validating'
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('select') ? 'validating' : null}
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
const DateInput = {
|
||||
@ -124,25 +124,27 @@ const DateInput = {
|
||||
render () {
|
||||
const { getFieldProps, getFieldError } = this.form
|
||||
const errors = getFieldError('date')
|
||||
return (<div style={ regionStyle }>
|
||||
<div><span style={{ color: 'red' }}>*</span> DateInput sync validate</div>
|
||||
<div style={{ width: '200px' }}>
|
||||
<DatePicker
|
||||
placeholder='please select'
|
||||
{...getFieldProps('date', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
type: 'object',
|
||||
},
|
||||
],
|
||||
})}
|
||||
/>
|
||||
return (
|
||||
<div style={regionStyle}>
|
||||
<div>
|
||||
<span style={{
|
||||
color: 'red',
|
||||
}}>*</span>
|
||||
DateInput sync validate</div>
|
||||
<div style={{
|
||||
width: '200px',
|
||||
}}>
|
||||
<DatePicker
|
||||
placeholder='please select'
|
||||
{...getFieldProps('date', { rules: [{ required: true, type: 'object' }] })}/>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors)
|
||||
? errors.join(',')
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors) ? errors.join(',') : null}
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
@ -166,25 +168,21 @@ const NumberInput = {
|
||||
render () {
|
||||
const { getFieldProps, getFieldError } = this.form
|
||||
const errors = getFieldError('number')
|
||||
return (<div style={ regionStyle }>
|
||||
<div>number input</div>
|
||||
<div>
|
||||
<input
|
||||
{...getFieldProps('number', {
|
||||
initialValue: '1',
|
||||
rules: [{
|
||||
transform: toNumber,
|
||||
type: 'number',
|
||||
}],
|
||||
})}
|
||||
/>
|
||||
return (
|
||||
<div style={regionStyle}>
|
||||
<div>number input</div>
|
||||
<div>
|
||||
<input
|
||||
{...getFieldProps('number', { initialValue: '1', rules: [{ transform: toNumber, type: 'number' }] })}/>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors)
|
||||
? errors.join(',')
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors) ? errors.join(',') : null}
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
const Form = {
|
||||
@ -192,61 +190,69 @@ const Form = {
|
||||
onSubmit (e) {
|
||||
console.log('submit')
|
||||
e.preventDefault()
|
||||
this.form.validateFieldsAndScroll({ scroll: { offsetTop: 20 }}, (error, values) => {
|
||||
if (!error) {
|
||||
console.log('ok', values)
|
||||
} else {
|
||||
console.log('error', error, values)
|
||||
}
|
||||
})
|
||||
this
|
||||
.form
|
||||
.validateFieldsAndScroll({
|
||||
scroll: {
|
||||
offsetTop: 20,
|
||||
},
|
||||
}, (error, values) => {
|
||||
if (!error) {
|
||||
console.log('ok', values)
|
||||
} else {
|
||||
console.log('error', error, values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
reset (e) {
|
||||
e.preventDefault()
|
||||
this.form.resetFields()
|
||||
this
|
||||
.form
|
||||
.resetFields()
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { form } = this
|
||||
const { getFieldProps, getFieldError } = form
|
||||
return (<div style={{ margin: '20px' }}>
|
||||
<h2>overview</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<User form={ form } saveRef={this.saveRef}/>
|
||||
return (
|
||||
<div style={{
|
||||
margin: '20px',
|
||||
}}>
|
||||
<h2>overview</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<User form={form} saveRef={this.saveRef}/>
|
||||
|
||||
<NumberInput form={ form }/>
|
||||
<NumberInput form={form}/>
|
||||
|
||||
<Email form={ form }/>
|
||||
<Email form={form}/>
|
||||
|
||||
<CustomInput form={ form }/>
|
||||
<CustomInput form={form}/>
|
||||
|
||||
<DateInput form={ form }/>
|
||||
<DateInput form={form}/>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<div>normal required input</div>
|
||||
<div>
|
||||
<input
|
||||
{...getFieldProps('normal', {
|
||||
initialValue: '',
|
||||
rules: [{
|
||||
required: true,
|
||||
}],
|
||||
})}
|
||||
/>
|
||||
<div style={regionStyle}>
|
||||
<div>normal required input</div>
|
||||
<div>
|
||||
<input
|
||||
{...getFieldProps('normal', { initialValue: '', rules: [{ required: true }] })}/>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(getFieldError('normal'))
|
||||
? getFieldError('normal').join(',')
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(getFieldError('normal')) ? getFieldError('normal').join(',') : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<button onClick={this.reset}>reset</button>
|
||||
|
||||
<input type='submit' value='submit'/>
|
||||
</div>
|
||||
</form>
|
||||
</div>)
|
||||
<div style={regionStyle}>
|
||||
<button onClick={this.reset}>reset</button>
|
||||
|
||||
<input type='submit' value='submit'/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
import { createForm } from '../index'
|
||||
import { regionStyle } from './styles'
|
||||
import { Switch } from 'vue-antd-ui'
|
||||
import { Switch } from 'ant-design-vue'
|
||||
|
||||
const TopForm = {
|
||||
props: {
|
||||
@ -10,16 +10,16 @@ const TopForm = {
|
||||
},
|
||||
render () {
|
||||
const { getFieldProps } = this.form
|
||||
return (<div style={ regionStyle }>
|
||||
<div>has email? </div>
|
||||
<div>
|
||||
<Switch {...getFieldProps('on', {
|
||||
initialValue: true,
|
||||
valuePropName: 'checked',
|
||||
})}
|
||||
/>
|
||||
return (
|
||||
<div style={regionStyle}>
|
||||
<div>has email?
|
||||
</div>
|
||||
<div>
|
||||
<Switch
|
||||
{...getFieldProps('on', { initialValue: true, valuePropName: 'checked' })}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
@ -35,18 +35,14 @@ const BottomForm = {
|
||||
...regionStyle,
|
||||
display: on ? 'block' : 'none',
|
||||
}
|
||||
return (<div style={ style }>
|
||||
<div>email: </div>
|
||||
<div>
|
||||
<input {...form.getFieldProps('email', {
|
||||
rules: [{
|
||||
type: 'email',
|
||||
}],
|
||||
hidden: !on,
|
||||
})}
|
||||
/>
|
||||
return (
|
||||
<div style={style}>
|
||||
<div>email:</div>
|
||||
<div>
|
||||
<input {...form.getFieldProps('email', { rules: [{ type: 'email' }], hidden: !on })}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
@ -63,13 +59,15 @@ const Form = {
|
||||
|
||||
render () {
|
||||
const { form } = this
|
||||
return (<div>
|
||||
<TopForm form={ form }/>
|
||||
<BottomForm form={ form }/>
|
||||
<div style={ regionStyle }>
|
||||
<button onClick={this.onSubmit}>submit</button>
|
||||
return (
|
||||
<div>
|
||||
<TopForm form={form}/>
|
||||
<BottomForm form={form}/>
|
||||
<div style={regionStyle}>
|
||||
<button onClick={this.onSubmit}>submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
@ -77,9 +75,11 @@ const NewForm = createForm()(Form)
|
||||
|
||||
export default {
|
||||
render () {
|
||||
return (<div>
|
||||
<h2>parallel form</h2>
|
||||
<NewForm />
|
||||
</div>)
|
||||
return (
|
||||
<div>
|
||||
<h2>parallel form</h2>
|
||||
<NewForm/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
/* eslint no-console:0 */
|
||||
|
||||
import { DatePicker } from 'vue-antd-ui'
|
||||
import { DatePicker } from 'ant-design-vue'
|
||||
import createDOMForm from '../src/createDOMForm'
|
||||
import { regionStyle, errorStyle } from './styles'
|
||||
|
||||
@ -9,28 +9,30 @@ const Form = {
|
||||
form: Object,
|
||||
},
|
||||
methods: {
|
||||
onSubmit (e) {
|
||||
onSubmit (e) {
|
||||
console.log('submit')
|
||||
e.preventDefault()
|
||||
this.form.validateFieldsAndScroll((error, values) => {
|
||||
if (!error) {
|
||||
console.log('ok', values)
|
||||
} else {
|
||||
console.log('error', error, values)
|
||||
}
|
||||
})
|
||||
this
|
||||
.form
|
||||
.validateFieldsAndScroll((error, values) => {
|
||||
if (!error) {
|
||||
console.log('ok', values)
|
||||
} else {
|
||||
console.log('error', error, values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
reset (e) {
|
||||
e.preventDefault()
|
||||
this.form.resetFields()
|
||||
this
|
||||
.form
|
||||
.resetFields()
|
||||
},
|
||||
|
||||
checkStart (rule, value, callback) {
|
||||
const { validateFields } = this.form
|
||||
validateFields(['end'], {
|
||||
force: true,
|
||||
})
|
||||
validateFields(['end'], { force: true })
|
||||
callback()
|
||||
},
|
||||
|
||||
@ -51,40 +53,42 @@ const Form = {
|
||||
render () {
|
||||
const { form } = this
|
||||
const { getFieldProps, getFieldError } = form
|
||||
return (<div style={{ margin: 20 }}>
|
||||
<h2>startTime and endTime validation</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<div style={ regionStyle }>
|
||||
<div>start: </div>
|
||||
<div>
|
||||
<DatePicker {...getFieldProps('start', {
|
||||
rules: [this.checkStart],
|
||||
})}
|
||||
/>
|
||||
return (
|
||||
<div style={{
|
||||
margin: 20,
|
||||
}}>
|
||||
<h2>startTime and endTime validation</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<div style={regionStyle}>
|
||||
<div>start:
|
||||
</div>
|
||||
<div>
|
||||
<DatePicker {...getFieldProps('start', { rules: [this.checkStart] })}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<div>end: </div>
|
||||
<div>
|
||||
<DatePicker {...getFieldProps('end', {
|
||||
rules: [this.checkEnd],
|
||||
})}
|
||||
/>
|
||||
<div style={regionStyle}>
|
||||
<div>end:
|
||||
</div>
|
||||
<div>
|
||||
<DatePicker {...getFieldProps('end', { rules: [this.checkEnd] })}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={errorStyle}>
|
||||
{getFieldError('end') ? getFieldError('end').join(',') : ''}
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{getFieldError('end')
|
||||
? getFieldError('end').join(',')
|
||||
: ''}
|
||||
</div>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<button onClick={this.reset}>reset</button>
|
||||
|
||||
<input type='submit' value='submit'/>
|
||||
</div>
|
||||
</form>
|
||||
</div>)
|
||||
<div style={regionStyle}>
|
||||
<button onClick={this.reset}>reset</button>
|
||||
|
||||
<input type='submit' value='submit'/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
|
||||
import { createForm } from '../index'
|
||||
import { Select } from 'vue-antd-ui'
|
||||
import { Select } from 'ant-design-vue'
|
||||
import { regionStyle, errorStyle } from './styles'
|
||||
import { mergeProps } from '../../_util/props-util'
|
||||
const emailTpl = ['@gmail.com', '@outlook.com', '@qq.com']
|
||||
@ -11,9 +11,7 @@ const CustomInput = {
|
||||
form: Object,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [],
|
||||
}
|
||||
return { data: [] }
|
||||
},
|
||||
methods: {
|
||||
onChange (v) {
|
||||
@ -28,59 +26,39 @@ const CustomInput = {
|
||||
render () {
|
||||
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
||||
const errors = getFieldError('select')
|
||||
return (<div style={ regionStyle }>
|
||||
<div>custom select sync validate</div>
|
||||
<div>
|
||||
<Select
|
||||
{
|
||||
...mergeProps(
|
||||
{
|
||||
props: {
|
||||
placeholder: 'please select',
|
||||
mode: 'combobox',
|
||||
filterOption: false,
|
||||
},
|
||||
style: {
|
||||
width: '200px',
|
||||
},
|
||||
}, getFieldProps('select', {
|
||||
change: this.onChange,
|
||||
rules: [
|
||||
{
|
||||
type: 'email',
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
}))
|
||||
}
|
||||
>
|
||||
{this.data.map((d) => {
|
||||
return <Option key={d} value={d}>{d}</Option>
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors) ? errors.join(',')
|
||||
: <b
|
||||
style={{
|
||||
return (
|
||||
<div style={regionStyle}>
|
||||
<div>custom select sync validate</div>
|
||||
<div>
|
||||
<Select
|
||||
{ ...mergeProps({ props: { placeholder: 'please select', mode: 'combobox', filterOption: false }, style: { width: '200px' }}, getFieldProps('select', { change: this.onChange, rules: [{ type: 'email' }, { required: true }] })) }>
|
||||
{this
|
||||
.data
|
||||
.map((d) => {
|
||||
return <Option key={d} value={d}>{d}</Option>
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors)
|
||||
? errors.join(',')
|
||||
: <b style={{
|
||||
visibility: 'hidden',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</b>}
|
||||
}}>
|
||||
1
|
||||
</b>}
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('select')
|
||||
? 'validating'
|
||||
: <b style={{
|
||||
visibility: 'hidden',
|
||||
}}>
|
||||
1
|
||||
</b>}
|
||||
</div>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('select') ? 'validating' : <b
|
||||
style={{
|
||||
visibility: 'hidden',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</b>}
|
||||
</div>
|
||||
</div>)
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
@ -91,30 +69,35 @@ const Form = {
|
||||
methods: {
|
||||
onSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((error, values) => {
|
||||
if (!error) {
|
||||
console.log('ok', values)
|
||||
} else {
|
||||
console.log('error', error, values)
|
||||
}
|
||||
})
|
||||
this
|
||||
.form
|
||||
.validateFields((error, values) => {
|
||||
if (!error) {
|
||||
console.log('ok', values)
|
||||
} else {
|
||||
console.log('error', error, values)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { form } = this
|
||||
return (<div style={{ margin: '20px' }}>
|
||||
<h2>suggest</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<CustomInput form={ form }/>
|
||||
return (
|
||||
<div style={{
|
||||
margin: '20px',
|
||||
}}>
|
||||
<h2>suggest</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<CustomInput form={form}/>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<button>submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>)
|
||||
<div style={regionStyle}>
|
||||
<button>submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default createForm()(Form)
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
|
||||
# Customize Theme
|
||||
|
||||
The structure and styles of vue-antd-ui are exactly the same as those of Antd. You can refer to the Antd React customization mode for configuration.
|
||||
The structure and styles of ant-design-vue are exactly the same as those of Antd. You can refer to the Antd React customization mode for configuration.
|
||||
|
||||
Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
|
||||
|
||||
@ -11,7 +11,7 @@ Ant Design allows you to customize some basic design aspects in order to meet th
|
||||
|
||||
We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
|
||||
|
||||
- [Default Variables](https://github.com/vueComponent/ant-design/blob/master/components/style/themes/default.less)
|
||||
- [Default Variables](https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less)
|
||||
|
||||
Please report an issue if the existing list of variables is not enough for you.
|
||||
|
||||
@ -34,7 +34,7 @@ Note:
|
||||
|
||||
- Importing styles from less files is necessary.
|
||||
- If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd.
|
||||
- If you import styles from `'vue-antd-ui/dist/antd.css'`, change it to `vue-antd-ui/dist/antd.less`.
|
||||
- If you import styles from `'ant-design-vue/dist/antd.css'`, change it to `ant-design-vue/dist/antd.less`.
|
||||
- If you want to override `@icon-url`, the value must be contained in quotes like `"@icon-url": "'your-icon-font-path'"`.
|
||||
|
||||
### 2) Overriding Less variables (alternative way)
|
||||
@ -44,7 +44,7 @@ Override variables via less definition files.
|
||||
Create a standalone less file like the one below, and import it in your project.
|
||||
|
||||
```less
|
||||
@import "~vue-antd-ui/dist/antd.less"; // import official less entry file
|
||||
@import "~ant-design-vue/dist/antd.less"; // import official less entry file
|
||||
@import "your-theme-file.less"; // override variables here
|
||||
```
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
|
||||
# 定制主题
|
||||
|
||||
vue-antd-ui的组件结构及样式和Antd React完全一致,你可以参考Antd React的定制方式进行配置。
|
||||
ant-design-vue的组件结构及样式和Antd React完全一致,你可以参考Antd React的定制方式进行配置。
|
||||
|
||||
Ant Design 设计规范上支持一定程度的样式定制,以满足业务和品牌上多样化的视觉需求,包括但不限于主色、圆角、边框和部分组件的视觉定制。
|
||||
|
||||
@ -11,7 +11,7 @@ Ant Design 设计规范上支持一定程度的样式定制,以满足业务和
|
||||
|
||||
antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言,并定义了一系列全局/组件的样式变量,你可以根据需求进行相应调整。
|
||||
|
||||
- [默认样式变量](https://github.com/vueComponent/ant-design/blob/master/components/style/themes/default.less)
|
||||
- [默认样式变量](https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less)
|
||||
|
||||
如果以上变量不能满足你的定制需求,可以给我们提 issue。
|
||||
|
||||
@ -37,7 +37,7 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言,并定
|
||||
|
||||
- 样式必须加载 less 格式。
|
||||
- 如果你在使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 的 `style` 配置来引入样式,需要将配置值从 `'css'` 改为 `true`,这样会引入 less 文件。
|
||||
- 如果你是通过 `'vue-antd-ui/dist/antd.css'` 引入样式的,改为 `vue-antd-ui/dist/antd.less`。
|
||||
- 如果你是通过 `'ant-design-vue/dist/antd.css'` 引入样式的,改为 `ant-design-vue/dist/antd.less`。
|
||||
- 如果要覆盖 `@icon-url` 变量,内容需要包括引号 `"@icon-url": "'your-icon-font-path'"`。
|
||||
|
||||
### 2) less
|
||||
@ -47,7 +47,7 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言,并定
|
||||
建立一个单独的 `less` 文件如下,再引入这个文件。
|
||||
|
||||
```less
|
||||
@import "~vue-antd-ui/dist/antd.less"; // 引入官方提供的 less 样式入口文件
|
||||
@import "~ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件
|
||||
@import "your-theme-file.less"; // 用于覆盖上面定义的变量
|
||||
```
|
||||
|
||||
|
@ -12,7 +12,7 @@ The following CodeSandbox demo is the simplest use case, and it's also a good ha
|
||||
|
||||
- [![Vue Antd Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2wpk21kzvr)
|
||||
|
||||
## Import vue-antd-ui
|
||||
## Import ant-design-vue
|
||||
|
||||
### 1. Installation
|
||||
|
||||
@ -34,14 +34,14 @@ $ vue init webpack antd-demo
|
||||
|
||||
|
||||
```bash
|
||||
$ npm i --save vue-antd-ui
|
||||
$ npm i --save ant-design-vue
|
||||
```
|
||||
**Fully import**
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import Antd from 'vue-antd-ui'
|
||||
import Antd from 'ant-design-vue'
|
||||
import App from './App'
|
||||
import 'vue-antd-ui/dist/antd.css'
|
||||
import 'ant-design-vue/dist/antd.css'
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(Antd)
|
||||
@ -58,7 +58,7 @@ The above imports Antd entirely. Note that CSS file needs to be imported separat
|
||||
**Only import the components you need**
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import { Button, message } from 'vue-antd-ui'
|
||||
import { Button, message } from 'ant-design-vue'
|
||||
import App from './App'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
@ -78,7 +78,7 @@ new Vue({
|
||||
|
||||
### 4. Component list
|
||||
|
||||
[Component list](https://github.com/vueComponent/ant-design/blob/master/site/components.js)
|
||||
[Component list](https://github.com/vueComponent/ant-design-vue/blob/master/site/components.js)
|
||||
|
||||
## Compatibility
|
||||
|
||||
@ -93,7 +93,7 @@ If you are using babel, we strongly recommend using [babel-polyfill](https://bab
|
||||
|
||||
## Import on Demand
|
||||
|
||||
If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'vue-antd-ui';`. This will affect your app's network performance.
|
||||
If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'ant-design-vue';`. This will affect your app's network performance.
|
||||
|
||||
```
|
||||
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
|
||||
@ -104,23 +104,23 @@ You are using a whole package of antd, please use https://www.npmjs.com/package/
|
||||
However, we can import individual components on demand:
|
||||
|
||||
```jsx
|
||||
import Button from 'vue-antd-ui/lib/button';
|
||||
import 'vue-antd-ui/lib/button/style'; // or vue-antd-ui/lib/button/style/css for css format file
|
||||
import Button from 'ant-design-vue/lib/button';
|
||||
import 'ant-design-vue/lib/button/style'; // or ant-design-vue/lib/button/style/css for css format file
|
||||
```
|
||||
|
||||
We strongly recommend using [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'antd/lib/xxx' way:
|
||||
|
||||
```jsx
|
||||
import { Button } from 'vue-antd-ui';
|
||||
import { Button } from 'ant-design-vue';
|
||||
```
|
||||
|
||||
And this plugin can load styles too, read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details.
|
||||
|
||||
> FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'vue-antd-ui/dist/antd.css'` and override the global reset styles.
|
||||
> FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'ant-design-vue/dist/antd.css'` and override the global reset styles.
|
||||
|
||||
## Customization
|
||||
|
||||
- [Customize Theme](/ant-design/docs/vue/customize-theme)
|
||||
- [Customize Theme](/ant-design-vue/docs/vue/customize-theme)
|
||||
- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
|
||||
|
||||
## Tips
|
||||
|
@ -12,7 +12,7 @@ Ant Design Vue 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
- [![Vue Antd Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/2wpk21kzvr)
|
||||
|
||||
## 引入vue-antd-ui
|
||||
## 引入ant-design-vue
|
||||
|
||||
### 1. 安装脚手架工具
|
||||
|
||||
@ -35,16 +35,16 @@ $ vue init webpack antd-demo
|
||||
### 3. 使用组件
|
||||
|
||||
```bash
|
||||
$ npm i --save vue-antd-ui
|
||||
$ npm i --save ant-design-vue
|
||||
```
|
||||
|
||||
**完整引入**
|
||||
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import Antd from 'vue-antd-ui'
|
||||
import Antd from 'ant-design-vue'
|
||||
import App from './App'
|
||||
import 'vue-antd-ui/dist/antd.css'
|
||||
import 'ant-design-vue/dist/antd.css'
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(Antd)
|
||||
@ -62,7 +62,7 @@ new Vue({
|
||||
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import { Button, message } from 'vue-antd-ui'
|
||||
import { Button, message } from 'ant-design-vue'
|
||||
import App from './App'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
@ -82,7 +82,7 @@ new Vue({
|
||||
|
||||
### 4. 组件列表
|
||||
|
||||
[完整组件列表](https://github.com/vueComponent/ant-design/blob/master/site/components.js)
|
||||
[完整组件列表](https://github.com/vueComponent/ant-design-vue/blob/master/site/components.js)
|
||||
|
||||
|
||||
|
||||
@ -99,7 +99,7 @@ Ant Design Vue 支持所有的现代浏览器和 IE9+。
|
||||
|
||||
## 按需加载
|
||||
|
||||
如果你在开发环境的控制台看到下面的提示,那么你可能使用了 `import { Button } from 'vue-antd-ui';` 的写法引入了 antd 下所有的模块,这会影响应用的网络性能。
|
||||
如果你在开发环境的控制台看到下面的提示,那么你可能使用了 `import { Button } from 'ant-design-vue';` 的写法引入了 antd 下所有的模块,这会影响应用的网络性能。
|
||||
|
||||
```
|
||||
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
|
||||
@ -110,23 +110,23 @@ You are using a whole package of antd, please use https://www.npmjs.com/package/
|
||||
可以通过以下的写法来按需加载组件。
|
||||
|
||||
```jsx
|
||||
import Button from 'vue-antd-ui/lib/button';
|
||||
import 'vue-antd-ui/lib/button/style'; // 或者 vue-antd-ui/lib/button/style/css 加载 css 文件
|
||||
import Button from 'ant-design-vue/lib/button';
|
||||
import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
|
||||
```
|
||||
|
||||
如果你使用了 babel,那么可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载,加入这个插件后。你可以仍然这么写:
|
||||
|
||||
```jsx
|
||||
import { Button } from 'vue-antd-ui';
|
||||
import { Button } from 'ant-design-vue';
|
||||
```
|
||||
|
||||
插件会帮你转换成 `vue-antd-ui/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
|
||||
插件会帮你转换成 `ant-design-vue/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
|
||||
|
||||
> 注意,babel-plugin-import 的 `style` 属性除了引入对应组件的样式,也会引入一些必要的全局样式。如果你不需要它们,建议不要使用此属性。你可以 `import 'vue-antd-ui/dist/antd.css` 手动引入,并覆盖全局样式。
|
||||
> 注意,babel-plugin-import 的 `style` 属性除了引入对应组件的样式,也会引入一些必要的全局样式。如果你不需要它们,建议不要使用此属性。你可以 `import 'ant-design-vue/dist/antd.css` 手动引入,并覆盖全局样式。
|
||||
|
||||
## 配置主题和字体
|
||||
|
||||
- [改变主题](/ant-design/docs/vue/customize-theme-cn)
|
||||
- [改变主题](/ant-design-vue/docs/vue/customize-theme-cn)
|
||||
- [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
|
||||
|
||||
## 小贴士
|
||||
|
@ -6,7 +6,7 @@ If you want to use other languages, you can follow the instructions below.
|
||||
|
||||
## LocaleProvider
|
||||
|
||||
vue-antd-ui provides a Vue Component [LocaleProvider](/ant-design/components/locale-provider) for configuring vue-antd-ui locale text globally.
|
||||
ant-design-vue provides a Vue Component [LocaleProvider](/ant-design-vue/components/locale-provider) for configuring ant-design-vue locale text globally.
|
||||
|
||||
````html
|
||||
<template>
|
||||
@ -16,7 +16,7 @@ vue-antd-ui provides a Vue Component [LocaleProvider](/ant-design/components/loc
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zhCN from 'vue-antd-ui/lib/locale-provider/zh_CN';
|
||||
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -69,5 +69,5 @@ Supported languages:
|
||||
|Chinese (Simplified)|zh_CN|
|
||||
|Chinese (Traditional)|zh_TW|
|
||||
|
||||
See usage and ways to contribute a new locale package at [LocaleProvider](/ant-design/components/locale-provider).
|
||||
See usage and ways to contribute a new locale package at [LocaleProvider](/ant-design-vue/components/locale-provider).
|
||||
|
||||
|
@ -1,11 +1,11 @@
|
||||
|
||||
# 国际化
|
||||
|
||||
`vue-antd-ui` 目前的默认文案是英文,如果需要使用其他语言,可以参考下面的方案。
|
||||
`ant-design-vue` 目前的默认文案是英文,如果需要使用其他语言,可以参考下面的方案。
|
||||
|
||||
## LocaleProvider
|
||||
|
||||
vue-antd-ui 提供了一个 Vue 组件 [LocaleProvider](/ant-design/components/locale-provider-cn) 用于全局配置国际化文案。
|
||||
ant-design-vue 提供了一个 Vue 组件 [LocaleProvider](/ant-design-vue/components/locale-provider-cn) 用于全局配置国际化文案。
|
||||
|
||||
````html
|
||||
<template>
|
||||
@ -15,7 +15,7 @@ vue-antd-ui 提供了一个 Vue 组件 [LocaleProvider](/ant-design/components/l
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zhCN from 'vue-antd-ui/lib/locale-provider/zh_CN';
|
||||
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -68,5 +68,5 @@ export default {
|
||||
|简体中文|zh_CN|
|
||||
|繁体中文|zh_TW|
|
||||
|
||||
具体的使用方法和新语言包贡献方式请参考 [LocaleProvider 文档](/ant-design/components/locale-provider-cn)。
|
||||
具体的使用方法和新语言包贡献方式请参考 [LocaleProvider 文档](/ant-design-vue/components/locale-provider-cn)。
|
||||
|
||||
|
@ -31,14 +31,14 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
|
||||
|
||||
## Environment Support
|
||||
|
||||
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性))
|
||||
* Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design-vue/docs/vue/getting-started-cn/#兼容性))
|
||||
* Server-side Rendering
|
||||
|
||||
## Version
|
||||
|
||||
- Stable: [![npm package](https://img.shields.io/npm/v/vue-antd-ui.svg?style=flat-square)](https://www.npmjs.org/package/vue-antd-ui)
|
||||
- Stable: [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue)
|
||||
|
||||
You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design/releases.atom
|
||||
You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design-vue/releases.atom
|
||||
|
||||
## Installation
|
||||
|
||||
@ -47,11 +47,11 @@ You can subscribe to this feed for new version notifications: https://github.com
|
||||
**We recommend using npm or yarn to install**,it not only makes development easier,but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
|
||||
|
||||
```bash
|
||||
$ npm install vue-antd-ui --save
|
||||
$ npm install ant-design-vue --save
|
||||
```
|
||||
|
||||
```bash
|
||||
$ yarn add vue-antd-ui
|
||||
$ 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).
|
||||
@ -62,7 +62,7 @@ If you are in a bad network environment,you can try other registries and tools
|
||||
|
||||
Add `script` and `link` tags in your browser and use the global variable `antd`.
|
||||
|
||||
We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `vue-antd-ui/dist` in antd's npm package. You can also download these files directly from [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-antd-ui/badge)](https://www.jsdelivr.com/package/npm/vue-antd-ui) or [unpkg](https://unpkg.com/vue-antd-ui/dist/).
|
||||
We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `ant-design-vue/dist` in antd's npm package. You can also download these files directly from [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge)](https://www.jsdelivr.com/package/npm/ant-design-vue) or [unpkg](https://unpkg.com/ant-design-vue/dist/).
|
||||
|
||||
> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
|
||||
|
||||
@ -72,14 +72,14 @@ We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `vue-antd
|
||||
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import { DatePicker } from 'vue-antd-ui';
|
||||
import { DatePicker } from 'ant-design-vue';
|
||||
Vue.component(DatePicker.name, DatePicker)
|
||||
```
|
||||
|
||||
And import stylesheets manually:
|
||||
|
||||
```jsx
|
||||
import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
||||
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
|
||||
```
|
||||
|
||||
### Use modularized antd
|
||||
@ -90,7 +90,7 @@ import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
||||
// .babelrc or babel-loader option
|
||||
{
|
||||
"plugins": [
|
||||
["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
|
||||
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -101,33 +101,33 @@ import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
||||
|
||||
```jsx
|
||||
// import js and css modularly, parsed by babel-plugin-import
|
||||
import { DatePicker } from 'vue-antd-ui';
|
||||
import { DatePicker } from 'ant-design-vue';
|
||||
```
|
||||
|
||||
- Manually import
|
||||
|
||||
```jsx
|
||||
import DatePicker from 'vue-antd-ui/lib/date-picker'; // for js
|
||||
import 'vue-antd-ui/lib/date-picker/style/css'; // for css
|
||||
// import 'vue-antd-ui/lib/date-picker/style'; // that will import less
|
||||
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
|
||||
|
||||
- [Home Page](https://vuecomponent.github.io/ant-design/)
|
||||
- [Home Page](https://vuecomponent.github.io/ant-design-vue/)
|
||||
- [Ant Design React](https://ant.design/)
|
||||
- [Components](https://vuecomponent.github.io/ant-design/docs/react/introduce)
|
||||
- [Change Log](/ant-design/changelog)
|
||||
- [Components](https://vuecomponent.github.io/ant-design-vue/docs/react/introduce)
|
||||
- [Change Log](/ant-design-vue/changelog)
|
||||
- [CodeSandbox template](https://codesandbox.io/s/2wpk21kzvr) for bug reports
|
||||
- [Customize Theme](/ant-design/docs/vue/customize-theme)
|
||||
- [Customize Theme](/ant-design-vue/docs/vue/customize-theme)
|
||||
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
|
||||
If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/vue-antd-issue-helper/).
|
||||
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/vue-antd-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!
|
||||
|
||||
|
@ -30,14 +30,14 @@
|
||||
|
||||
## 支持环境
|
||||
|
||||
* 现代浏览器和 IE9 及以上(需要 [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性))。
|
||||
* 现代浏览器和 IE9 及以上(需要 [polyfills](https://vuecomponent.github.io/ant-design-vue/docs/vue/getting-started-cn/#兼容性))。
|
||||
* 支持服务端渲染。
|
||||
|
||||
## 版本
|
||||
|
||||
- 稳定版:[![npm package](https://img.shields.io/npm/v/vue-antd-ui.svg?style=flat-square)](https://www.npmjs.org/package/vue-antd-ui)
|
||||
- 稳定版:[![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue)
|
||||
|
||||
你可以订阅:https://github.com/vueComponent/ant-design/releases.atom 来获得稳定版发布的通知。
|
||||
你可以订阅:https://github.com/vueComponent/ant-design-vue/releases.atom 来获得稳定版发布的通知。
|
||||
|
||||
## 安装
|
||||
|
||||
@ -46,11 +46,11 @@
|
||||
**我们推荐使用 npm 或 yarn 的方式进行开发**,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。
|
||||
|
||||
```bash
|
||||
$ npm install vue-antd-ui --save
|
||||
$ npm install ant-design-vue --save
|
||||
```
|
||||
|
||||
```bash
|
||||
$ yarn add vue-antd-ui
|
||||
$ yarn add ant-design-vue
|
||||
```
|
||||
|
||||
如果你的网络环境不佳,推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
|
||||
@ -61,8 +61,8 @@ $ yarn add vue-antd-ui
|
||||
|
||||
在浏览器中使用 `script` 和 `link` 标签直接引入文件,并使用全局变量 `antd`。
|
||||
|
||||
我们在 npm 发布包内的 `vue-antd-ui/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-antd-ui/badge)](https://www.jsdelivr.com/package/npm/vue-antd-ui)
|
||||
或 [UNPKG](https://unpkg.com/vue-antd-ui/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 快速修复支持。
|
||||
|
||||
@ -72,14 +72,14 @@ $ yarn add vue-antd-ui
|
||||
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import { DatePicker } from 'vue-antd-ui';
|
||||
import { DatePicker } from 'ant-design-vue';
|
||||
Vue.component(DatePicker.name, DatePicker)
|
||||
```
|
||||
|
||||
引入样式:
|
||||
|
||||
```jsx
|
||||
import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
||||
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
|
||||
```
|
||||
|
||||
### 按需加载
|
||||
@ -92,49 +92,49 @@ import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less'
|
||||
// .babelrc or babel-loader option
|
||||
{
|
||||
"plugins": [
|
||||
["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
|
||||
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
> 注意:webpack 1 无需设置 `libraryDirectory`。
|
||||
|
||||
然后只需从 vue-antd-ui 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。
|
||||
然后只需从 ant-design-vue 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。
|
||||
|
||||
```jsx
|
||||
// babel-plugin-import 会帮助你加载 JS 和 CSS
|
||||
import { DatePicker } from 'vue-antd-ui';
|
||||
import { DatePicker } from 'ant-design-vue';
|
||||
```
|
||||
|
||||
- 手动引入
|
||||
|
||||
```jsx
|
||||
import DatePicker from 'vue-antd-ui/lib/date-picker'; // 加载 JS
|
||||
import 'vue-antd-ui/lib/date-picker/style/css'; // 加载 CSS
|
||||
// import 'vue-antd-ui/lib/date-picker/style'; // 加载 LESS
|
||||
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
|
||||
```
|
||||
|
||||
## 链接
|
||||
|
||||
- [首页](https://vuecomponent.github.io/ant-design/)
|
||||
- [首页](https://vuecomponent.github.io/ant-design-vue/)
|
||||
- [Ant Design React](https://ant.design/)
|
||||
- [组件库](https://vuecomponent.github.io/ant-design/docs/vue/introduce-cn)
|
||||
- [更新日志](/ant-design/changelog-cn)
|
||||
- [组件库](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn)
|
||||
- [更新日志](/ant-design-vue/changelog-cn)
|
||||
- [CodeSandbox 模板](https://codesandbox.io/s/2wpk21kzvr) for bug reports
|
||||
- [定制主题](/ant-design/docs/vue/customize-theme-cn)
|
||||
- [定制主题](/ant-design-vue/docs/vue/customize-theme-cn)
|
||||
|
||||
|
||||
## 如何贡献
|
||||
|
||||
如果你希望参与贡献,欢迎 [Pull Request](https://github.com/vueComponent/ant-design/pulls),或给我们 [报告 Bug](https://vuecomponent.github.io/vue-antd-issue-helper/)([国内镜像](http://tangjinzhou.gitee.io/vue-antd-issue-helper/))。
|
||||
如果你希望参与贡献,欢迎 [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls),或给我们 [报告 Bug](https://vuecomponent.github.io/vue-antd-issue-helper/)([国内镜像](http://tangjinzhou.gitee.io/vue-antd-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),更好的问题更容易获得帮助。
|
||||
|
||||
## 关于vue-antd-ui
|
||||
## 关于ant-design-vue
|
||||
|
||||
众所周知,Ant Design作为一门设计语言面世,经历过多年的迭代和积累,它对UI的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是React开发者手中的神兵利器。希望vue-antd-ui能够让Vue开发者也享受到Ant Design的优秀设计。
|
||||
众所周知,Ant Design作为一门设计语言面世,经历过多年的迭代和积累,它对UI的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是React开发者手中的神兵利器。希望ant-design-vue能够让Vue开发者也享受到Ant Design的优秀设计。
|
||||
|
||||
vue-antd-ui是Ant Design 3.X的Vue实现,该组件库目前以实现Ant Design React版80%以上的组件,组件的风格与Ant Design 3.4.0版本保持同步,组件的html结构和css样式也保持一致,真正做到了样式0修改,组件API也尽量保持了一致。
|
||||
ant-design-vue是Ant Design 3.X的Vue实现,该组件库目前以实现Ant Design React版80%以上的组件,组件的风格与Ant Design 3.4.0版本保持同步,组件的html结构和css样式也保持一致,真正做到了样式0修改,组件API也尽量保持了一致。
|
||||
|
||||
Ant Design Vue 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
|
@ -48,18 +48,18 @@ Below is the default directory structure.
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
Now we install `vue-antd-ui` from yarn or npm.
|
||||
Now we install `ant-design-vue` from yarn or npm.
|
||||
|
||||
```bash
|
||||
$ yarn add vue-antd-ui
|
||||
$ yarn add ant-design-vue
|
||||
```
|
||||
|
||||
Modify `src/main.js`, import Button component from `antd`.
|
||||
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import Button from 'vue-antd-ui/lib/button'
|
||||
import 'vue-antd-ui/dist/antd.css'
|
||||
import Button from 'ant-design-vue/lib/button'
|
||||
import 'ant-design-vue/dist/antd.css'
|
||||
import App from './App'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
@ -99,7 +99,7 @@ Now we need to customize the default webpack config.
|
||||
|
||||
### Use babel-plugin-import
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design/docs/vue/getting-started/#Import-on-Demand)).
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/ant-design-vue/docs/vue/getting-started/#Import-on-Demand)).
|
||||
|
||||
```bash
|
||||
$ yarn add babel-plugin-import --dev
|
||||
@ -122,19 +122,19 @@ Modify `.babelrc`.
|
||||
+ "plugins": [
|
||||
+ "transform-vue-jsx",
|
||||
+ "transform-runtime",
|
||||
+ ["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }]
|
||||
+ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
|
||||
+ ]
|
||||
}
|
||||
```
|
||||
|
||||
Remove the `import 'vue-antd-ui/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
|
||||
Remove the `import 'ant-design-vue/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
|
||||
|
||||
```diff
|
||||
// src/main.js
|
||||
import Vue from 'vue'
|
||||
- import Button from 'vue-antd-ui/lib/button';
|
||||
+ import { Button } from 'vue-antd-ui';
|
||||
- import 'vue-antd-ui/dist/antd.css'
|
||||
- import Button from 'ant-design-vue/lib/button';
|
||||
+ import { Button } from 'ant-design-vue';
|
||||
- import 'ant-design-vue/dist/antd.css'
|
||||
import App from './App'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
@ -149,8 +149,8 @@ Remove the `import 'vue-antd-ui/dist/antd.css';` statement added before because
|
||||
})
|
||||
```
|
||||
|
||||
Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design/docs/vue/getting-started/#Import-on-Demand).
|
||||
Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/ant-design-vue/docs/vue/getting-started/#Import-on-Demand).
|
||||
|
||||
### Customize Theme
|
||||
|
||||
According to the [Customize Theme documentation](/ant-design/docs/vue/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader).
|
||||
According to the [Customize Theme documentation](/ant-design-vue/docs/vue/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader).
|
||||
|
@ -48,18 +48,18 @@ $ npm run dev
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
现在从 yarn 或 npm 安装并引入 vue-antd-ui。
|
||||
现在从 yarn 或 npm 安装并引入 ant-design-vue。
|
||||
|
||||
```bash
|
||||
$ yarn add vue-antd-ui
|
||||
$ yarn add ant-design-vue
|
||||
```
|
||||
|
||||
修改 `src/main.js`,引入 antd 的按钮组件以及全部样式文件。
|
||||
|
||||
```jsx
|
||||
import Vue from 'vue'
|
||||
import Button from 'vue-antd-ui/lib/button'
|
||||
import 'vue-antd-ui/dist/antd.css'
|
||||
import Button from 'ant-design-vue/lib/button'
|
||||
import 'ant-design-vue/dist/antd.css'
|
||||
import App from './App'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
@ -96,7 +96,7 @@ new Vue({
|
||||
|
||||
### 使用 babel-plugin-import
|
||||
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件([原理](/ant-design/docs/vue/getting-started-cn/#按需加载))。
|
||||
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件([原理](/ant-design-vue/docs/vue/getting-started-cn/#按需加载))。
|
||||
|
||||
```bash
|
||||
$ yarn add babel-plugin-import --dev
|
||||
@ -119,20 +119,20 @@ $ yarn add babel-plugin-import --dev
|
||||
+ "plugins": [
|
||||
+ "transform-vue-jsx",
|
||||
+ "transform-runtime",
|
||||
+ ["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }]
|
||||
+ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
|
||||
+ ]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
然后移除前面在 `src/main.js` 里全量添加的 `import 'vue-antd-ui/dist/antd.css';` 样式代码,并且按下面的格式引入模块。
|
||||
然后移除前面在 `src/main.js` 里全量添加的 `import 'ant-design-vue/dist/antd.css';` 样式代码,并且按下面的格式引入模块。
|
||||
|
||||
```diff
|
||||
// src/main.js
|
||||
import Vue from 'vue'
|
||||
- import Button from 'vue-antd-ui/lib/button';
|
||||
+ import { Button } from 'vue-antd-ui';
|
||||
- import 'vue-antd-ui/dist/antd.css'
|
||||
- import Button from 'ant-design-vue/lib/button';
|
||||
+ import { Button } from 'ant-design-vue';
|
||||
- import 'ant-design-vue/dist/antd.css'
|
||||
import App from './App'
|
||||
|
||||
Vue.component(Button.name, Button)
|
||||
@ -147,9 +147,9 @@ $ yarn add babel-plugin-import --dev
|
||||
})
|
||||
```
|
||||
|
||||
最后重启 `npm run dev` 访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design/docs/vue/getting-started-cn/#按需加载)。
|
||||
最后重启 `npm run dev` 访问页面,antd 组件的 js 和 css 代码都会按需加载,你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/ant-design-vue/docs/vue/getting-started-cn/#按需加载)。
|
||||
|
||||
### 自定义主题
|
||||
|
||||
按照 [配置主题](/ant-design/docs/vue/customize-theme-cn) 的要求,自定义主题需要用到 less 变量覆盖功能。
|
||||
按照 [配置主题](/ant-design-vue/docs/vue/customize-theme-cn) 的要求,自定义主题需要用到 less 变量覆盖功能。
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "vue-antd-ui",
|
||||
"name": "ant-design-vue",
|
||||
"version": "1.0.1",
|
||||
"title": "Ant Design Vue",
|
||||
"description": "An enterprise-class UI design language and Vue-based implementation",
|
||||
@ -40,13 +40,13 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vueComponent/ant-design.git"
|
||||
"url": "git+https://github.com/vueComponent/ant-design-vue.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/vueComponent/ant-design/issues"
|
||||
"url": "https://github.com/vueComponent/ant-design-vue/issues"
|
||||
},
|
||||
"homepage": "https://github.com/vueComponent/ant-design",
|
||||
"homepage": "https://github.com/vueComponent/ant-design-vue",
|
||||
"pre-commit": [
|
||||
"lint:style",
|
||||
"lint"
|
||||
|
@ -18,7 +18,7 @@ cd site-dist
|
||||
git init
|
||||
git add -f .
|
||||
git commit -m "Travis build"
|
||||
git push --force --quiet "https://${GITHUB_TOKEN}@github.com/vueComponent/ant-design.git" master:gh-pages > /dev/null
|
||||
git push --force --quiet "https://${GITHUB_TOKEN}@github.com/vueComponent/ant-design-vue.git" master:gh-pages > /dev/null
|
||||
|
||||
|
||||
echo "Done updating gh-pages\n"
|
||||
|
@ -33,8 +33,8 @@ export default {
|
||||
<header id='header'>
|
||||
<a-row>
|
||||
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||
<router-link to={{ path: '/ant-design' }} id='logo'>
|
||||
<img alt='logo' height='32' src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
|
||||
<router-link to={{ path: '/ant-design-vue' }} id='logo'>
|
||||
<img alt='logo' height='32' src='https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/logo.png' />
|
||||
<span> VUE-ANTD</span>
|
||||
</router-link>
|
||||
</a-col>
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
{isCN ? '组件' : 'Components'}
|
||||
</a-menu-item>
|
||||
<a-menu-item key='github'>
|
||||
<a href='https://github.com/vueComponent/ant-design'>GitHub</a>
|
||||
<a href='https://github.com/vueComponent/ant-design-vue'>GitHub</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
|
@ -101,7 +101,7 @@ export default {
|
||||
docsList.forEach(({ key, enTitle, title }) => {
|
||||
const k = isCN ? `${key}-cn` : key
|
||||
docsMenu.push(<a-menu-item key={k}>
|
||||
<router-link to={`/ant-design/docs/vue/${k}/`}>{isCN ? title : enTitle }</router-link>
|
||||
<router-link to={`/ant-design-vue/docs/vue/${k}/`}>{isCN ? title : enTitle }</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
return docsMenu
|
||||
@ -172,10 +172,10 @@ export default {
|
||||
searchData.push({
|
||||
title,
|
||||
subtitle,
|
||||
url: `/ant-design/components/${key}/`,
|
||||
url: `/ant-design-vue/components/${key}/`,
|
||||
})
|
||||
MenuItems.push(<a-menu-item key={key}>
|
||||
<router-link to={`/ant-design/components/${key}/`}>{linkValue}</router-link>
|
||||
<router-link to={`/ant-design-vue/components/${key}/`}>{linkValue}</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
|
||||
|
@ -2,22 +2,24 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png">
|
||||
<style id="nprogress-style">
|
||||
#nprogress { display: none;}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/logo.png">
|
||||
<style id="nprogress-style">
|
||||
#nprogress {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
@ -8,10 +8,10 @@ const beforeEnter = (to, from, next) => {
|
||||
next()
|
||||
}
|
||||
export default [
|
||||
{ path: '/ant-design/components',
|
||||
{ path: '/ant-design-vue/components',
|
||||
component: Layout,
|
||||
props: (route) => {
|
||||
const name = route.path.split('/ant-design/components/')[1].split('/')[0]
|
||||
const name = route.path.split('/ant-design-vue/components/')[1].split('/')[0]
|
||||
return { name, showDemo: true }
|
||||
},
|
||||
children: demoRoutes.map((item) => ({
|
||||
@ -19,7 +19,7 @@ export default [
|
||||
beforeEnter,
|
||||
})),
|
||||
},
|
||||
{ path: '/ant-design/iframe',
|
||||
{ path: '/ant-design-vue/iframe',
|
||||
component: Iframe,
|
||||
children: demoRoutes.map((item) => ({
|
||||
...item,
|
||||
@ -30,7 +30,7 @@ export default [
|
||||
})),
|
||||
},
|
||||
{
|
||||
path: '/ant-design',
|
||||
path: '/ant-design-vue',
|
||||
component: Layout,
|
||||
props: (route) => {
|
||||
const name = route.path.split('/docs/vue/')[1].split('/')[0]
|
||||
@ -97,8 +97,8 @@ export default [
|
||||
component: () => import('../CHANGELOG.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{ path: '', redirect: '/ant-design/vue/docs/introduce/' },
|
||||
{ path: '', redirect: '/ant-design-vue/vue/docs/introduce/' },
|
||||
],
|
||||
},
|
||||
{ path: '/*', redirect: '/ant-design/docs/vue/introduce/' },
|
||||
{ path: '/*', redirect: '/ant-design-vue/docs/vue/introduce/' },
|
||||
]
|
||||
|
@ -1,24 +1,26 @@
|
||||
import glob from 'glob'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import MockDate from 'mockdate'
|
||||
import moment from 'moment'
|
||||
import Vue from 'vue'
|
||||
import antd from 'vue-antd-ui'
|
||||
import antd from 'ant-design-vue'
|
||||
Vue.use(antd)
|
||||
|
||||
export default function demoTest (component, options = {}) {
|
||||
export default function demoTest(component, options = {}) {
|
||||
const suffix = options.suffix || 'md'
|
||||
const files = glob.sync(`./components/${component}/demo/*.${suffix}`)
|
||||
|
||||
files.forEach((file) => {
|
||||
let testMethod = options.skip === true ? test.skip : test
|
||||
let testMethod = options.skip === true
|
||||
? test.skip
|
||||
: test
|
||||
if (Array.isArray(options.skip) && options.skip.some(c => file.includes(c))) {
|
||||
testMethod = test.skip
|
||||
}
|
||||
testMethod(`renders ${file} correctly`, (done) => {
|
||||
MockDate.set(moment('2016-11-22'))
|
||||
const demo = require(`../.${file}`).default || require(`../.${file}`)// eslint-disable-line global-require, import/no-dynamic-require
|
||||
const wrapper = mount(demo, { sync: false })
|
||||
const demo = require(`../.${file}`).default || require(`../.${file}`) // eslint-disable-line global-require, import/no-dynamic-require
|
||||
const wrapper = mount(demo, {sync: false})
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
MockDate.reset()
|
||||
|
@ -8,10 +8,15 @@ const babelConfig = getBabelCommonConfig(false)
|
||||
babelConfig.plugins.push(require.resolve('babel-plugin-syntax-dynamic-import'))
|
||||
|
||||
const fetch = (str, tag, scoped) => {
|
||||
const $ = cheerio.load(str, { decodeEntities: false, xmlMode: true })
|
||||
if (!tag) return str
|
||||
const $ = cheerio.load(str, {
|
||||
decodeEntities: false,
|
||||
xmlMode: true,
|
||||
})
|
||||
if (!tag) { return str }
|
||||
if (tag === 'style') {
|
||||
return scoped ? $(`${tag}[scoped]`).html() : $(`${tag}`).not(`${tag}[scoped]`).html()
|
||||
return scoped
|
||||
? $(`${tag}[scoped]`).html()
|
||||
: $(`${tag}`).not(`${tag}[scoped]`).html()
|
||||
}
|
||||
return $(tag).html()
|
||||
}
|
||||
@ -97,33 +102,47 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
|
||||
cn,
|
||||
sourceCode,
|
||||
}
|
||||
jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
|
||||
const codeHtml = code ? md.render(code) : ''
|
||||
const cnHtml = cn ? md.render(cn) : ''
|
||||
jsfiddle = md
|
||||
.utils
|
||||
.escapeHtml(JSON.stringify(jsfiddle))
|
||||
const codeHtml = code
|
||||
? md.render(code)
|
||||
: ''
|
||||
const cnHtml = cn
|
||||
? md.render(cn)
|
||||
: ''
|
||||
let newContent = `
|
||||
<template>
|
||||
<demo-box :jsfiddle="${jsfiddle}">
|
||||
<template slot="component">${template}</template>
|
||||
<template slot="description">${cnHtml}</template>
|
||||
<template slot="us-description">${us ? md.render(us) : ''}</template>
|
||||
<template slot="us-description">${us
|
||||
? md.render(us)
|
||||
: ''}</template>
|
||||
<template slot="code">${codeHtml}</template>
|
||||
</demo-box>
|
||||
</template>`
|
||||
newContent += script ? `
|
||||
newContent += script
|
||||
? `
|
||||
<script>
|
||||
${script || ''}
|
||||
</script>
|
||||
` : ''
|
||||
newContent += style ? `
|
||||
`
|
||||
: ''
|
||||
newContent += style
|
||||
? `
|
||||
<style>
|
||||
${style || ''}
|
||||
</style>
|
||||
` : ''
|
||||
newContent += scopedStyle ? `
|
||||
`
|
||||
: ''
|
||||
newContent += scopedStyle
|
||||
? `
|
||||
<style scoped>
|
||||
${scopedStyle || ''}
|
||||
</style>
|
||||
` : ''
|
||||
`
|
||||
: ''
|
||||
const t = new Token('html_block', '', 0)
|
||||
t.content = newContent
|
||||
tokens.push(t)
|
||||
@ -132,9 +151,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
index: [
|
||||
`./site/${process.env.ENTRY_INDEX || 'index'}.js`,
|
||||
],
|
||||
index: [`./site/${process.env.ENTRY_INDEX || 'index'}.js`],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
@ -143,50 +160,46 @@ module.exports = {
|
||||
use: [
|
||||
{
|
||||
loader: 'vue-antd-md-loader',
|
||||
options: Object.assign(md, { wrapper: 'div',
|
||||
options: Object.assign(md, {
|
||||
wrapper: 'div',
|
||||
vueLoaderOptions: {
|
||||
loaders: {
|
||||
js: [
|
||||
{ loader: 'babel-loader',
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['env'],
|
||||
plugins: [
|
||||
'transform-vue-jsx',
|
||||
'transform-object-rest-spread',
|
||||
],
|
||||
}},
|
||||
plugins: ['transform-vue-jsx', 'transform-object-rest-spread'],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
}, {
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
js: [
|
||||
{ loader: 'babel-loader',
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['env'],
|
||||
plugins: [
|
||||
'transform-vue-jsx',
|
||||
'transform-object-rest-spread',
|
||||
'syntax-dynamic-import',
|
||||
],
|
||||
}},
|
||||
plugins: ['transform-vue-jsx', 'transform-object-rest-spread', 'syntax-dynamic-import'],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
}, {
|
||||
test: /\.(js|jsx)$/,
|
||||
loader: 'babel-loader', exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
options: babelConfig,
|
||||
},
|
||||
{
|
||||
}, {
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
@ -196,12 +209,16 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
modules: ['node_modules', path.join(__dirname, '../node_modules')],
|
||||
extensions: ['.js', '.jsx', '.vue', '.md'],
|
||||
modules: [
|
||||
'node_modules', path.join(__dirname, '../node_modules'),
|
||||
],
|
||||
extensions: [
|
||||
'.js', '.jsx', '.vue', '.md',
|
||||
],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js',
|
||||
'antd': path.join(__dirname, 'components'),
|
||||
'vue-antd-ui': path.join(__dirname, 'components'),
|
||||
'ant-design-vue': path.join(__dirname, 'components'),
|
||||
'@': path.join(__dirname, ''),
|
||||
},
|
||||
},
|
||||
|
@ -7,7 +7,7 @@ const baseWebpackConfig = require('./webpack.base.config')
|
||||
module.exports = merge(baseWebpackConfig, {
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/ant-design/',
|
||||
publicPath: '/ant-design-vue/',
|
||||
filename: 'build.js',
|
||||
},
|
||||
module: {
|
||||
@ -39,7 +39,7 @@ module.exports = merge(baseWebpackConfig, {
|
||||
host: '0.0.0.0',
|
||||
historyApiFallback: {
|
||||
rewrites: [
|
||||
{ from: /./, to: '/ant-design/index.html' },
|
||||
{ from: /./, to: '/ant-design-vue/index.html' },
|
||||
],
|
||||
},
|
||||
disableHostCheck: true,
|
||||
|
@ -14,7 +14,7 @@ const modulePlugin = new ExtractTextPlugin({
|
||||
module.exports = merge(baseWebpackConfig, {
|
||||
output: {
|
||||
path: path.resolve(__dirname, './site-dist'),
|
||||
publicPath: '/ant-design/',
|
||||
publicPath: '/ant-design-vue/',
|
||||
filename: '[name].[chunkhash].js',
|
||||
chunkFilename: '[chunkhash].async.js',
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user