[Doc] new theme

This commit is contained in:
陈嘉涵 2019-05-15 20:53:04 +08:00
parent 3cae4288f2
commit d0f4169c86
130 changed files with 1460 additions and 1147 deletions

View File

@ -1,6 +1,6 @@
## Changelog # Changelog
## [v1.6.18](https://github.com/youzan/vant/tree/v1.6.18) ### [v1.6.18](https://github.com/youzan/vant/tree/v1.6.18)
`2019-05-10` `2019-05-10`
**Bug Fixes** **Bug Fixes**
@ -13,7 +13,7 @@
- fix Swipe map cause warning when prevent touchmove event - fix Swipe map cause warning when prevent touchmove event
## [1.6.17](https://github.com/youzan/vant/tree/v1.6.17) ### [v1.6.17](https://github.com/youzan/vant/tree/v1.6.17)
`2019-05-05` `2019-05-05`
**Improvements** **Improvements**
@ -31,7 +31,7 @@
- fix Popup click-overlay event triggered twice when show multiple popup - fix Popup click-overlay event triggered twice when show multiple popup
## [v1.6.16](https://github.com/youzan/vant/tree/v1.6.16) ### [v1.6.16](https://github.com/youzan/vant/tree/v1.6.16)
`2019-04-26` `2019-04-26`
**Improvements** **Improvements**
@ -50,7 +50,7 @@
- fix Slider drag and `value` props change at the same time can not drag success [\#3206](https://github.com/youzan/vant/pull/3206) - fix Slider drag and `value` props change at the same time can not drag success [\#3206](https://github.com/youzan/vant/pull/3206)
## [v1.6.15](https://github.com/youzan/vant/tree/v1.6.15) ### [v1.6.15](https://github.com/youzan/vant/tree/v1.6.15)
`2019-04-19` `2019-04-19`
**Improvements** **Improvements**
@ -75,7 +75,7 @@
- fix Toast should add z-index if previous toast has not disappeared [\#3153](https://github.com/youzan/vant/pull/3153) - fix Toast should add z-index if previous toast has not disappeared [\#3153](https://github.com/youzan/vant/pull/3153)
## [v1.6.14](https://github.com/youzan/vant/tree/v1.6.14) ### [v1.6.14](https://github.com/youzan/vant/tree/v1.6.14)
`2019-04-13` `2019-04-13`
**Improvements** **Improvements**
@ -98,7 +98,7 @@
- fix Dialog may render error when use getContainer [\#3111](https://github.com/youzan/vant/pull/3111) - fix Dialog may render error when use getContainer [\#3111](https://github.com/youzan/vant/pull/3111)
## [v1.6.13](https://github.com/youzan/vant/tree/v1.6.13) ### [v1.6.13](https://github.com/youzan/vant/tree/v1.6.13)
`2019-04-06` `2019-04-06`
**Improvements** **Improvements**
@ -115,7 +115,7 @@
- fix Tab should set line position when activated [\#3097](https://github.com/youzan/vant/pull/3097) - fix Tab should set line position when activated [\#3097](https://github.com/youzan/vant/pull/3097)
## [v1.6.12](https://github.com/youzan/vant/tree/v1.6.12) ### [v1.6.12](https://github.com/youzan/vant/tree/v1.6.12)
`2019-03-28` `2019-03-28`
**Improvements** **Improvements**
@ -129,7 +129,7 @@
- fix Button square prop not work when use hairline [\#3058](https://github.com/youzan/vant/pull/3058) - fix Button square prop not work when use hairline [\#3058](https://github.com/youzan/vant/pull/3058)
## [v1.6.11](https://github.com/youzan/vant/tree/v1.6.11) ### [v1.6.11](https://github.com/youzan/vant/tree/v1.6.11)
`2019-03-22` `2019-03-22`
**Improvements** **Improvements**
@ -154,7 +154,7 @@
- fix Collapse can not expand when clientHeight equals zero [\#2993](https://github.com/youzan/vant/pull/2993) - fix Collapse can not expand when clientHeight equals zero [\#2993](https://github.com/youzan/vant/pull/2993)
## [v1.6.10](https://github.com/youzan/vant/tree/v1.6.10) ### [v1.6.10](https://github.com/youzan/vant/tree/v1.6.10)
`2019-03-17` `2019-03-17`
**Improvements** **Improvements**
@ -172,7 +172,7 @@
- fix Uploader can not upload same file when before-read [\#2971](https://github.com/youzan/vant/pull/2971) - fix Uploader can not upload same file when before-read [\#2971](https://github.com/youzan/vant/pull/2971)
## [v1.6.9](https://github.com/youzan/vant/tree/v1.6.9) ### [v1.6.9](https://github.com/youzan/vant/tree/v1.6.9)
`2019-03-11` `2019-03-11`
**Improvements** **Improvements**
@ -191,7 +191,7 @@
- fix Swipe emit change event in correct time [\#2909](https://github.com/youzan/vant/pull/2909) - fix Swipe emit change event in correct time [\#2909](https://github.com/youzan/vant/pull/2909)
## [v1.6.8](https://github.com/youzan/vant/tree/v1.6.8) ### [v1.6.8](https://github.com/youzan/vant/tree/v1.6.8)
`2019-03-02` `2019-03-02`
**Improvements** **Improvements**
@ -207,7 +207,7 @@
- fix Tab scroll to correct position when use offset-top [\#2873](https://github.com/youzan/vant/pull/2873) - fix Tab scroll to correct position when use offset-top [\#2873](https://github.com/youzan/vant/pull/2873)
## [v1.6.7](https://github.com/youzan/vant/tree/v1.6.7) ### [v1.6.7](https://github.com/youzan/vant/tree/v1.6.7)
`2019-02-26` `2019-02-26`
**Improvements** **Improvements**
@ -226,7 +226,7 @@
- fix CouponList incorrectly render when disabled list empty [\#2845](https://github.com/youzan/vant/pull/2845) - fix CouponList incorrectly render when disabled list empty [\#2845](https://github.com/youzan/vant/pull/2845)
## [v1.6.6](https://github.com/youzan/vant/tree/v1.6.6) ### [v1.6.6](https://github.com/youzan/vant/tree/v1.6.6)
`2019-02-24` `2019-02-24`
**Improvements** **Improvements**
@ -247,7 +247,7 @@
- fix Tab wrong height when use line style tab inside card style tab [\#2825](https://github.com/youzan/vant/pull/2825) - fix Tab wrong height when use line style tab inside card style tab [\#2825](https://github.com/youzan/vant/pull/2825)
## [v1.6.5](https://github.com/youzan/vant/tree/v1.6.5) ### [v1.6.5](https://github.com/youzan/vant/tree/v1.6.5)
`2019-02-17` `2019-02-17`
**Improvements** **Improvements**
@ -265,7 +265,7 @@
- fix Panel v-slot now work [\#2752](https://github.com/youzan/vant/pull/2752) - fix Panel v-slot now work [\#2752](https://github.com/youzan/vant/pull/2752)
## [v1.6.4](https://github.com/youzan/vant/tree/v1.6.4) ### [v1.6.4](https://github.com/youzan/vant/tree/v1.6.4)
`2019-02-14` `2019-02-14`
**Bug Fixes** **Bug Fixes**
@ -273,7 +273,7 @@
- Sku: buy event incorrect triggered [\#2741](https://github.com/youzan/vant/pull/2741) - Sku: buy event incorrect triggered [\#2741](https://github.com/youzan/vant/pull/2741)
## [v1.6.3](https://github.com/youzan/vant/tree/v1.6.3) ### [v1.6.3](https://github.com/youzan/vant/tree/v1.6.3)
`2019-02-14` `2019-02-14`
**Improvements** **Improvements**
@ -295,7 +295,7 @@
- fix functional component multi listeners [\#2717](https://github.com/youzan/vant/pull/2717) - fix functional component multi listeners [\#2717](https://github.com/youzan/vant/pull/2717)
## [v1.6.2](https://github.com/youzan/vant/tree/v1.6.2) ### [v1.6.2](https://github.com/youzan/vant/tree/v1.6.2)
`2019-02-10` `2019-02-10`
**Improvements** **Improvements**
@ -316,7 +316,7 @@
- fix AddressList should hide radio of disabled item [\#2687](https://github.com/youzan/vant/pull/2687) - fix AddressList should hide radio of disabled item [\#2687](https://github.com/youzan/vant/pull/2687)
## [v1.6.1](https://github.com/youzan/vant/tree/v1.6.1) ### [v1.6.1](https://github.com/youzan/vant/tree/v1.6.1)
`2019-02-05` `2019-02-05`
**Improvements** **Improvements**
@ -324,7 +324,7 @@
- fix functional component can not inherit directives and native events. [\#2686](https://github.com/youzan/vant/pull/2686) - fix functional component can not inherit directives and native events. [\#2686](https://github.com/youzan/vant/pull/2686)
## [v1.6.0](https://github.com/youzan/vant/tree/v1.6.0) ### [v1.6.0](https://github.com/youzan/vant/tree/v1.6.0)
`2019-02-04` `2019-02-04`
**Breaking changes** **Breaking changes**
@ -352,7 +352,7 @@
- fix Popup get-container error when destoryed [\#2679](https://github.com/youzan/vant/pull/2679) - fix Popup get-container error when destoryed [\#2679](https://github.com/youzan/vant/pull/2679)
## [v1.5.7](https://github.com/youzan/vant/tree/v1.5.7) ### [v1.5.7](https://github.com/youzan/vant/tree/v1.5.7)
`2019-01-24` `2019-01-24`
**Improvements** **Improvements**
@ -375,7 +375,7 @@
- add pause-circle-o icon - add pause-circle-o icon
- Field: add click-left-icon event [\#2605](https://github.com/youzan/vant/pull/2605) - Field: add click-left-icon event [\#2605](https://github.com/youzan/vant/pull/2605)
## [v1.5.6](https://github.com/youzan/vant/tree/v1.5.6) ### [v1.5.6](https://github.com/youzan/vant/tree/v1.5.6)
`2019-01-22` `2019-01-22`
**Improvements** **Improvements**
@ -390,7 +390,7 @@
- fix Icon name not work when passing url [\#2585](https://github.com/youzan/vant/pull/2585) - fix Icon name not work when passing url [\#2585](https://github.com/youzan/vant/pull/2585)
## [v1.5.5](https://github.com/youzan/vant/tree/v1.5.5) ### [v1.5.5](https://github.com/youzan/vant/tree/v1.5.5)
`2019-01-21` `2019-01-21`
**Bug Fixes** **Bug Fixes**
@ -398,7 +398,7 @@
- fix Field type prop not work [\#2579](https://github.com/youzan/vant/pull/2579) - fix Field type prop not work [\#2579](https://github.com/youzan/vant/pull/2579)
## [v1.5.4](https://github.com/youzan/vant/tree/v1.5.4) ### [v1.5.4](https://github.com/youzan/vant/tree/v1.5.4)
`2019-01-20` `2019-01-20`
**Bug Fixes** **Bug Fixes**
@ -406,7 +406,7 @@
- fix missing dependencie @vue/babel-helper-vue-jsx-merge-props [\#2474](https://github.com/youzan/vant/issues/2474) - fix missing dependencie @vue/babel-helper-vue-jsx-merge-props [\#2474](https://github.com/youzan/vant/issues/2474)
## [v1.5.3](https://github.com/youzan/vant/tree/v1.5.3) ### [v1.5.3](https://github.com/youzan/vant/tree/v1.5.3)
`2019-01-20` `2019-01-20`
**Improvements** **Improvements**
@ -427,7 +427,7 @@
- fix Dialog action event [\#2571](https://github.com/youzan/vant/pull/2571) - fix Dialog action event [\#2571](https://github.com/youzan/vant/pull/2571)
## [v1.5.2](https://github.com/youzan/vant/tree/v1.5.2) ### [v1.5.2](https://github.com/youzan/vant/tree/v1.5.2)
`2019-01-10` `2019-01-10`
**Improvements** **Improvements**
@ -448,7 +448,7 @@
- fix Tab should not have line animation when inited [\#2459](https://github.com/youzan/vant/pull/2459) - fix Tab should not have line animation when inited [\#2459](https://github.com/youzan/vant/pull/2459)
## [v1.5.1](https://github.com/youzan/vant/tree/v1.5.1) ### [v1.5.1](https://github.com/youzan/vant/tree/v1.5.1)
`2019-01-01` `2019-01-01`
**Improvements** **Improvements**
@ -466,7 +466,7 @@
- fix Icon missing protocol [\#2385](https://github.com/youzan/vant/pull/2385) - fix Icon missing protocol [\#2385](https://github.com/youzan/vant/pull/2385)
## [v1.5.0](https://github.com/youzan/vant/tree/v1.5.0) ### [v1.5.0](https://github.com/youzan/vant/tree/v1.5.0)
`2018-12-22` `2018-12-22`
**Breaking changes** **Breaking changes**
@ -537,7 +537,7 @@ Also we have optimized the UI of the following components:
- fix compile failure in windows [\#2229](https://github.com/youzan/vant/pull/2229) - fix compile failure in windows [\#2229](https://github.com/youzan/vant/pull/2229)
## [v1.4.8](https://github.com/youzan/vant/tree/v1.4.8) ### [v1.4.8](https://github.com/youzan/vant/tree/v1.4.8)
`2018-12-05` `2018-12-05`
**Improvements** **Improvements**
@ -554,7 +554,7 @@ Also we have optimized the UI of the following components:
- fix ImagePreview indicator color [\#2187](https://github.com/youzan/vant/pull/2187) - fix ImagePreview indicator color [\#2187](https://github.com/youzan/vant/pull/2187)
## [v1.4.7](https://github.com/youzan/vant/tree/v1.4.7) ### [v1.4.7](https://github.com/youzan/vant/tree/v1.4.7)
`2018-11-27` `2018-11-27`
**Improvements** **Improvements**
@ -578,7 +578,7 @@ Also we have optimized the UI of the following components:
- fix DatetimePicker get wrong value when set minDate [\#2137](https://github.com/youzan/vant/pull/2137) - fix DatetimePicker get wrong value when set minDate [\#2137](https://github.com/youzan/vant/pull/2137)
## [v1.4.5](https://github.com/youzan/vant/tree/v1.4.5) ### [v1.4.5](https://github.com/youzan/vant/tree/v1.4.5)
`2018-11-23` `2018-11-23`
**Improvements** **Improvements**
@ -595,7 +595,7 @@ Also we have optimized the UI of the following components:
- fix Tab swipe-threshold not work when less than 4 [\#2128](https://github.com/youzan/vant/pull/2128) - fix Tab swipe-threshold not work when less than 4 [\#2128](https://github.com/youzan/vant/pull/2128)
## [v1.4.4](https://github.com/youzan/vant/tree/v1.4.4) ### [v1.4.4](https://github.com/youzan/vant/tree/v1.4.4)
`2018-11-18` `2018-11-18`
**Improvements** **Improvements**
@ -615,7 +615,7 @@ Also we have optimized the UI of the following components:
- fix Steps css selector priority [\#2072](https://github.com/youzan/vant/pull/2072) - fix Steps css selector priority [\#2072](https://github.com/youzan/vant/pull/2072)
## [v1.4.3](https://github.com/youzan/vant/tree/v1.4.3) ### [v1.4.3](https://github.com/youzan/vant/tree/v1.4.3)
`2018-11-10` `2018-11-10`
**Improvements** **Improvements**
@ -632,7 +632,7 @@ Also we have optimized the UI of the following components:
- fix Tab can swipe to disabled tab [\#2064](https://github.com/youzan/vant/pull/2064) - fix Tab can swipe to disabled tab [\#2064](https://github.com/youzan/vant/pull/2064)
## [v1.4.2](https://github.com/youzan/vant/tree/v1.4.2) ### [v1.4.2](https://github.com/youzan/vant/tree/v1.4.2)
`2018-11-04` `2018-11-04`
**Breaking changes** **Breaking changes**
@ -654,7 +654,7 @@ Also we have optimized the UI of the following components:
- Switch: add inactive-color prop [\#2013](https://github.com/youzan/vant/pull/2013) - Switch: add inactive-color prop [\#2013](https://github.com/youzan/vant/pull/2013)
## [v1.3.10](https://github.com/youzan/vant/tree/v1.3.10) ### [v1.3.10](https://github.com/youzan/vant/tree/v1.3.10)
`2018-10-29` `2018-10-29`
**Improvements** **Improvements**
@ -672,7 +672,7 @@ Also we have optimized the UI of the following components:
- fix Toast remove unclickable when destroyed [\#1991](https://github.com/youzan/vant/pull/1991) - fix Toast remove unclickable when destroyed [\#1991](https://github.com/youzan/vant/pull/1991)
## [v1.3.9](https://github.com/youzan/vant/tree/v1.3.9) ### [v1.3.9](https://github.com/youzan/vant/tree/v1.3.9)
`2018-10-24` `2018-10-24`
**Improvements** **Improvements**
@ -688,7 +688,7 @@ Also we have optimized the UI of the following components:
- fix Sku popup max-height [\#1965](https://github.com/youzan/vant/pull/1965) - fix Sku popup max-height [\#1965](https://github.com/youzan/vant/pull/1965)
## [v1.3.8](https://github.com/youzan/vant/tree/v1.3.8) ### [v1.3.8](https://github.com/youzan/vant/tree/v1.3.8)
`2018-10-17` `2018-10-17`
**Improvements** **Improvements**
@ -708,7 +708,7 @@ Also we have optimized the UI of the following components:
- fix SubmitBar incomplete button text display [\#1940](https://github.com/youzan/vant/pull/1940) - fix SubmitBar incomplete button text display [\#1940](https://github.com/youzan/vant/pull/1940)
## [v1.3.7](https://github.com/youzan/vant/tree/v1.3.7) ### [v1.3.7](https://github.com/youzan/vant/tree/v1.3.7)
`2018-10-12` `2018-10-12`
**Improvements** **Improvements**
@ -723,7 +723,7 @@ Also we have optimized the UI of the following components:
- fix SubmitBar tip color - fix SubmitBar tip color
## [v1.3.6](https://github.com/youzan/vant/tree/v1.3.6) ### [v1.3.6](https://github.com/youzan/vant/tree/v1.3.6)
`2018-10-11` `2018-10-11`
**Improvements** **Improvements**
@ -735,7 +735,7 @@ Also we have optimized the UI of the following components:
- fix Toast tap highlight color when unclickable [\#1914](https://github.com/youzan/vant/pull/1914) - fix Toast tap highlight color when unclickable [\#1914](https://github.com/youzan/vant/pull/1914)
## [v1.3.5](https://github.com/youzan/vant/tree/v1.3.5) ### [v1.3.5](https://github.com/youzan/vant/tree/v1.3.5)
`2018-10-10` `2018-10-10`
**Improvements** **Improvements**
@ -754,7 +754,7 @@ Also we have optimized the UI of the following components:
- fix Swipe multi finger [\#1890](https://github.com/youzan/vant/pull/1890) - fix Swipe multi finger [\#1890](https://github.com/youzan/vant/pull/1890)
## [v1.3.4](https://github.com/youzan/vant/tree/v1.3.4) ### [v1.3.4](https://github.com/youzan/vant/tree/v1.3.4)
`2018-10-02` `2018-10-02`
**Improvements** **Improvements**
@ -772,7 +772,7 @@ Also we have optimized the UI of the following components:
- fix Toast type definition [\#1859](https://github.com/youzan/vant/pull/1859) - fix Toast type definition [\#1859](https://github.com/youzan/vant/pull/1859)
## [v1.3.3](https://github.com/youzan/vant/tree/v1.3.3) ### [v1.3.3](https://github.com/youzan/vant/tree/v1.3.3)
`2018-09-23` `2018-09-23`
**Improvements** **Improvements**
@ -789,7 +789,7 @@ Also we have optimized the UI of the following components:
- fix Tag white border [\#1834](https://github.com/youzan/vant/pull/1834) - fix Tag white border [\#1834](https://github.com/youzan/vant/pull/1834)
## [v1.3.2](https://github.com/youzan/vant/tree/v1.3.2) ### [v1.3.2](https://github.com/youzan/vant/tree/v1.3.2)
`2018-09-14` `2018-09-14`
**Improvements** **Improvements**
@ -808,7 +808,7 @@ Also we have optimized the UI of the following components:
- fix Dialog type definition [\#1799](https://github.com/youzan/vant/pull/1799) - fix Dialog type definition [\#1799](https://github.com/youzan/vant/pull/1799)
## [v1.3.1](https://github.com/youzan/vant/tree/v1.3.1) ### [v1.3.1](https://github.com/youzan/vant/tree/v1.3.1)
`2018-09-07` `2018-09-07`
**Improvements** **Improvements**
@ -823,7 +823,7 @@ Also we have optimized the UI of the following components:
- fix lib dir babel runtime module [\#1753](https://github.com/youzan/vant/pull/1753) - fix lib dir babel runtime module [\#1753](https://github.com/youzan/vant/pull/1753)
## [v1.3.0](https://github.com/youzan/vant/tree/v1.3.0) ### [v1.3.0](https://github.com/youzan/vant/tree/v1.3.0)
`2018-08-31` `2018-08-31`
**Breaking changes** **Breaking changes**
@ -852,7 +852,7 @@ Also we have optimized the UI of the following components:
- fix Tabbar: info not work when use icon slot [\#1705](https://github.com/youzan/vant/pull/1705) - fix Tabbar: info not work when use icon slot [\#1705](https://github.com/youzan/vant/pull/1705)
## [v1.2.1](https://github.com/youzan/vant/tree/v1.2.1) ### [v1.2.1](https://github.com/youzan/vant/tree/v1.2.1)
`2018-08-24` `2018-08-24`
**Improvements** **Improvements**
@ -872,7 +872,7 @@ Also we have optimized the UI of the following components:
- fix Popup can not be destoryed when use get-container [\#1665](https://github.com/youzan/vant/pull/1665) - fix Popup can not be destoryed when use get-container [\#1665](https://github.com/youzan/vant/pull/1665)
## [v1.2.0](https://github.com/youzan/vant/tree/v1.2.0) ### [v1.2.0](https://github.com/youzan/vant/tree/v1.2.0)
`2018-08-20` `2018-08-20`
**Breaking changes** **Breaking changes**
@ -899,7 +899,7 @@ Also we have optimized the UI of the following components:
- fix AddressEdit show delete [\#1648](https://github.com/youzan/vant/pull/1648) - fix AddressEdit show delete [\#1648](https://github.com/youzan/vant/pull/1648)
- fix Icon size prop not work [\#1634](https://github.com/youzan/vant/pull/1634) - fix Icon size prop not work [\#1634](https://github.com/youzan/vant/pull/1634)
## [v1.1.16](https://github.com/youzan/vant/tree/v1.1.16) ### [v1.1.16](https://github.com/youzan/vant/tree/v1.1.16)
`2018-08-10` `2018-08-10`
**Improvements** **Improvements**
@ -915,7 +915,7 @@ Also we have optimized the UI of the following components:
- fix DatetimePicker value uncorrect when use formatter [\#1591](https://github.com/youzan/vant/pull/1591) - fix DatetimePicker value uncorrect when use formatter [\#1591](https://github.com/youzan/vant/pull/1591)
## [v1.1.15](https://github.com/youzan/vant/tree/v1.1.15) ### [v1.1.15](https://github.com/youzan/vant/tree/v1.1.15)
`2018-08-03` `2018-08-03`
**Improvements** **Improvements**
@ -936,7 +936,7 @@ Also we have optimized the UI of the following components:
- fix Tabbar should not trigger change event when active not change [\#1571](https://github.com/youzan/vant/pull/1571) - fix Tabbar should not trigger change event when active not change [\#1571](https://github.com/youzan/vant/pull/1571)
## [v1.1.14](https://github.com/youzan/vant/tree/v1.1.14) ### [v1.1.14](https://github.com/youzan/vant/tree/v1.1.14)
`2018-07-19` `2018-07-19`
**Improvements** **Improvements**
@ -957,7 +957,7 @@ Also we have optimized the UI of the following components:
- fix Tab sticky in scroll element [\#1496](https://github.com/youzan/vant/pull/1496) - fix Tab sticky in scroll element [\#1496](https://github.com/youzan/vant/pull/1496)
## [v1.1.13](https://github.com/youzan/vant/tree/v1.1.13) ### [v1.1.13](https://github.com/youzan/vant/tree/v1.1.13)
`2018-07-13` `2018-07-13`
**Improvements** **Improvements**
@ -977,7 +977,7 @@ Also we have optimized the UI of the following components:
- fix vue-lazyload version [\#1481](https://github.com/youzan/vant/pull/1481) - fix vue-lazyload version [\#1481](https://github.com/youzan/vant/pull/1481)
## [v1.1.12](https://github.com/youzan/vant/tree/v1.1.12) ### [v1.1.12](https://github.com/youzan/vant/tree/v1.1.12)
`2018-07-06` `2018-07-06`
**Improvements** **Improvements**
@ -996,7 +996,7 @@ Also we have optimized the UI of the following components:
- fix style missing dependencies [\#1426](https://github.com/youzan/vant/pull/1426) - fix style missing dependencies [\#1426](https://github.com/youzan/vant/pull/1426)
## [v1.1.11](https://github.com/youzan/vant/tree/v1.1.11) ### [v1.1.11](https://github.com/youzan/vant/tree/v1.1.11)
`2018-07-04` `2018-07-04`
**Improvements** **Improvements**
@ -1018,7 +1018,7 @@ Also we have optimized the UI of the following components:
- fix Tab insert order [\#1372](https://github.com/youzan/vant/pull/1372) - fix Tab insert order [\#1372](https://github.com/youzan/vant/pull/1372)
## [v1.1.10](https://github.com/youzan/vant/tree/v1.1.10) ### [v1.1.10](https://github.com/youzan/vant/tree/v1.1.10)
`2018-06-28` `2018-06-28`
**Breaking changes** **Breaking changes**
@ -1041,7 +1041,7 @@ Also we have optimized the UI of the following components:
- fix Sku image clip [\#1334](https://github.com/youzan/vant/pull/1334) - fix Sku image clip [\#1334](https://github.com/youzan/vant/pull/1334)
## [v1.1.9](https://github.com/youzan/vant/tree/v1.1.9) ### [v1.1.9](https://github.com/youzan/vant/tree/v1.1.9)
`2018-06-22` `2018-06-22`
**Improvements** **Improvements**
@ -1059,7 +1059,7 @@ Also we have optimized the UI of the following components:
- fix Tab line resize [\#1304](https://github.com/youzan/vant/pull/1304) - fix Tab line resize [\#1304](https://github.com/youzan/vant/pull/1304)
## [v1.1.8](https://github.com/youzan/vant/tree/v1.1.8) ### [v1.1.8](https://github.com/youzan/vant/tree/v1.1.8)
`2018-06-14` `2018-06-14`
**Improvements** **Improvements**
@ -1083,7 +1083,7 @@ Also we have optimized the UI of the following components:
- fix Tab resize line when title changed [\#1260](https://github.com/youzan/vant/pull/1260) - fix Tab resize line when title changed [\#1260](https://github.com/youzan/vant/pull/1260)
## [v1.1.7](https://github.com/youzan/vant/tree/v1.1.7) ### [v1.1.7](https://github.com/youzan/vant/tree/v1.1.7)
`2018-06-06` `2018-06-06`
**Improvements** **Improvements**
@ -1095,7 +1095,7 @@ Also we have optimized the UI of the following components:
- Document: add ts-import-plugin guide [\#1230](https://github.com/youzan/vant/pull/1230) - Document: add ts-import-plugin guide [\#1230](https://github.com/youzan/vant/pull/1230)
## [v1.1.6](https://github.com/youzan/vant/tree/v1.1.6) ### [v1.1.6](https://github.com/youzan/vant/tree/v1.1.6)
`2018-06-01` `2018-06-01`
**Improvements** **Improvements**
@ -1116,7 +1116,7 @@ Also we have optimized the UI of the following components:
## Changelog ## Changelog
## [v1.1.5](https://github.com/youzan/vant/tree/v1.1.5) ### [v1.1.5](https://github.com/youzan/vant/tree/v1.1.5)
`2018-05-24` `2018-05-24`
**Improvements** **Improvements**
@ -1138,7 +1138,7 @@ Also we have optimized the UI of the following components:
- fix Progress pivot cross border [\#1135](https://github.com/youzan/vant/pull/1135) - fix Progress pivot cross border [\#1135](https://github.com/youzan/vant/pull/1135)
## [v1.1.4](https://github.com/youzan/vant/tree/v1.1.4) ### [v1.1.4](https://github.com/youzan/vant/tree/v1.1.4)
`2018-05-18` `2018-05-18`
**Improvements** **Improvements**
@ -1159,7 +1159,7 @@ Also we have optimized the UI of the following components:
- fix icon style template [\#1091](https://github.com/youzan/vant/pull/1091) - fix icon style template [\#1091](https://github.com/youzan/vant/pull/1091)
## [v1.1.3](https://github.com/youzan/vant/tree/v1.1.3) ### [v1.1.3](https://github.com/youzan/vant/tree/v1.1.3)
`2018-05-12` `2018-05-12`
**Improvements** **Improvements**
@ -1179,7 +1179,7 @@ Also we have optimized the UI of the following components:
- fix ImagePreview can't be closed when contain single image [\#1046](https://github.com/youzan/vant/pull/1046) - fix ImagePreview can't be closed when contain single image [\#1046](https://github.com/youzan/vant/pull/1046)
## [v1.1.2](https://github.com/youzan/vant/tree/v1.1.2) ### [v1.1.2](https://github.com/youzan/vant/tree/v1.1.2)
`2018-05-08` `2018-05-08`
**Improvements** **Improvements**
@ -1199,7 +1199,7 @@ Also we have optimized the UI of the following components:
- fix Stepper integer wrong spelling [\#992](https://github.com/youzan/vant/pull/992) - fix Stepper integer wrong spelling [\#992](https://github.com/youzan/vant/pull/992)
## [v1.1.1](https://github.com/youzan/vant/tree/v1.1.1) ### [v1.1.1](https://github.com/youzan/vant/tree/v1.1.1)
`2018-05-04` `2018-05-04`
**Improvements** **Improvements**
@ -1218,7 +1218,7 @@ Also we have optimized the UI of the following components:
* fix Search incomplete text display in iOS [\#974](https://github.com/youzan/vant/pull/974) * fix Search incomplete text display in iOS [\#974](https://github.com/youzan/vant/pull/974)
## [v1.1.0](https://github.com/youzan/vant/tree/v1.1.0) ### [v1.1.0](https://github.com/youzan/vant/tree/v1.1.0)
`2018-04-25` `2018-04-25`
**Improvements** **Improvements**
@ -1244,7 +1244,7 @@ Also we have optimized the UI of the following components:
* fix Picker text adjust may cause option wrong offset [\#916](https://github.com/youzan/vant/pull/916) * fix Picker text adjust may cause option wrong offset [\#916](https://github.com/youzan/vant/pull/916)
## [v1.0.8](https://github.com/youzan/vant/tree/v1.0.8) ### [v1.0.8](https://github.com/youzan/vant/tree/v1.0.8)
`2018-04-20` `2018-04-20`
**Improvements** **Improvements**
@ -1257,14 +1257,14 @@ Also we have optimized the UI of the following components:
* Popup: fix lock scroll [\#891](https://github.com/youzan/vant/pull/891) * Popup: fix lock scroll [\#891](https://github.com/youzan/vant/pull/891)
## [v1.0.7](https://github.com/youzan/vant/tree/v1.0.7) ### [v1.0.7](https://github.com/youzan/vant/tree/v1.0.7)
`2018-04-17` `2018-04-17`
**Bug Fixes** **Bug Fixes**
* fix missing style entry in build result * fix missing style entry in build result
## [v1.0.6](https://github.com/youzan/vant/tree/v1.0.6) ### [v1.0.6](https://github.com/youzan/vant/tree/v1.0.6)
`2018-04-17` `2018-04-17`
**Improvements** **Improvements**
@ -1279,7 +1279,7 @@ Also we have optimized the UI of the following components:
* fix DatetimePicker change event params not correct [\#878](https://github.com/youzan/vant/pull/878) * fix DatetimePicker change event params not correct [\#878](https://github.com/youzan/vant/pull/878)
## [v1.0.5](https://github.com/youzan/vant/tree/v1.0.5) ### [v1.0.5](https://github.com/youzan/vant/tree/v1.0.5)
`2018-04-13` `2018-04-13`
**Improvements** **Improvements**
@ -1299,7 +1299,7 @@ Also we have optimized the UI of the following components:
* fix Swipe not stop touch event propagation [\#846](https://github.com/youzan/vant/pull/846) * fix Swipe not stop touch event propagation [\#846](https://github.com/youzan/vant/pull/846)
## [v1.0.4](https://github.com/youzan/vant/tree/v1.0.4) ### [v1.0.4](https://github.com/youzan/vant/tree/v1.0.4)
`2018-04-10` `2018-04-10`
**Improvements** **Improvements**
@ -1319,7 +1319,7 @@ Also we have optimized the UI of the following components:
* fix Sku row font-size [\#840](https://github.com/youzan/vant/pull/840) * fix Sku row font-size [\#840](https://github.com/youzan/vant/pull/840)
## [v1.0.3](https://github.com/youzan/vant/tree/v1.0.3) ### [v1.0.3](https://github.com/youzan/vant/tree/v1.0.3)
`2018-03-26` `2018-03-26`
**Improvements** **Improvements**
@ -1335,7 +1335,7 @@ Also we have optimized the UI of the following components:
* fix Toast mask not remove when hidden [\#762](https://github.com/youzan/vant/pull/762) * fix Toast mask not remove when hidden [\#762](https://github.com/youzan/vant/pull/762)
## [v1.0.2](https://github.com/youzan/vant/tree/v1.0.2) ### [v1.0.2](https://github.com/youzan/vant/tree/v1.0.2)
`2018-03-22` `2018-03-22`
**Improvements** **Improvements**
@ -1354,7 +1354,7 @@ Also we have optimized the UI of the following components:
* fix Tab content not clickable [\#749](https://github.com/youzan/vant/pull/749) * fix Tab content not clickable [\#749](https://github.com/youzan/vant/pull/749)
## [v1.0.1](https://github.com/youzan/vant/tree/v1.0.1) ### [v1.0.1](https://github.com/youzan/vant/tree/v1.0.1)
`2018-03-19` `2018-03-19`
**Bug Fixes** **Bug Fixes**
@ -1362,7 +1362,7 @@ Also we have optimized the UI of the following components:
* fix module circular dependency [\#728](https://github.com/youzan/vant/pull/728) * fix module circular dependency [\#728](https://github.com/youzan/vant/pull/728)
## [v1.0.0](https://github.com/youzan/vant/tree/v1.0.0) ### [v1.0.0](https://github.com/youzan/vant/tree/v1.0.0)
`2018-03-19` `2018-03-19`
**Breaking changes** **Breaking changes**
@ -1396,14 +1396,14 @@ Also we have optimized the UI of the following components:
* fix Sidebar info font weight when selected [\#687](https://github.com/youzan/vant/pull/687) * fix Sidebar info font weight when selected [\#687](https://github.com/youzan/vant/pull/687)
## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14) ### [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14)
`2018-03-09` `2018-03-09`
**Bug Fixes** **Bug Fixes**
* Area: should reset index when area list changed [\#678](https://github.com/youzan/vant/pull/678) * Area: should reset index when area list changed [\#678](https://github.com/youzan/vant/pull/678)
## [v0.12.13](https://github.com/youzan/vant/tree/v0.12.13) ### [v0.12.13](https://github.com/youzan/vant/tree/v0.12.13)
`2018-03-09` `2018-03-09`
**Improvements** **Improvements**
@ -1415,7 +1415,7 @@ Also we have optimized the UI of the following components:
* fix CouponList text max-width [\#675](https://github.com/youzan/vant/pull/675) * fix CouponList text max-width [\#675](https://github.com/youzan/vant/pull/675)
## [v0.12.12](https://github.com/youzan/vant/tree/v0.12.12) ### [v0.12.12](https://github.com/youzan/vant/tree/v0.12.12)
`2018-03-06` `2018-03-06`
**Improvements** **Improvements**
@ -1430,7 +1430,7 @@ Also we have optimized the UI of the following components:
* fix Swipe autoplay not stop when value set to 0 [\#660](https://github.com/youzan/vant/pull/660) * fix Swipe autoplay not stop when value set to 0 [\#660](https://github.com/youzan/vant/pull/660)
## [v0.12.11](https://github.com/youzan/vant/tree/v0.12.11) ### [v0.12.11](https://github.com/youzan/vant/tree/v0.12.11)
`2018-02-27` `2018-02-27`
**Improvements** **Improvements**
@ -1445,7 +1445,7 @@ Also we have optimized the UI of the following components:
* fix Button loading horizontal align [\#645](https://github.com/youzan/vant/pull/645) * fix Button loading horizontal align [\#645](https://github.com/youzan/vant/pull/645)
## [v0.12.10](https://github.com/youzan/vant/tree/v0.12.10) ### [v0.12.10](https://github.com/youzan/vant/tree/v0.12.10)
`2018-02-12` `2018-02-12`
**Improvements** **Improvements**
@ -1459,7 +1459,7 @@ Also we have optimized the UI of the following components:
* Stepper: change event error when clear input [\#635](https://github.com/youzan/vant/pull/635) * Stepper: change event error when clear input [\#635](https://github.com/youzan/vant/pull/635)
## [v0.12.9](https://github.com/youzan/vant/tree/v0.12.9) ### [v0.12.9](https://github.com/youzan/vant/tree/v0.12.9)
`2018-02-08` `2018-02-08`
**Improvements** **Improvements**
@ -1475,7 +1475,7 @@ Also we have optimized the UI of the following components:
* fix Sku message observation [\#627](https://github.com/youzan/vant/pull/627) * fix Sku message observation [\#627](https://github.com/youzan/vant/pull/627)
## [v0.12.8](https://github.com/youzan/vant/tree/v0.12.8) ### [v0.12.8](https://github.com/youzan/vant/tree/v0.12.8)
`2018-02-07` `2018-02-07`
**Improvements** **Improvements**
@ -1491,7 +1491,7 @@ Also we have optimized the UI of the following components:
* fix TreeSelect arrow position error [\#605](https://github.com/youzan/vant/pull/605) * fix TreeSelect arrow position error [\#605](https://github.com/youzan/vant/pull/605)
## [v0.12.7](https://github.com/youzan/vant/tree/v0.12.7) ### [v0.12.7](https://github.com/youzan/vant/tree/v0.12.7)
`2018-01-31` `2018-01-31`
**Improvements** **Improvements**
@ -1503,7 +1503,7 @@ Also we have optimized the UI of the following components:
**Bug Fixes** **Bug Fixes**
* fix Field multi line label style error [\#583](https://github.com/youzan/vant/pull/583) * fix Field multi line label style error [\#583](https://github.com/youzan/vant/pull/583)
## [v0.12.6](https://github.com/youzan/vant/tree/v0.12.6) ### [v0.12.6](https://github.com/youzan/vant/tree/v0.12.6)
`2018-01-25` `2018-01-25`
**Improvements** **Improvements**
@ -1518,7 +1518,7 @@ Also we have optimized the UI of the following components:
* fix Toast work break [\#567](https://github.com/youzan/vant/pull/567) * fix Toast work break [\#567](https://github.com/youzan/vant/pull/567)
* fix Tab active not work [\#572](https://github.com/youzan/vant/pull/572) * fix Tab active not work [\#572](https://github.com/youzan/vant/pull/572)
## [v0.12.5](https://github.com/youzan/vant/tree/v0.12.5) ### [v0.12.5](https://github.com/youzan/vant/tree/v0.12.5)
`2018-01-23` `2018-01-23`
**Improvements** **Improvements**
@ -1533,7 +1533,7 @@ Also we have optimized the UI of the following components:
* Cell: fix required style [\#553](https://github.com/youzan/vant/pull/553) * Cell: fix required style [\#553](https://github.com/youzan/vant/pull/553)
## [v0.12.4](https://github.com/youzan/vant/tree/v0.12.4) ### [v0.12.4](https://github.com/youzan/vant/tree/v0.12.4)
`2018-01-18` `2018-01-18`
**Improvements** **Improvements**
@ -1547,7 +1547,7 @@ Also we have optimized the UI of the following components:
* Stepper: not fire event on changing the value prop [\#546](https://github.com/youzan/vant/pull/546) * Stepper: not fire event on changing the value prop [\#546](https://github.com/youzan/vant/pull/546)
* Picker: fix misspelling of visibleItemCount prop [\#549](https://github.com/youzan/vant/pull/549) * Picker: fix misspelling of visibleItemCount prop [\#549](https://github.com/youzan/vant/pull/549)
## [v0.12.3](https://github.com/youzan/vant/tree/v0.12.3) ### [v0.12.3](https://github.com/youzan/vant/tree/v0.12.3)
`2018-01-12` `2018-01-12`
@ -1563,7 +1563,7 @@ Also we have optimized the UI of the following components:
* Picker: change event not triggered when click option [\#532](https://github.com/youzan/vant/pull/532) * Picker: change event not triggered when click option [\#532](https://github.com/youzan/vant/pull/532)
* PullRefresh: only triggered when drag in vertical direction [\#521](https://github.com/youzan/vant/pull/521) * PullRefresh: only triggered when drag in vertical direction [\#521](https://github.com/youzan/vant/pull/521)
## [v0.12.2](https://github.com/youzan/vant/tree/v0.12.2) ### [v0.12.2](https://github.com/youzan/vant/tree/v0.12.2)
`2018-01-08` `2018-01-08`
@ -1574,7 +1574,7 @@ Also we have optimized the UI of the following components:
* NoticeBar: should reinitialize when text changed [\#515](https://github.com/youzan/vant/pull/515) * NoticeBar: should reinitialize when text changed [\#515](https://github.com/youzan/vant/pull/515)
* AddressEdit: fix search result style error [\#514](https://github.com/youzan/vant/pull/514) * AddressEdit: fix search result style error [\#514](https://github.com/youzan/vant/pull/514)
## [v0.12.1](https://github.com/youzan/vant/tree/v0.12.1) ### [v0.12.1](https://github.com/youzan/vant/tree/v0.12.1)
`2018-01-05` `2018-01-05`
@ -1590,7 +1590,7 @@ Also we have optimized the UI of the following components:
* fix CouponList input style [\#502](https://github.com/youzan/vant/pull/502) * fix CouponList input style [\#502](https://github.com/youzan/vant/pull/502)
* fix Radio icon not clickable [\#505](https://github.com/youzan/vant/pull/505) * fix Radio icon not clickable [\#505](https://github.com/youzan/vant/pull/505)
## [v0.12.0](https://github.com/youzan/vant/tree/v0.12.0) ### [v0.12.0](https://github.com/youzan/vant/tree/v0.12.0)
`2017-12-29` `2017-12-29`
@ -1609,7 +1609,7 @@ Also we have optimized the UI of the following components:
* fix Tab height calc error when use sticky [\#493](https://github.com/youzan/vant/pull/493) * fix Tab height calc error when use sticky [\#493](https://github.com/youzan/vant/pull/493)
* fix Component should not inheritAttrs when use $attrs [\#488](https://github.com/youzan/vant/pull/488) * fix Component should not inheritAttrs when use $attrs [\#488](https://github.com/youzan/vant/pull/488)
## [v0.11.15](https://github.com/youzan/vant/tree/v0.11.15) ### [v0.11.15](https://github.com/youzan/vant/tree/v0.11.15)
`2017-12-25` `2017-12-25`
@ -1626,7 +1626,7 @@ Also we have optimized the UI of the following components:
* fix popup mixin should treat empty string as true for boolean props [\#468](https://github.com/youzan/vant/pull/468) * fix popup mixin should treat empty string as true for boolean props [\#468](https://github.com/youzan/vant/pull/468)
* fix package.json should include 'types' in 'files' field [\#462](https://github.com/youzan/vant/pull/462) * fix package.json should include 'types' in 'files' field [\#462](https://github.com/youzan/vant/pull/462)
## [v0.11.14](https://github.com/youzan/vant/tree/v0.11.14) ### [v0.11.14](https://github.com/youzan/vant/tree/v0.11.14)
`2017-12-21` `2017-12-21`
@ -1640,7 +1640,7 @@ Also we have optimized the UI of the following components:
* fix cell arrow style error * fix cell arrow style error
## [v0.11.13](https://github.com/youzan/vant/tree/v0.11.13) ### [v0.11.13](https://github.com/youzan/vant/tree/v0.11.13)
`2017-12-19` `2017-12-19`
@ -1657,7 +1657,7 @@ Also we have optimized the UI of the following components:
* fix GoodsAction display error in small screen [\#446](https://github.com/youzan/vant/pull/446) * fix GoodsAction display error in small screen [\#446](https://github.com/youzan/vant/pull/446)
## [v0.11.12](https://github.com/youzan/vant/tree/v0.11.12) ### [v0.11.12](https://github.com/youzan/vant/tree/v0.11.12)
`2017-12-15` `2017-12-15`
@ -1673,7 +1673,7 @@ Also we have optimized the UI of the following components:
* fix Picker bottom area not dragable [\#433](https://github.com/youzan/vant/pull/433) * fix Picker bottom area not dragable [\#433](https://github.com/youzan/vant/pull/433)
* fix PullRefresh head display error [\#436](https://github.com/youzan/vant/pull/436) * fix PullRefresh head display error [\#436](https://github.com/youzan/vant/pull/436)
## [v0.11.11](https://github.com/youzan/vant/tree/v0.11.11) ### [v0.11.11](https://github.com/youzan/vant/tree/v0.11.11)
`2017-12-13` `2017-12-13`
@ -1690,7 +1690,7 @@ Also we have optimized the UI of the following components:
* fix Checkbox disabled not work when inside CheckboxGroup [\#425](https://github.com/youzan/vant/pull/425) * fix Checkbox disabled not work when inside CheckboxGroup [\#425](https://github.com/youzan/vant/pull/425)
* fix AddressEdit searchResult type validate [\#417](https://github.com/youzan/vant/pull/417) * fix AddressEdit searchResult type validate [\#417](https://github.com/youzan/vant/pull/417)
## [v0.11.10](https://github.com/youzan/vant/tree/v0.11.10) ### [v0.11.10](https://github.com/youzan/vant/tree/v0.11.10)
`2017-12-12` `2017-12-12`
@ -1703,7 +1703,7 @@ Also we have optimized the UI of the following components:
* Icon: fix 'shopping-cart' icon not align center [\#415](https://github.com/youzan/vant/pull/415) * Icon: fix 'shopping-cart' icon not align center [\#415](https://github.com/youzan/vant/pull/415)
## [v0.11.9](https://github.com/youzan/vant/tree/v0.11.9) ### [v0.11.9](https://github.com/youzan/vant/tree/v0.11.9)
`2017-12-11` `2017-12-11`
@ -1717,7 +1717,7 @@ Also we have optimized the UI of the following components:
* fix raf error in SSR [\#405](https://github.com/youzan/vant/pull/405) * fix raf error in SSR [\#405](https://github.com/youzan/vant/pull/405)
* fix NoticeBar animationend event in old browser [\#402](https://github.com/youzan/vant/pull/402) * fix NoticeBar animationend event in old browser [\#402](https://github.com/youzan/vant/pull/402)
## [v0.11.8](https://github.com/youzan/vant/tree/v0.11.8) ### [v0.11.8](https://github.com/youzan/vant/tree/v0.11.8)
`2017-12-08` `2017-12-08`
@ -1731,7 +1731,7 @@ Also we have optimized the UI of the following components:
* Tab: hide scrollbar in mobile safari [\#390](https://github.com/youzan/vant/pull/390) * Tab: hide scrollbar in mobile safari [\#390](https://github.com/youzan/vant/pull/390)
* Tab: active tab should keep center when scrollable [\#394](https://github.com/youzan/vant/pull/394) * Tab: active tab should keep center when scrollable [\#394](https://github.com/youzan/vant/pull/394)
## [v0.11.7](https://github.com/youzan/vant/tree/v0.11.7) ### [v0.11.7](https://github.com/youzan/vant/tree/v0.11.7)
`2017-12-07` `2017-12-07`
@ -1743,7 +1743,7 @@ Also we have optimized the UI of the following components:
* fix Tab initail tab position [\#389](https://github.com/youzan/vant/pull/389) [chenjiahan](https://github.com/chenjiahan) * fix Tab initail tab position [\#389](https://github.com/youzan/vant/pull/389) [chenjiahan](https://github.com/chenjiahan)
## [v0.11.6](https://github.com/youzan/vant/tree/v0.11.6) ### [v0.11.6](https://github.com/youzan/vant/tree/v0.11.6)
`2017-12-07` `2017-12-07`
@ -1761,7 +1761,7 @@ Also we have optimized the UI of the following components:
* fix Sku button border radius [\#378](https://github.com/youzan/vant/pull/378) * fix Sku button border radius [\#378](https://github.com/youzan/vant/pull/378)
* fix Radio & Checkbox disabled color [\#383](https://github.com/youzan/vant/pull/383) * fix Radio & Checkbox disabled color [\#383](https://github.com/youzan/vant/pull/383)
## [v0.11.5](https://github.com/youzan/vant/tree/v0.11.5) ### [v0.11.5](https://github.com/youzan/vant/tree/v0.11.5)
`2017-12-04` `2017-12-04`
@ -1775,7 +1775,7 @@ Also we have optimized the UI of the following components:
* fix Tab active block disappeared when delete tab [\#372](https://github.com/youzan/vant/pull/372) * fix Tab active block disappeared when delete tab [\#372](https://github.com/youzan/vant/pull/372)
## [v0.11.4](https://github.com/youzan/vant/tree/v0.11.4) ### [v0.11.4](https://github.com/youzan/vant/tree/v0.11.4)
`2017-11-30` `2017-11-30`
@ -1784,7 +1784,7 @@ Also we have optimized the UI of the following components:
* add type definition files [\#361](https://github.com/youzan/vant/pull/361) * add type definition files [\#361](https://github.com/youzan/vant/pull/361)
* support use this.$toast/$dialog to call Toast/Dialog [\#363](https://github.com/youzan/vant/pull/363) * support use this.$toast/$dialog to call Toast/Dialog [\#363](https://github.com/youzan/vant/pull/363)
## [v0.11.3](https://github.com/youzan/vant/tree/v0.11.3) ### [v0.11.3](https://github.com/youzan/vant/tree/v0.11.3)
`2017-11-28` `2017-11-28`
@ -1798,7 +1798,7 @@ Also we have optimized the UI of the following components:
* Uploader: support inherit attrs [\#357](https://github.com/youzan/vant/pull/357) * Uploader: support inherit attrs [\#357](https://github.com/youzan/vant/pull/357)
* optimize local compile speed [\#355](https://github.com/youzan/vant/pull/355) * optimize local compile speed [\#355](https://github.com/youzan/vant/pull/355)
## [v0.11.2](https://github.com/youzan/vant/tree/v0.11.2) ### [v0.11.2](https://github.com/youzan/vant/tree/v0.11.2)
`2017-11-24` `2017-11-24`
@ -1806,7 +1806,7 @@ Also we have optimized the UI of the following components:
* Icon: add seven new icons [\#351](https://github.com/youzan/vant/pull/351) * Icon: add seven new icons [\#351](https://github.com/youzan/vant/pull/351)
## [v0.11.1](https://github.com/youzan/vant/tree/v0.11.1) ### [v0.11.1](https://github.com/youzan/vant/tree/v0.11.1)
`2017-11-24` `2017-11-24`
@ -1827,7 +1827,7 @@ Also we have optimized the UI of the following components:
* fix some bugs in SSR [\#344](https://github.com/youzan/vant/pull/344) * fix some bugs in SSR [\#344](https://github.com/youzan/vant/pull/344)
* fix DateTimePicker crashed when pass invalid props [\#333](https://github.com/youzan/vant/pull/333) * fix DateTimePicker crashed when pass invalid props [\#333](https://github.com/youzan/vant/pull/333)
## [v0.11.0](https://github.com/youzan/vant/tree/v0.11.0) ### [v0.11.0](https://github.com/youzan/vant/tree/v0.11.0)
`2017-11-17` `2017-11-17`
@ -1843,7 +1843,7 @@ Also we have optimized the UI of the following components:
* add Internationalization document [\#321](https://github.com/youzan/vant/pull/321) * add Internationalization document [\#321](https://github.com/youzan/vant/pull/321)
* Icon: add-o icon add radius [\#326](https://github.com/youzan/vant/pull/326) * Icon: add-o icon add radius [\#326](https://github.com/youzan/vant/pull/326)
## [v0.10.9](https://github.com/youzan/vant/tree/v0.10.9) ### [v0.10.9](https://github.com/youzan/vant/tree/v0.10.9)
`2017-11-15` `2017-11-15`
@ -1855,7 +1855,7 @@ Also we have optimized the UI of the following components:
* Search: fix box-sizing [\#312](https://github.com/youzan/vant/pull/312) * Search: fix box-sizing [\#312](https://github.com/youzan/vant/pull/312)
## [v0.10.8](https://github.com/youzan/vant/tree/v0.10.8) ### [v0.10.8](https://github.com/youzan/vant/tree/v0.10.8)
`2017-11-11` `2017-11-11`
@ -1873,7 +1873,7 @@ Also we have optimized the UI of the following components:
* fix npm run dist errors in windows [\#301](https://github.com/youzan/vant/pull/301) * fix npm run dist errors in windows [\#301](https://github.com/youzan/vant/pull/301)
## [v0.10.7](https://github.com/youzan/vant/tree/v0.10.7) ### [v0.10.7](https://github.com/youzan/vant/tree/v0.10.7)
`2017-11-08` `2017-11-08`
@ -1887,7 +1887,7 @@ Also we have optimized the UI of the following components:
* fix Sku scroll lock [\#291](https://github.com/youzan/vant/pull/291) * fix Sku scroll lock [\#291](https://github.com/youzan/vant/pull/291)
* fix Steps style error when has more than 4 items [\#287](https://github.com/youzan/vant/pull/287) * fix Steps style error when has more than 4 items [\#287](https://github.com/youzan/vant/pull/287)
## [v0.10.6](https://github.com/youzan/vant/tree/v0.10.6) ### [v0.10.6](https://github.com/youzan/vant/tree/v0.10.6)
`2017-11-06` `2017-11-06`
@ -1901,7 +1901,7 @@ Also we have optimized the UI of the following components:
* fix Tab dynamic generate bug [\#284](https://github.com/youzan/vant/pull/284) * fix Tab dynamic generate bug [\#284](https://github.com/youzan/vant/pull/284)
* fix NoticeBar text disappeared when page back [\#280](https://github.com/youzan/vant/pull/280) * fix NoticeBar text disappeared when page back [\#280](https://github.com/youzan/vant/pull/280)
## [v0.10.5](https://github.com/youzan/vant/tree/v0.10.5) ### [v0.10.5](https://github.com/youzan/vant/tree/v0.10.5)
`2017-10-30` `2017-10-30`
@ -1914,7 +1914,7 @@ Also we have optimized the UI of the following components:
* fix Tabbar info display when use icon slot [\#269](https://github.com/youzan/vant/pull/269) * fix Tabbar info display when use icon slot [\#269](https://github.com/youzan/vant/pull/269)
* fix Uploader input type [\#265](https://github.com/youzan/vant/pull/265) * fix Uploader input type [\#265](https://github.com/youzan/vant/pull/265)
## [v0.10.4](https://github.com/youzan/vant/tree/v0.10.4) ### [v0.10.4](https://github.com/youzan/vant/tree/v0.10.4)
`2017-10-26` `2017-10-26`
@ -1931,7 +1931,7 @@ Also we have optimized the UI of the following components:
* fix PullRefreash scroll bug when parent is scrollable [\#247](https://github.com/youzan/vant/pull/247) * fix PullRefreash scroll bug when parent is scrollable [\#247](https://github.com/youzan/vant/pull/247)
* fix CouponList empty info display bug [\#246](https://github.com/youzan/vant/pull/246) * fix CouponList empty info display bug [\#246](https://github.com/youzan/vant/pull/246)
## [v0.10.3](https://github.com/youzan/vant/tree/v0.10.3) ### [v0.10.3](https://github.com/youzan/vant/tree/v0.10.3)
`2017-10-25` `2017-10-25`
@ -1949,7 +1949,7 @@ Also we have optimized the UI of the following components:
* fix popup style missing when build style entry [\#231](https://github.com/youzan/vant/pull/231) * fix popup style missing when build style entry [\#231](https://github.com/youzan/vant/pull/231)
* fix PullRefresh touchcancel event [\#239](https://github.com/youzan/vant/pull/239) * fix PullRefresh touchcancel event [\#239](https://github.com/youzan/vant/pull/239)
## [v0.10.2](https://github.com/youzan/vant/tree/v0.10.2) ### [v0.10.2](https://github.com/youzan/vant/tree/v0.10.2)
`2017-10-20` `2017-10-20`
@ -1962,7 +1962,7 @@ Also we have optimized the UI of the following components:
* Optimize component dependency analyze when build style entry [\#224](https://github.com/youzan/vant/pull/224) * Optimize component dependency analyze when build style entry [\#224](https://github.com/youzan/vant/pull/224)
## [v0.10.1](https://github.com/youzan/vant/tree/v0.10.1) ### [v0.10.1](https://github.com/youzan/vant/tree/v0.10.1)
`2017-10-18` `2017-10-18`
@ -1980,7 +1980,7 @@ Also we have optimized the UI of the following components:
* fix Popup modal can not display in some cases [\#211](https://github.com/youzan/vant/pull/211) * fix Popup modal can not display in some cases [\#211](https://github.com/youzan/vant/pull/211)
* fix Waterfall repeated event bind * fix Waterfall repeated event bind
## [v0.10.0](https://github.com/youzan/vant/tree/v0.10.0) ### [v0.10.0](https://github.com/youzan/vant/tree/v0.10.0)
`2017-10-13` `2017-10-13`
@ -2001,7 +2001,7 @@ Also we have optimized the UI of the following components:
* fix ImagePreview beating bug when loading image [\#201](https://github.com/youzan/vant/pull/201) * fix ImagePreview beating bug when loading image [\#201](https://github.com/youzan/vant/pull/201)
* fix Field height error when type is textarea and display none [\#181](https://github.com/youzan/vant/issues/181) * fix Field height error when type is textarea and display none [\#181](https://github.com/youzan/vant/issues/181)
## [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12) ### [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12)
`2017-10-11` `2017-10-11`
@ -2009,7 +2009,7 @@ Also we have optimized the UI of the following components:
* fix Search style bug [\#191](https://github.com/youzan/vant/pull/191) * fix Search style bug [\#191](https://github.com/youzan/vant/pull/191)
## [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11) ### [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
`2017-10-11` `2017-10-11`
@ -2023,7 +2023,7 @@ Also we have optimized the UI of the following components:
* fix Field textarea wrong height when display none [\#188](https://github.com/youzan/vant/pull/188) * fix Field textarea wrong height when display none [\#188](https://github.com/youzan/vant/pull/188)
* fix compile error in windows [\#185](https://github.com/youzan/vant/pull/182) * fix compile error in windows [\#185](https://github.com/youzan/vant/pull/182)
## [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10) ### [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
`2017-10-09` `2017-10-09`
@ -2046,7 +2046,7 @@ Also we have optimized the UI of the following components:
* fix npm run dev error in MacOS [\#152](https://github.com/youzan/vant/issues/152) * fix npm run dev error in MacOS [\#152](https://github.com/youzan/vant/issues/152)
* fix document router not work in some browsers [\#158](https://github.com/youzan/vant/pull/158) * fix document router not work in some browsers [\#158](https://github.com/youzan/vant/pull/158)
## [v0.9.9](https://github.com/youzan/vant/tree/v0.9.9) ### [v0.9.9](https://github.com/youzan/vant/tree/v0.9.9)
`2017-09-26` `2017-09-26`
@ -2059,7 +2059,7 @@ Also we have optimized the UI of the following components:
* fix license error in packages.json [\#144](https://github.com/youzan/vant/pull/144) * fix license error in packages.json [\#144](https://github.com/youzan/vant/pull/144)
* fix Waterfall scroll bug [\#145](https://github.com/youzan/vant/pull/145) * fix Waterfall scroll bug [\#145](https://github.com/youzan/vant/pull/145)
## [v0.9.8](https://github.com/youzan/vant/tree/v0.9.8) ### [v0.9.8](https://github.com/youzan/vant/tree/v0.9.8)
`2017-09-24` `2017-09-24`
@ -2072,7 +2072,7 @@ Also we have optimized the UI of the following components:
* fix Sku message render bug [\#142](https://github.com/youzan/vant/pull/142) * fix Sku message render bug [\#142](https://github.com/youzan/vant/pull/142)
## [v0.9.7](https://github.com/youzan/vant/tree/v0.9.7) ### [v0.9.7](https://github.com/youzan/vant/tree/v0.9.7)
`2017-09-21` `2017-09-21`

File diff suppressed because it is too large Load Diff

View File

@ -1,4 +1,6 @@
## 开发指南 # 开发指南
### 介绍
首先感谢你使用 Vant。 首先感谢你使用 Vant。
@ -90,55 +92,3 @@ packages
├─ index.js # 所有组件入口 ├─ index.js # 所有组件入口
└─ index.less # 所有组件样式 └─ index.less # 所有组件样式
``` ```
### 组件文档
组件文档采用 markdown 格式,内容包括使用示例以及 `API` 等。
##### 1. 标题规范
文档标题从 `h2`(即 `##` 标题 )开始,每往下一级多加一个 `#` 号。
##### 2. 组件描述
大标题下面是对组件的一句话简要描述。
##### 3. 使用指南
如果组件需要使用指南,放在组件描述下方,另起一个二级标题。
##### 4. 代码演示
书写代码演示时,建议从简单用法开始介绍,不要上来就同时使用一大堆 API会让人觉得难以上手。并且一个示例只演示一个 API 的使用方法,如无特殊需求不要在一个示例中同时演示多个 API 混合使用。
```html
<van-button :size="size">
Large
</van-button>
```
```javascript
export default {
data() {
return {
size: 'large'
};
}
};
```
#### 5. API 说明
组件的 API 说明以表格的形式书写,表格包含以下列:
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | ------------- | -------- | ---------- |
| visible | 是否可见 | `Boolean` | `false` |
#### 6. Event 说明
组件的 Event 说明,请以表格的形式书写,表格包含以下列:
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| click | 点击按钮时触发 | event事件对象 |

View File

@ -1,4 +1,6 @@
## 设计资源 # 设计资源
### 介绍
这里提供了 Vant 现有的设计资源,更多资源还在整理中。 这里提供了 Vant 现有的设计资源,更多资源还在整理中。

View File

@ -1,9 +1,11 @@
<div class="van-doc-intro"> <div class="card">
<img class="van-doc-intro__logo" src="//img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png"> <div class="van-doc-intro">
<h2>Vant</h2> <img class="van-doc-intro__logo" src="//img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png">
<p>Mobile UI Components built on Vue</p> <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
<p>Mobile UI Components built on Vue</p>
</div>
</div> </div>
### Features ### Features
* 50+ Reusable components * 50+ Reusable components

View File

@ -1,7 +1,9 @@
<div class="van-doc-intro"> <div class="card">
<img class="van-doc-intro__logo" src="//img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png"> <div class="van-doc-intro">
<h2>Vant</h2> <img class="van-doc-intro__logo" src="//img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png">
<p>轻量、可靠的移动端 Vue 组件库</p> <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
<p>轻量、可靠的移动端 Vue 组件库</p>
</div>
</div> </div>
### 特性 ### 特性

View File

@ -1,4 +1,4 @@
## Quickstart # Quickstart
### Starter kit ### Starter kit

View File

@ -1,4 +1,4 @@
## 快速上手 # 快速上手
### 脚手架 ### 脚手架

View File

@ -1,4 +1,6 @@
## 风格指南 # 风格指南
### 介绍
在参与 Vant 开发时,请遵守约定的单文件组件风格指南,指南内容节选自 [Vue 官方风格指南](https://cn.vuejs.org/v2/style-guide) 在参与 Vant 开发时,请遵守约定的单文件组件风格指南,指南内容节选自 [Vue 官方风格指南](https://cn.vuejs.org/v2/style-guide)

View File

@ -1,4 +1,6 @@
## Custom Theme # Custom Theme
### Intro
`Vant` provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods: `Vant` provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:

View File

@ -1,6 +1,8 @@
## 定制主题 # 定制主题
`Vant`提供了一套默认主题CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以使用下面的方法: ### 介绍
`Vant`提供了一套默认主题CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以使用下面提供的方法
### 示例工程 ### 示例工程

View File

@ -48,7 +48,7 @@ export default {
<style lang="less"> <style lang="less">
.van-doc-intro { .van-doc-intro {
padding-top: 40px; padding-top: 20px;
font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
text-align: center; text-align: center;
@ -57,15 +57,8 @@ export default {
height: 120px; height: 120px;
} }
h2 {
font-weight: normal;
font-size: 36px;
line-height: 60px;
}
p { p {
color: #455a64; margin-bottom: 20px;
font-size: 15px;
} }
} }
</style> </style>

View File

@ -4,7 +4,6 @@
v-show="title" v-show="title"
class="van-doc-nav-bar" class="van-doc-nav-bar"
:title="title" :title="title"
:border="false"
:left-arrow="showNav" :left-arrow="showNav"
@click-left="onBack" @click-left="onBack"
> >
@ -71,7 +70,7 @@ body {
color: @text-color; color: @text-color;
font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif; font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
line-height: 1; line-height: 1;
background-color: #f2f3f5; background-color: #f8f8f8;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

View File

@ -11,8 +11,6 @@ module.exports = {
href: '#/' href: '#/'
}, },
nav: { nav: {
'Vue 组件': 'https://youzan.github.io/vant/',
'小程序组件': 'https://youzan.github.io/vant-weapp/',
lang: { lang: {
text: 'En', text: 'En',
from: 'zh-CN', from: 'zh-CN',

View File

@ -70,17 +70,17 @@
"@babel/polyfill": "^7.4.4", "@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.4", "@babel/preset-env": "^7.4.4",
"@babel/preset-typescript": "^7.3.3", "@babel/preset-typescript": "^7.3.3",
"@types/jest": "^24.0.12", "@types/jest": "^24.0.13",
"@vant/doc": "^1.0.26", "@vant/doc": "^2.0.0",
"@vant/eslint-config": "^1.1.2", "@vant/eslint-config": "^1.1.2",
"@vant/markdown-loader": "^1.0.3", "@vant/markdown-loader": "^2.0.0",
"@vue/babel-preset-jsx": "^1.0.0", "@vue/babel-preset-jsx": "^1.0.0",
"@vue/server-test-utils": "^1.0.0-beta.29", "@vue/server-test-utils": "^1.0.0-beta.29",
"@vue/test-utils": "^1.0.0-beta.29", "@vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^9.5.1", "autoprefixer": "^9.5.1",
"babel-jest": "^24.8.0", "babel-jest": "^24.8.0",
"babel-loader": "^8.0.4", "babel-loader": "^8.0.6",
"codecov": "^3.3.0", "codecov": "^3.5.0",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"css-loader": "^2.1.1", "css-loader": "^2.1.1",
"csso": "^3.5.1", "csso": "^3.5.1",
@ -89,12 +89,12 @@
"fast-glob": "^2.2.4", "fast-glob": "^2.2.4",
"gh-pages": "^2.0.1", "gh-pages": "^2.0.1",
"html-webpack-plugin": "3.2.0", "html-webpack-plugin": "3.2.0",
"husky": "^2.2.0", "husky": "^2.3.0",
"jest": "^24.8.0", "jest": "^24.8.0",
"jest-serializer-vue": "^2.0.2", "jest-serializer-vue": "^2.0.2",
"less": "^3.8.1", "less": "^3.8.1",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"lint-staged": "^8.1.6", "lint-staged": "^8.1.7",
"markdown-vetur": "0.0.5", "markdown-vetur": "0.0.5",
"postcss": "^7.0.16", "postcss": "^7.0.16",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
@ -117,7 +117,7 @@
"vue-server-renderer": "^2.6.10", "vue-server-renderer": "^2.6.10",
"vue-template-compiler": "2.6.10", "vue-template-compiler": "2.6.10",
"vue-template-es2015-compiler": "^1.9.1", "vue-template-es2015-compiler": "^1.9.1",
"webpack": "^4.30.0", "webpack": "^4.31.0",
"webpack-cli": "^3.3.2", "webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1" "webpack-dev-server": "^3.3.1"
}, },

View File

@ -1,4 +1,4 @@
## ActionSheet # ActionSheet
### Install ### Install
``` javascript ``` javascript
@ -7,9 +7,9 @@ import { ActionSheet } from 'vant';
Vue.use(ActionSheet); Vue.use(ActionSheet);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
Use `actions` prop to set options of action-sheet. Use `actions` prop to set options of action-sheet.
@ -43,7 +43,7 @@ export default {
} }
``` ```
#### Status ### Status
```html ```html
<van-action-sheet <van-action-sheet
@ -67,7 +67,7 @@ export default {
} }
``` ```
#### ActionSheet with cancel button ### ActionSheet with cancel button
```html ```html
<van-action-sheet <van-action-sheet
@ -79,7 +79,7 @@ export default {
/> />
``` ```
#### ActionSheet with title ### ActionSheet with title
```html ```html
<van-action-sheet v-model="show" title="Title"> <van-action-sheet v-model="show" title="Title">
@ -87,6 +87,8 @@ export default {
</van-action-sheet> </van-action-sheet>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,15 @@
## ActionSheet 上拉菜单 # ActionSheet 上拉菜单
### 使用指南 ### 引入
``` javascript ``` javascript
import { ActionSheet } from 'vant'; import { ActionSheet } from 'vant';
Vue.use(ActionSheet); Vue.use(ActionSheet);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
`ActionSheet`通过`actions`数组来定义展示的选项,数组的每一项是一个对象,对象属性见文档下方表格。 `ActionSheet`通过`actions`数组来定义展示的选项,数组的每一项是一个对象,对象属性见文档下方表格。
@ -44,7 +44,7 @@ export default {
} }
``` ```
#### 选项状态 ### 选项状态
选项可以设置为加载状态或禁用状态 选项可以设置为加载状态或禁用状态
@ -70,7 +70,7 @@ export default {
} }
``` ```
#### 展示取消按钮 ### 展示取消按钮
设置`cancelText`属性后,会在底部展示取消按钮,点击后关闭当前菜单 设置`cancelText`属性后,会在底部展示取消按钮,点击后关闭当前菜单
@ -84,7 +84,7 @@ export default {
/> />
``` ```
#### 展示标题栏 ### 展示标题栏
通过设置`title`属性展示标题栏,同时可以使用插槽自定义菜单内容 通过设置`title`属性展示标题栏,同时可以使用插槽自定义菜单内容
@ -94,6 +94,8 @@ export default {
</van-action-sheet> </van-action-sheet>
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## AddressEdit # AddressEdit
### Install ### Install
@ -8,9 +8,9 @@ import { AddressEdit } from 'vant';
Vue.use(AddressEdit); Vue.use(AddressEdit);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-address-edit <van-address-edit
@ -56,6 +56,7 @@ export default {
} }
``` ```
## API
### Props ### Props
@ -102,9 +103,8 @@ Use ref to get address-edit instance and call instance methods
|------|------|------|------| |------|------|------|------|
| setAddressDetail | addressDetail: string | - | Set address detail | | setAddressDetail | addressDetail: string | - | Set address detail |
### Data Structure ### addressInfo Data Structure
#### addressInfo Data Structure
| key | Description | Type | | key | Description | Type |
|------|------|------| |------|------|------|
| id | Address Id | `String | Number` | | id | Address Id | `String | Number` |
@ -118,11 +118,13 @@ Use ref to get address-edit instance and call instance methods
| postalCode | Postal code | `String` | | postalCode | Postal code | `String` |
| isDefault | Is default address | `Boolean` | | isDefault | Is default address | `Boolean` |
#### searchResult Data Structure ### searchResult Data Structure
| key | Description | Type | | key | Description | Type |
|------|------|------| |------|------|------|
| name | Name | `String` | | name | Name | `String` |
| address | Address | `String` | | address | Address | `String` |
#### Area Data Structure ### Area Data Structure
Please refer to [Area](#/en-US/area) component。 Please refer to [Area](#/en-US/area) component。

View File

@ -1,15 +1,15 @@
## AddressEdit 地址编辑 # AddressEdit 地址编辑
### 使用指南 ### 引入
``` javascript ``` javascript
import { AddressEdit } from 'vant'; import { AddressEdit } from 'vant';
Vue.use(AddressEdit); Vue.use(AddressEdit);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<van-address-edit <van-address-edit
@ -55,6 +55,8 @@ export default {
} }
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
@ -100,9 +102,7 @@ export default {
|------|------|------|------| |------|------|------|------|
| setAddressDetail | addressDetail: string | - | 设置详细地址 | | setAddressDetail | addressDetail: string | - | 设置详细地址 |
### 数据格式 ### addressInfo 数据格式
#### addressInfo 数据格式
注意addressInfo 仅作为初始值传入,表单最终内容可以在 save 事件中获取 注意addressInfo 仅作为初始值传入,表单最终内容可以在 save 事件中获取
@ -119,13 +119,13 @@ export default {
| postalCode | 邮政编码 | `String` | | postalCode | 邮政编码 | `String` |
| isDefault | 是否为默认地址 | `Boolean` | | isDefault | 是否为默认地址 | `Boolean` |
#### searchResult 数据格式 ### searchResult 数据格式
| key | 说明 | 类型 | | key | 说明 | 类型 |
|------|------|------| |------|------|------|
| name | 地名 | `String` | | name | 地名 | `String` |
| address | 详细地址 | `String` | | address | 详细地址 | `String` |
#### 省市县列表数据格式 ### 省市县列表数据格式
请参考 [Area](#/zh-CN/area) 组件。 请参考 [Area](#/zh-CN/area) 组件。

View File

@ -1,4 +1,4 @@
## AddressList # AddressList
### Install ### Install
``` javascript ``` javascript
@ -7,9 +7,9 @@ import { AddressList } from 'vant';
Vue.use(AddressList); Vue.use(AddressList);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-address-list <van-address-list
@ -63,6 +63,8 @@ export default {
} }
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,15 @@
## AddressList 地址列表 # AddressList 地址列表
### 使用指南 ### 引入
``` javascript ``` javascript
import { AddressList } from 'vant'; import { AddressList } from 'vant';
Vue.use(AddressList); Vue.use(AddressList);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<van-address-list <van-address-list
@ -64,6 +64,7 @@ export default {
} }
``` ```
## API
### Props ### Props
@ -86,9 +87,7 @@ export default {
| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象index: 索引 | 1.3.0 | | edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象index: 索引 | 1.3.0 |
| select-disabled | 选中不可配送的地址时触发 | item: 地址对象index: 索引 | 1.3.0 | | select-disabled | 选中不可配送的地址时触发 | item: 地址对象index: 索引 | 1.3.0 |
### 数据格式 ### 地址列表字段说明
#### 地址列表字段说明
| key | 说明 | 类型 | | key | 说明 | 类型 |
|------|------|------| |------|------|------|

View File

@ -1,4 +1,7 @@
## Area # Area
### Intro
The Picker component is usually used with [Popup](#/en-US/popup) Component. The Picker component is usually used with [Popup](#/en-US/popup) Component.
### Install ### Install
@ -9,9 +12,9 @@ import { Area } from 'vant';
Vue.use(Area); Vue.use(Area);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
To initailize `Area` component, `area-list` property is required. Data structure will be introduced later. To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
@ -19,7 +22,7 @@ To initailize `Area` component, `area-list` property is required. Data structure
<van-area :area-list="areaList" /> <van-area :area-list="areaList" />
``` ```
#### Initial Value ### Initial Value
To have a selected valuesimply pass the `code` of target area to `value` property. To have a selected valuesimply pass the `code` of target area to `value` property.
@ -27,7 +30,7 @@ To have a selected valuesimply pass the `code` of target area to `value` prop
<van-area :area-list="areaList" value="110101" /> <van-area :area-list="areaList" value="110101" />
``` ```
#### Columns Number ### Columns Number
`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. `columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
Set `columns-num` with 2, you'll have a 2 level picker. Set `columns-num` with 2, you'll have a 2 level picker.
@ -36,6 +39,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
<van-area :area-list="areaList" :columns-num="2" title="Title" /> <van-area :area-list="areaList" :columns-num="2" title="Title" />
``` ```
## API
### Props ### Props
@ -67,9 +71,7 @@ Use ref to get area instance and call instance methods
|------|------|------|------| |------|------|------|------|
| reset | - | - | Reset all options | | reset | - | - | Reset all options |
### Data Structure ### areaList Data Structure
#### areaList
An object contains three properties: `province_list`, `city_list` and `county_list`. An object contains three properties: `province_list`, `city_list` and `county_list`.
Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0. Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
@ -100,7 +102,8 @@ Example of `AreaList`
All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area-en.js) All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area-en.js)
#### argument of callback function confirm ### argument of callback function confirm
An array contains selected area objects. An array contains selected area objects.
`code` - code of selected area, `name` - name of selected area `code` - code of selected area, `name` - name of selected area

View File

@ -1,7 +1,10 @@
## Area 省市区选择 # Area 省市区选择
### 介绍
省市取选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用 省市取选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
### 使用指南 ### 引入
```javascript ```javascript
import { Area } from 'vant'; import { Area } from 'vant';
@ -9,9 +12,9 @@ import { Area } from 'vant';
Vue.use(Area); Vue.use(Area);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
要初始化一个`Area`组件,你需要传入一个`area-list`属性,数据格式具体可看下面数据格式章节 要初始化一个`Area`组件,你需要传入一个`area-list`属性,数据格式具体可看下面数据格式章节
@ -19,7 +22,7 @@ Vue.use(Area);
<van-area :area-list="areaList" /> <van-area :area-list="areaList" />
``` ```
#### 选中省市区 ### 选中省市区
如果想选中某个省市区,需要传入一个`value`属性,绑定对应的省市区`code` 如果想选中某个省市区,需要传入一个`value`属性,绑定对应的省市区`code`
@ -27,7 +30,7 @@ Vue.use(Area);
<van-area :area-list="areaList" value="110101" /> <van-area :area-list="areaList" value="110101" />
``` ```
#### 配置显示列 ### 配置显示列
可以通过`columns-num`属性配置省市区显示的列数,默认情况下会显示省市区,当你设置为`2`,则只会显示省市选择 可以通过`columns-num`属性配置省市区显示的列数,默认情况下会显示省市区,当你设置为`2`,则只会显示省市选择
@ -35,6 +38,8 @@ Vue.use(Area);
<van-area :area-list="areaList" :columns-num="2" title="标题" /> <van-area :area-list="areaList" :columns-num="2" title="标题" />
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
@ -65,9 +70,7 @@ Vue.use(Area);
|------|------|------|------| |------|------|------|------|
| reset | - | - | 重置所有选项到第一项 | | reset | - | - | 重置所有选项到第一项 |
### 数据格式 ### 省市区列表数据格式
#### 省市区列表数据格式
整体是一个 Object包含 `province_list`, `city_list`, `county_list` 三个 key。 整体是一个 Object包含 `province_list`, `city_list`, `county_list` 三个 key。
@ -104,7 +107,7 @@ Vue.use(Area);
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area.js) 完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/packages/area/demo/area.js)
#### 点击完成时返回的数据格式 ### 点击完成时返回的数据格式
返回的数据整体为一个数组,数组内包含 `columnsNum` 个数据, 每个数据对应一列选项中被选中的数据。 返回的数据整体为一个数组,数组内包含 `columnsNum` 个数据, 每个数据对应一列选项中被选中的数据。

View File

@ -1,15 +1,16 @@
## Button # Button
### Install ### Install
``` javascript ``` javascript
import { Button } from 'vant'; import { Button } from 'vant';
Vue.use(Button); Vue.use(Button);
``` ```
### Usage ## Usage
#### Type ### Type
```html ```html
<van-button type="default">Default</van-button> <van-button type="default">Default</van-button>
@ -19,28 +20,28 @@ Vue.use(Button);
<van-button type="warning">Warning</van-button> <van-button type="warning">Warning</van-button>
``` ```
#### Plain ### Plain
```html ```html
<van-button plain type="primary">Primary</van-button> <van-button plain type="primary">Primary</van-button>
<van-button plain type="danger">Danger</van-button> <van-button plain type="danger">Danger</van-button>
``` ```
#### Hairline ### Hairline
```html ```html
<van-button plain hairline type="primary">Hairline</van-button> <van-button plain hairline type="primary">Hairline</van-button>
<van-button plain hairline type="danger">Hairline</van-button> <van-button plain hairline type="danger">Hairline</van-button>
``` ```
#### Disabled ### Disabled
```html ```html
<van-button disabled type="primary">Diabled</van-button> <van-button disabled type="primary">Diabled</van-button>
<van-button disabled type="danger">Diabled</van-button> <van-button disabled type="danger">Diabled</van-button>
``` ```
#### Loading ### Loading
```html ```html
<van-button loading type="primary" /> <van-button loading type="primary" />
@ -52,14 +53,14 @@ Vue.use(Button);
/> />
``` ```
#### Shape ### Shape
```html ```html
<van-button square type="primary">Square</van-button> <van-button square type="primary">Square</van-button>
<van-button round type="danger">Round</van-button> <van-button round type="danger">Round</van-button>
``` ```
#### Size ### Size
```html ```html
<van-button size="large">Large</van-button> <van-button size="large">Large</van-button>
@ -68,6 +69,8 @@ Vue.use(Button);
<van-button size="mini">Mini</van-button> <van-button size="mini">Mini</van-button>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,16 @@
## Button 按钮 # Button 按钮
### 引入
### 使用指南
``` javascript ``` javascript
import { Button } from 'vant'; import { Button } from 'vant';
Vue.use(Button); Vue.use(Button);
``` ```
### 代码演示 ## 代码演示
#### 按钮类型 ### 按钮类型
支持`default``primary``info``warning``danger`五种类型,默认为`default` 支持`default``primary``info``warning``danger`五种类型,默认为`default`
@ -21,7 +22,7 @@ Vue.use(Button);
<van-button type="danger">危险按钮</van-button> <van-button type="danger">危险按钮</van-button>
``` ```
#### 朴素按钮 ### 朴素按钮
通过`plain`属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。 通过`plain`属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
@ -30,7 +31,7 @@ Vue.use(Button);
<van-button plain type="danger">朴素按钮</van-button> <van-button plain type="danger">朴素按钮</van-button>
``` ```
#### 细边框 ### 细边框
设置`hairline`属性可以开启 0.5px 边框,基于伪类实现 设置`hairline`属性可以开启 0.5px 边框,基于伪类实现
@ -39,7 +40,7 @@ Vue.use(Button);
<van-button plain hairline type="danger">细边框按钮</van-button> <van-button plain hairline type="danger">细边框按钮</van-button>
``` ```
#### 禁用状态 ### 禁用状态
通过`disabled`属性来禁用按钮,此时按钮不可点击 通过`disabled`属性来禁用按钮,此时按钮不可点击
@ -48,7 +49,7 @@ Vue.use(Button);
<van-button disabled type="danger">禁用状态</van-button> <van-button disabled type="danger">禁用状态</van-button>
``` ```
#### 加载状态 ### 加载状态
```html ```html
<van-button loading type="primary" /> <van-button loading type="primary" />
@ -60,14 +61,14 @@ Vue.use(Button);
/> />
``` ```
#### 按钮形状 ### 按钮形状
```html ```html
<van-button square type="primary">方形按钮</van-button> <van-button square type="primary">方形按钮</van-button>
<van-button round type="danger">圆形按钮</van-button> <van-button round type="danger">圆形按钮</van-button>
``` ```
#### 按钮尺寸 ### 按钮尺寸
支持`large``normal``small``mini`四种尺寸,默认为`normal` 支持`large``normal``small``mini`四种尺寸,默认为`normal`
@ -78,6 +79,8 @@ Vue.use(Button);
<van-button size="mini">迷你按钮</van-button> <van-button size="mini">迷你按钮</van-button>
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Card # Card
### Install ### Install
``` javascript ``` javascript
@ -7,9 +7,9 @@ import { Card } from 'vant';
Vue.use(Card); Vue.use(Card);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-card <van-card
@ -21,7 +21,7 @@ Vue.use(Card);
/> />
``` ```
#### Advanced Usage ### Advanced Usage
Use slot to custom content. Use slot to custom content.
@ -42,6 +42,8 @@ Use slot to custom content.
</van-card> </van-card>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,15 @@
## Card 卡片 # Card 卡片
### 使用指南 ### 引入
``` javascript ``` javascript
import { Card } from 'vant'; import { Card } from 'vant';
Vue.use(Card); Vue.use(Card);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<van-card <van-card
@ -21,7 +21,7 @@ Vue.use(Card);
/> />
``` ```
#### 高级用法 ### 高级用法
可以通过具名插槽添加定制内容 可以通过具名插槽添加定制内容
@ -42,6 +42,8 @@ Vue.use(Card);
</van-card> </van-card>
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Cell # Cell
### Install ### Install
``` javascript ``` javascript
@ -7,9 +7,9 @@ import { Cell, CellGroup } from 'vant';
Vue.use(Cell).use(CellGroup); Vue.use(Cell).use(CellGroup);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-cell-group> <van-cell-group>
@ -18,7 +18,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### Size ### Size
```html ```html
<van-cell-group> <van-cell-group>
@ -27,7 +27,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### Left Icon ### Left Icon
```html ```html
<van-cell-group> <van-cell-group>
@ -35,7 +35,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### Value only ### Value only
```html ```html
<van-cell-group> <van-cell-group>
@ -43,7 +43,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### Link ### Link
```html ```html
<van-cell-group> <van-cell-group>
@ -53,7 +53,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### Router ### Router
```html ```html
<van-cell-group> <van-cell-group>
@ -62,7 +62,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### Group Title ### Group Title
```html ```html
<van-cell-group title="Group 1"> <van-cell-group title="Group 1">
@ -73,7 +73,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### Advanced Usage ### Advanced Usage
```html ```html
<van-cell-group> <van-cell-group>
@ -90,6 +90,8 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
## API
### CellGroup Props ### CellGroup Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,15 @@
## Cell 单元格 # Cell 单元格
### 使用指南 ### 引入
``` javascript ``` javascript
import { Cell, CellGroup } from 'vant'; import { Cell, CellGroup } from 'vant';
Vue.use(Cell).use(CellGroup); Vue.use(Cell).use(CellGroup);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
`Cell`可以单独使用,也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框。 `Cell`可以单独使用,也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框。
@ -20,7 +20,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### 单元格大小 ### 单元格大小
通过`size`属性可以控制单元格的大小 通过`size`属性可以控制单元格的大小
@ -29,7 +29,7 @@ Vue.use(Cell).use(CellGroup);
<van-cell title="单元格" value="内容" size="large" label="描述信息" /> <van-cell title="单元格" value="内容" size="large" label="描述信息" />
``` ```
#### 展示图标 ### 展示图标
通过`icon`属性在标题左侧展示图标 通过`icon`属性在标题左侧展示图标
@ -37,7 +37,7 @@ Vue.use(Cell).use(CellGroup);
<van-cell title="单元格" icon="location-o" /> <van-cell title="单元格" icon="location-o" />
``` ```
#### 只设置 value ### 只设置 value
只设置`value`时会向左对齐 只设置`value`时会向左对齐
@ -45,7 +45,7 @@ Vue.use(Cell).use(CellGroup);
<van-cell value="内容" /> <van-cell value="内容" />
``` ```
#### 展示箭头 ### 展示箭头
传入`is-link`属性则会在右侧显示箭头,并且可以通过传入`arrow-direction`属性控制箭头方向 传入`is-link`属性则会在右侧显示箭头,并且可以通过传入`arrow-direction`属性控制箭头方向
@ -55,7 +55,7 @@ Vue.use(Cell).use(CellGroup);
<van-cell title="单元格" is-link arrow-direction="down" value="内容" /> <van-cell title="单元格" is-link arrow-direction="down" value="内容" />
``` ```
#### 页面跳转 ### 页面跳转
可以通过`url`属性进行页面跳转,或通过`to`属性进行 vue-router 跳转 可以通过`url`属性进行页面跳转,或通过`to`属性进行 vue-router 跳转
@ -64,7 +64,7 @@ Vue.use(Cell).use(CellGroup);
<van-cell title="单元格" is-link to="index" /> <van-cell title="单元格" is-link to="index" />
``` ```
#### 分组标题 ### 分组标题
通过`CellGroup``title`属性可以指定分组标题 通过`CellGroup``title`属性可以指定分组标题
@ -77,7 +77,7 @@ Vue.use(Cell).use(CellGroup);
</van-cell-group> </van-cell-group>
``` ```
#### 高级用法 ### 高级用法
如以上用法不能满足你的需求,可以使用对应的`slot`来自定义显示的内容 如以上用法不能满足你的需求,可以使用对应的`slot`来自定义显示的内容
@ -94,6 +94,8 @@ Vue.use(Cell).use(CellGroup);
</van-cell> </van-cell>
``` ```
## API
### CellGroup Props ### CellGroup Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Checkbox # Checkbox
### Install ### Install
``` javascript ``` javascript
@ -7,9 +7,9 @@ import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox).use(CheckboxGroup); Vue.use(Checkbox).use(CheckboxGroup);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-checkbox v-model="checked">Checkbox</van-checkbox> <van-checkbox v-model="checked">Checkbox</van-checkbox>
@ -25,19 +25,19 @@ export default {
}; };
``` ```
#### Disabled ### Disabled
```html ```html
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox> <van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
``` ```
#### Custom Color ### Custom Color
```html ```html
<van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox> <van-checkbox v-model="checked" checked-color="#07c160">Checkbox</van-checkbox>
``` ```
#### Custom Icon ### Custom Icon
Use icon slot to custom icon Use icon slot to custom icon
@ -64,7 +64,7 @@ export default {
} }
``` ```
#### Checkbox Group ### Checkbox Group
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model. When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
@ -91,7 +91,7 @@ export default {
}; };
``` ```
#### Maximum amount of checked options ### Maximum amount of checked options
```html ```html
<van-checkbox-group v-model="result" :max="2"> <van-checkbox-group v-model="result" :max="2">
@ -105,7 +105,7 @@ export default {
</van-checkbox-group> </van-checkbox-group>
``` ```
#### Inside a Cell ### Inside a Cell
```html ```html
<van-checkbox-group v-model="result"> <van-checkbox-group v-model="result">
@ -133,6 +133,7 @@ export default {
} }
``` ```
## API
### Checkbox Props ### Checkbox Props

View File

@ -1,15 +1,15 @@
## Checkbox 复选框 # Checkbox 复选框
### 使用指南 ### 引入
``` javascript ``` javascript
import { Checkbox, CheckboxGroup } from 'vant'; import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox).use(CheckboxGroup); Vue.use(Checkbox).use(CheckboxGroup);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
通过`v-model`绑定 checkbox 的勾选状态 通过`v-model`绑定 checkbox 的勾选状态
@ -27,19 +27,19 @@ export default {
}; };
``` ```
#### 禁用状态 ### 禁用状态
```html ```html
<van-checkbox v-model="checked" disabled>复选框</van-checkbox> <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
``` ```
#### 自定义颜色 ### 自定义颜色
```html ```html
<van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox> <van-checkbox v-model="checked" checked-color="#07c160">复选框</van-checkbox>
``` ```
#### 自定义图标 ### 自定义图标
通过 icon 插槽自定义图标,可以通过 `slot-scope` 判断是否为选中状态 通过 icon 插槽自定义图标,可以通过 `slot-scope` 判断是否为选中状态
@ -66,7 +66,7 @@ export default {
} }
``` ```
#### 复选框组 ### 复选框组
`van-checkbox-group`一起使用,选中值是一个数组,通过`v-model`绑定在`van-checkbox-group`上,数组中的项即为选中的`Checkbox``name`属性设置的值 `van-checkbox-group`一起使用,选中值是一个数组,通过`v-model`绑定在`van-checkbox-group`上,数组中的项即为选中的`Checkbox``name`属性设置的值
@ -93,7 +93,7 @@ export default {
}; };
``` ```
#### 设置最大可选数 ### 设置最大可选数
```html ```html
<van-checkbox-group v-model="result" :max="2"> <van-checkbox-group v-model="result" :max="2">
@ -107,7 +107,7 @@ export default {
</van-checkbox-group> </van-checkbox-group>
``` ```
#### 搭配单元格组件使用 ### 搭配单元格组件使用
此时你需要再引入`Cell``CellGroup`组件,并通过 checkbox 的 toggle 方法手动触发切换 此时你需要再引入`Cell``CellGroup`组件,并通过 checkbox 的 toggle 方法手动触发切换
@ -137,6 +137,8 @@ export default {
} }
``` ```
## API
### Checkbox Props ### Checkbox Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Circle # Circle
### Install ### Install
``` javascript ``` javascript
@ -7,9 +7,9 @@ import { Circle } from 'vant';
Vue.use(Circle); Vue.use(Circle);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-circle <van-circle
@ -35,7 +35,7 @@ export default {
}; };
``` ```
#### Custom style ### Custom style
```html ```html
<van-circle <van-circle
@ -52,6 +52,7 @@ export default {
/> />
``` ```
## API
### Props ### Props

View File

@ -1,15 +1,15 @@
## Circle 环形进度条 # Circle 环形进度条
### 使用指南 ### 引入
``` javascript ``` javascript
import { Circle } from 'vant'; import { Circle } from 'vant';
Vue.use(Circle); Vue.use(Circle);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
通过 `rate` 指定目标进度,`v-model` 代表当前进度,`speed` 控制动画速度 通过 `rate` 指定目标进度,`v-model` 代表当前进度,`speed` 控制动画速度
```html ```html
@ -36,7 +36,7 @@ export default {
}; };
``` ```
#### 样式定制 ### 样式定制
```html ```html
<van-circle <van-circle
@ -53,6 +53,7 @@ export default {
/> />
``` ```
## API
### Props ### Props

View File

@ -1,21 +1,23 @@
## Layout # Layout
### Intro
Quickly and easily create layouts with `van-row` and `van-col` Quickly and easily create layouts with `van-row` and `van-col`
### Install ### Install
``` javascript ``` javascript
import { Row, Col } from 'vant'; import { Row, Col } from 'vant';
Vue.use(Row).use(Col); Vue.use(Row).use(Col);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid. Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
```html ```html
<van-row> <van-row>
<van-col span="8">span: 8</van-col> <van-col span="8">span: 8</van-col>
@ -35,7 +37,7 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of
``` ```
#### Column Spacing ### Column Spacing
Set grid spacing using `gutter` attribute. The default value is 0 Set grid spacing using `gutter` attribute. The default value is 0
@ -48,7 +50,7 @@ Set grid spacing using `gutter` attribute. The default value is 0
</van-row> </van-row>
``` ```
#### Flex Layout ### Flex Layout
Setting `type` to `flex` to enable flex layout Setting `type` to `flex` to enable flex layout
@ -84,6 +86,7 @@ Setting `type` to `flex` to enable flex layout
</van-row> </van-row>
``` ```
## API
### Row Props ### Row Props

View File

@ -1,17 +1,21 @@
## Layout 布局 # Layout 布局
提供了`van-row``van-col`两个组件来进行行列布局 ### 介绍
Layout 提供了`van-row``van-col`两个组件来进行行列布局
### 引入
### 使用指南
``` javascript ``` javascript
import { Row, Col } from 'vant'; import { Row, Col } from 'vant';
Vue.use(Row).use(Col); Vue.use(Row).use(Col);
``` ```
### 代码演示 ## 代码演示
#### 基本用法 ### 基本用法
Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置列所占的宽度百分比 Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置列所占的宽度百分比
此外,添加`offset`属性可以设置列的偏移宽度,计算方式与 span 相同 此外,添加`offset`属性可以设置列的偏移宽度,计算方式与 span 相同
@ -33,7 +37,7 @@ Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置
</van-row> </van-row>
``` ```
#### 设置列元素间距 ### 设置列元素间距
通过`gutter`属性可以设置列元素之间的间距,默认间距为 0 通过`gutter`属性可以设置列元素之间的间距,默认间距为 0
@ -45,7 +49,7 @@ Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置
</van-row> </van-row>
``` ```
#### Flex 布局 ### Flex 布局
`type` 属性设置为 flex 可以启用 flex 布局,便于进行灵活的对齐 `type` 属性设置为 flex 可以启用 flex 布局,便于进行灵活的对齐
@ -86,6 +90,8 @@ Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置
</van-row> </van-row>
``` ```
## API
### Row Props ### Row Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Collapse # Collapse
### Install ### Install
``` javascript ``` javascript
@ -7,9 +7,9 @@ import { Collapse, CollapseItem } from 'vant';
Vue.use(Collapse).use(CollapseItem); Vue.use(Collapse).use(CollapseItem);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
Use `v-model` to control the name of active panels Use `v-model` to control the name of active panels
@ -31,7 +31,7 @@ export default {
}; };
``` ```
#### Accordion ### Accordion
In accordion mode, only one panel can be expanded at the same time. In accordion mode, only one panel can be expanded at the same time.
@ -53,7 +53,7 @@ export default {
}; };
``` ```
#### Custom title ### Custom title
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
@ -71,6 +71,8 @@ export default {
</van-collapse> </van-collapse>
``` ```
## API
### Collapse Props ### Collapse Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,15 @@
## Collapse 折叠面板 # Collapse 折叠面板
### 使用指南 ### 引入
``` javascript ``` javascript
import { Collapse, CollapseItem } from 'vant'; import { Collapse, CollapseItem } from 'vant';
Vue.use(Collapse).use(CollapseItem); Vue.use(Collapse).use(CollapseItem);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
通过`v-model`控制展开的面板列表,`activeNames`为数组格式 通过`v-model`控制展开的面板列表,`activeNames`为数组格式
@ -31,7 +31,7 @@ export default {
}; };
``` ```
#### 手风琴 ### 手风琴
通过`accordion`可以设置为手风琴模式,最多展开一个面板,此时`activeName`为字符串格式 通过`accordion`可以设置为手风琴模式,最多展开一个面板,此时`activeName`为字符串格式
@ -53,7 +53,7 @@ export default {
}; };
``` ```
#### 自定义标题内容 ### 自定义标题内容
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
@ -72,6 +72,8 @@ export default {
</van-collapse> </van-collapse>
``` ```
## API
### Collapse Props ### Collapse Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,6 +1,7 @@
## Contact # Contact
### Install ### Install
``` javascript ``` javascript
import { ContactCard, ContactList, ContactEdit } from 'vant'; import { ContactCard, ContactList, ContactEdit } from 'vant';
@ -10,10 +11,9 @@ Vue
.use(ContactEdit); .use(ContactEdit);
``` ```
### Usage ## Usage
#### Basic Usage
### Basic Usage
```html ```html
<!-- Contact Card --> <!-- Contact Card -->
@ -119,7 +119,7 @@ export default {
}; };
``` ```
#### Uneditable ### Uneditable
```html ```html
<van-contact-card <van-contact-card
@ -130,6 +130,7 @@ export default {
/> />
``` ```
## API
### ContactCard Props ### ContactCard Props
@ -163,6 +164,7 @@ export default {
| select | Triggered when select contact | item: contact object | | select | Triggered when select contact | item: contact object |
### ContactEdit Props ### ContactEdit Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------|------| |------|------|------|------|------|
| contact-info | Contact Info | `Object` | `[]` | | contact-info | Contact Info | `Object` | `[]` |

View File

@ -1,7 +1,11 @@
## Contact 联系人 # Contact 联系人
### 介绍
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。 通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
### 使用指南 ### 引入
``` javascript ``` javascript
import { ContactCard, ContactList, ContactEdit } from 'vant'; import { ContactCard, ContactList, ContactEdit } from 'vant';
@ -11,9 +15,9 @@ Vue
.use(ContactEdit); .use(ContactEdit);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<!-- 联系人卡片 --> <!-- 联系人卡片 -->
@ -119,7 +123,7 @@ export default {
}; };
``` ```
#### 不可编辑 ### 不可编辑
```html ```html
<van-contact-card <van-contact-card
@ -130,6 +134,8 @@ export default {
/> />
``` ```
## API
### ContactCard Props ### ContactCard Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
@ -178,9 +184,7 @@ export default {
| save | 点击保存按钮时触发 | content表单内容 | | save | 点击保存按钮时触发 | content表单内容 |
| delete | 点击删除按钮时触发 | content表单内容 | | delete | 点击删除按钮时触发 | content表单内容 |
### 数据格式 ### 联系人数据格式
#### 联系人数据格式
| key | 说明 | 类型 | | key | 说明 | 类型 |
|------|------|------| |------|------|------|

View File

@ -1,15 +1,16 @@
## Coupon # Coupon
### Install ### Install
``` javascript ``` javascript
import { CouponCell, CouponList } from 'vant'; import { CouponCell, CouponList } from 'vant';
Vue.use(CouponCell).use(CouponList); Vue.use(CouponCell).use(CouponList);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<!-- Coupon Cell --> <!-- Coupon Cell -->
@ -65,6 +66,8 @@ export default {
} }
``` ```
## API
### CouponCell Props ### CouponCell Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,16 @@
## Coupon 优惠券选择器 # Coupon 优惠券选择器
### 引入
### 使用指南
``` javascript ``` javascript
import { CouponCell, CouponList } from 'vant'; import { CouponCell, CouponList } from 'vant';
Vue.use(CouponCell).use(CouponList); Vue.use(CouponCell).use(CouponList);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<!-- 优惠券单元格 --> <!-- 优惠券单元格 -->
@ -65,6 +66,7 @@ export default {
} }
``` ```
## API
### CouponCell Props ### CouponCell Props
@ -103,9 +105,7 @@ export default {
| change | 优惠券切换回调 | index, 选中优惠券的索引 | | change | 优惠券切换回调 | index, 选中优惠券的索引 |
| exchange | 兑换优惠券回调 | code, 兑换码 | | exchange | 兑换优惠券回调 | code, 兑换码 |
### 数据格式 ### 优惠券字段说明
#### 优惠券字段说明
| key | 说明 | 类型 | | key | 说明 | 类型 |
|------|------|------| |------|------|------|

View File

@ -1,4 +1,7 @@
## DatetimePicker # DatetimePicker
### Intro
The DatetimePicker component is usually used with [Popup](#/en-US/popup) Component. The DatetimePicker component is usually used with [Popup](#/en-US/popup) Component.
### Install ### Install
@ -8,9 +11,9 @@ import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker); Vue.use(DatetimePicker);
``` ```
### Usage ## Usage
#### Choose DateTime ### Choose DateTime
```html ```html
<van-datetime-picker <van-datetime-picker
@ -35,7 +38,7 @@ export default {
}; };
``` ```
#### Choose Date ### Choose Date
```html ```html
<van-datetime-picker <van-datetime-picker
@ -55,7 +58,7 @@ export default {
} }
``` ```
#### Choose Year-Month ### Choose Year-Month
```html ```html
<van-datetime-picker <van-datetime-picker
@ -87,7 +90,7 @@ export default {
} }
``` ```
#### Choose Time ### Choose Time
```html ```html
<van-datetime-picker <van-datetime-picker
@ -108,6 +111,8 @@ export default {
} }
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,16 +1,20 @@
## DatetimePicker 时间选择 # DatetimePicker 时间选择
### 介绍
时间选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用 时间选择组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
### 使用指南 ### 引入
``` javascript ``` javascript
import { DatetimePicker } from 'vant'; import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker); Vue.use(DatetimePicker);
``` ```
### 代码演示 ## 代码演示
#### 选择完整时间 ### 选择完整时间
```html ```html
<van-datetime-picker <van-datetime-picker
@ -35,7 +39,7 @@ export default {
}; };
``` ```
#### 选择日期(年月日) ### 选择日期(年月日)
```html ```html
<van-datetime-picker <van-datetime-picker
@ -55,7 +59,7 @@ export default {
} }
``` ```
#### 选择日期(年月) ### 选择日期(年月)
通过传入 `formatter` 函数对选项文字进行处理 通过传入 `formatter` 函数对选项文字进行处理
```html ```html
@ -88,7 +92,7 @@ export default {
} }
``` ```
#### 选择时间 ### 选择时间
```html ```html
<van-datetime-picker <van-datetime-picker
@ -109,6 +113,8 @@ export default {
} }
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Dialog # Dialog
### Install ### Install
@ -8,9 +8,9 @@ import { Dialog } from 'vant';
Vue.use(Dialog); Vue.use(Dialog);
``` ```
### Usage ## Usage
#### Alert dialog ### Alert dialog
Used to prompt for some messages, only including one confirm button Used to prompt for some messages, only including one confirm button
@ -29,7 +29,7 @@ Dialog.alert({
}); });
``` ```
#### Confirm dialog ### Confirm dialog
Used to confirm some messages, including a confirm button and a cancel button Used to confirm some messages, including a confirm button and a cancel button
@ -44,7 +44,7 @@ Used to confirm some messages, including a confirm button and a cancel button
}); });
``` ```
#### Asnyc Close ### Asnyc Close
```js ```js
function beforeClose(action, done) { function beforeClose(action, done) {
@ -62,7 +62,7 @@ Dialog.confirm({
}); });
``` ```
#### $dialog Method ### $dialog Method
After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component. After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
@ -76,7 +76,7 @@ export default {
} }
``` ```
#### Advanced Usage ### Advanced Usage
If you need to render vue components within a dialog, you can use dialog component. If you need to render vue components within a dialog, you can use dialog component.
@ -100,6 +100,8 @@ export default {
} }
``` ```
## API
### Methods ### Methods
| Name | Attribute | Return value | Description | | Name | Attribute | Return value | Description |

View File

@ -1,7 +1,10 @@
## Dialog 弹出框 # Dialog 弹出框
Dialog 组件支持函数调用和组件调用两种形式
### 使用指南 ### 介绍
弹出框组件支持函数调用和组件调用两种形式
### 引入
```js ```js
import { Dialog } from 'vant'; import { Dialog } from 'vant';
@ -9,9 +12,9 @@ import { Dialog } from 'vant';
Vue.use(Dialog); Vue.use(Dialog);
``` ```
### 代码演示 ## 代码演示
#### 消息提示 ### 消息提示
用于提示一些消息,只包含一个确认按钮 用于提示一些消息,只包含一个确认按钮
@ -30,7 +33,7 @@ Dialog.alert({
}); });
``` ```
#### 消息确认 ### 消息确认
用于确认消息,包含取消和确认按钮 用于确认消息,包含取消和确认按钮
@ -45,7 +48,7 @@ Dialog.confirm({
}); });
``` ```
#### 异步关闭 ### 异步关闭
```js ```js
function beforeClose(action, done) { function beforeClose(action, done) {
@ -63,7 +66,7 @@ Dialog.confirm({
}); });
``` ```
#### 全局方法 ### 全局方法
引入 Dialog 组件后,会自动在 Vue 的 prototype 上挂载 $dialog 方法,在所有组件内部都可以直接调用此方法 引入 Dialog 组件后,会自动在 Vue 的 prototype 上挂载 $dialog 方法,在所有组件内部都可以直接调用此方法
@ -77,7 +80,7 @@ export default {
} }
``` ```
#### 组件调用 ### 组件调用
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 `Vue.use` 注册组件 如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 `Vue.use` 注册组件
@ -101,6 +104,8 @@ export default {
} }
``` ```
## API
### 方法 ### 方法
| 方法名 | 参数 | 返回值 | 介绍 | | 方法名 | 参数 | 返回值 | 介绍 |

View File

@ -1,4 +1,4 @@
## DropdownMenu # DropdownMenu
### Install ### Install
@ -8,9 +8,9 @@ import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu).use(DropdownItem); Vue.use(DropdownMenu).use(DropdownItem);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-dropdown-menu> <van-dropdown-menu>
@ -76,6 +76,8 @@ export default {
}; };
``` ```
## API
### DropdownMenu Props ### DropdownMenu Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,6 +1,6 @@
## DropdownMenu 下拉菜单 # DropdownMenu 下拉菜单
### 使用指南 ### 引入
``` javascript ``` javascript
import { DropdownMenu, DropdownItem } from 'vant'; import { DropdownMenu, DropdownItem } from 'vant';
@ -8,9 +8,9 @@ import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu).use(DropdownItem); Vue.use(DropdownMenu).use(DropdownItem);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<van-dropdown-menu> <van-dropdown-menu>
@ -78,6 +78,8 @@ export default {
}; };
``` ```
## API
### DropdownMenu Props ### DropdownMenu Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,15 +1,17 @@
## Field # Field
### Install ### Install
``` javascript ``` javascript
import { Field } from 'vant'; import { Field } from 'vant';
Vue.use(Field); Vue.use(Field);
``` ```
### Usage ## Usage
### Basic Usage
#### Basic Usage
The value of field is bound with v-model. The value of field is bound with v-model.
```html ```html
@ -18,7 +20,8 @@ The value of field is bound with v-model.
</van-cell-group> </van-cell-group>
``` ```
#### Custom type ### Custom type
Use `type` prop to custom diffrent type fields. Use `type` prop to custom diffrent type fields.
```html ```html
@ -43,7 +46,7 @@ Use `type` prop to custom diffrent type fields.
</van-cell-group> </van-cell-group>
``` ```
#### Disabled ### Disabled
```html ```html
<van-cell-group> <van-cell-group>
@ -56,7 +59,8 @@ Use `type` prop to custom diffrent type fields.
</van-cell-group> </van-cell-group>
``` ```
#### Error info ### Error info
Use `error` or `error-message` to show error info Use `error` or `error-message` to show error info
```html ```html
@ -76,7 +80,8 @@ Use `error` or `error-message` to show error info
</van-cell-group> </van-cell-group>
``` ```
#### Auto resize ### Auto resize
Textarea Field can be auto resize when has `autosize` prop Textarea Field can be auto resize when has `autosize` prop
```html ```html
@ -92,7 +97,8 @@ Textarea Field can be auto resize when has `autosize` prop
</van-cell-group> </van-cell-group>
``` ```
#### Insert button ### Insert button
Use button slot to insert button Use button slot to insert button
```html ```html
@ -109,6 +115,8 @@ Use button slot to insert button
</van-cell-group> </van-cell-group>
``` ```
## API
### Props ### Props
Field support all native properties of input tagsuch as `maxlength``placeholder``autofocus` Field support all native properties of input tagsuch as `maxlength``placeholder``autofocus`

View File

@ -1,17 +1,19 @@
## Field 输入框 # Field 输入框
`input``textarea`的输入框。 ### 介绍
### 使用指南 表单中的输入框组件,支持`input``textarea`两种类型
### 引入
``` javascript ``` javascript
import { Field } from 'vant'; import { Field } from 'vant';
Vue.use(Field); Vue.use(Field);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
通过 v-model 绑定输入框的值 通过 v-model 绑定输入框的值
@ -21,7 +23,7 @@ Vue.use(Field);
</van-cell-group> </van-cell-group>
``` ```
#### 自定义类型 ### 自定义类型
根据`type`属性定义不同类型的输入框 根据`type`属性定义不同类型的输入框
@ -47,7 +49,7 @@ Vue.use(Field);
</van-cell-group> </van-cell-group>
``` ```
#### 禁用输入框 ### 禁用输入框
```html ```html
<van-cell-group> <van-cell-group>
@ -60,7 +62,7 @@ Vue.use(Field);
</van-cell-group> </van-cell-group>
``` ```
#### 错误提示 ### 错误提示
通过`error`或者`error-message`属性增加对应的错误提示 通过`error`或者`error-message`属性增加对应的错误提示
@ -81,7 +83,7 @@ Vue.use(Field);
</van-cell-group> </van-cell-group>
``` ```
#### 高度自适应 ### 高度自适应
对于 textarea可以通过`autosize`属性设置高度自适应 对于 textarea可以通过`autosize`属性设置高度自适应
@ -98,7 +100,7 @@ Vue.use(Field);
</van-cell-group> </van-cell-group>
``` ```
#### 插入按钮 ### 插入按钮
通过 button 插槽可以在输入框尾部插入按钮 通过 button 插槽可以在输入框尾部插入按钮
@ -116,6 +118,8 @@ Vue.use(Field);
</van-cell-group> </van-cell-group>
``` ```
## API
### Props ### Props
Field 默认支持 Input 标签所有的原生属性,比如 `maxlength``placeholder``autofocus` Field 默认支持 Input 标签所有的原生属性,比如 `maxlength``placeholder``autofocus`

View File

@ -1,6 +1,7 @@
## GoodsAction # GoodsAction
### Install ### Install
``` javascript ``` javascript
import { import {
GoodsAction, GoodsAction,
@ -14,8 +15,9 @@ Vue
.use(GoodsActionIcon); .use(GoodsActionIcon);
``` ```
### Usage ## Usage
#### Basic Usage
### Basic Usage
```html ```html
<van-goods-action> <van-goods-action>
@ -55,7 +57,7 @@ export default {
} }
``` ```
#### Icon info ### Icon info
Use `info` prop to show messages in upper right corner of icon Use `info` prop to show messages in upper right corner of icon
@ -85,14 +87,15 @@ Use `info` prop to show messages in upper right corner of icon
</van-goods-action> </van-goods-action>
``` ```
### Props ## API
#### GoodsAction ### GoodsAction Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------|
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
#### GoodsActionIcon ### GoodsActionIcon Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
@ -104,7 +107,7 @@ Use `info` prop to show messages in upper right corner of icon
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | | to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
| replace | If true, the navigation will not leave a history record | `Boolean` | `false` | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
#### GoodsActionButton ### GoodsActionButton Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|

View File

@ -1,6 +1,7 @@
## GoodsAction 商品导航 # GoodsAction 商品导航
### 引入
### 使用指南
``` javascript ``` javascript
import { import {
GoodsAction, GoodsAction,
@ -14,8 +15,9 @@ Vue
.use(GoodsActionButton); .use(GoodsActionButton);
``` ```
### 代码演示 ## 代码演示
#### 基础用法
### 基础用法
```html ```html
<van-goods-action> <van-goods-action>
@ -55,7 +57,8 @@ export default {
} }
``` ```
#### 图标提示 ### 图标提示
通过`info`属性在图标右上角增加相应的提示 通过`info`属性在图标右上角增加相应的提示
```html ```html
@ -84,15 +87,15 @@ export default {
</van-goods-action> </van-goods-action>
``` ```
### Props ## API
#### GoodsAction ### GoodsAction Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配,需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 | | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配,需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
#### GoodsActionIcon ### GoodsActionIcon Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
@ -104,7 +107,7 @@ export default {
| to | 路由跳转对象,同 `vue-router` 的 to | `String | Object` | - | - | | to | 路由跳转对象,同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
#### GoodsActionButton ### GoodsActionButton Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|

View File

@ -1,15 +1,16 @@
## Icon # Icon
### Install ### Install
``` javascript ``` javascript
import { Icon } from 'vant'; import { Icon } from 'vant';
Vue.use(Icon); Vue.use(Icon);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
Use `name` prop to set icon name or icon URL Use `name` prop to set icon name or icon URL
@ -18,21 +19,22 @@ Use `name` prop to set icon name or icon URL
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
``` ```
#### Show Info ### Show Info
```html ```html
<van-icon name="chat" info="9" /> <van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" /> <van-icon name="chat" info="99+" />
``` ```
#### Use local font file ### Use local font file
Icon uses font file in `yzcdn.cn` by defaultif you want to use the local font fileplease import the following css file. Icon uses font file in `yzcdn.cn` by defaultif you want to use the local font fileplease import the following css file.
```js ```js
import 'vant/lib/icon/local.css'; import 'vant/lib/icon/local.css';
``` ```
#### Add custom iconfont ### Add custom iconfont
```css ```css
@font-face { @font-face {
@ -53,6 +55,8 @@ import 'vant/lib/icon/local.css';
<van-icon class-prefix="my-icon" name="extra" /> <van-icon class-prefix="my-icon" name="extra" />
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,16 @@
## Icon 图标 # Icon 图标
### 引入
### 使用指南
``` javascript ``` javascript
import { Icon } from 'vant'; import { Icon } from 'vant';
Vue.use(Icon); Vue.use(Icon);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
`Icon``name`属性支持传入图标名称或图片链接 `Icon``name`属性支持传入图标名称或图片链接
@ -18,14 +19,14 @@ Vue.use(Icon);
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
``` ```
#### 显示徽标 ### 显示徽标
```html ```html
<van-icon name="chat" info="9" /> <van-icon name="chat" info="9" />
<van-icon name="chat" info="99+" /> <van-icon name="chat" info="99+" />
``` ```
#### 使用本地字体文件 ### 使用本地字体文件
Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件,如果想要使用本地字体文件,请引入下面的 css 文件 Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件,如果想要使用本地字体文件,请引入下面的 css 文件
@ -33,7 +34,7 @@ Icon 组件默认引用 `yzcdn.cn` 域名下的字体文件,如果想要使用
import 'vant/lib/icon/local.css'; import 'vant/lib/icon/local.css';
``` ```
#### 自定义图标 ### 自定义图标
如果需要在现有 Icon 的基础上使用更多图标,可以引入你需要的 iconfont 对应的 ttf 文件和样式,之后就可以在 Icon 组件中直接使用 如果需要在现有 Icon 的基础上使用更多图标,可以引入你需要的 iconfont 对应的 ttf 文件和样式,之后就可以在 Icon 组件中直接使用
@ -56,6 +57,8 @@ import 'vant/lib/icon/local.css';
<van-icon class-prefix="my-icon" name="extra" /> <van-icon class-prefix="my-icon" name="extra" />
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## ImagePreview # ImagePreview
### Install ### Install
@ -8,9 +8,9 @@ import { ImagePreview } from 'vant';
Vue.use(ImagePreview); Vue.use(ImagePreview);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```javascript ```javascript
ImagePreview([ ImagePreview([
@ -19,7 +19,7 @@ ImagePreview([
]); ]);
``` ```
#### Custom config ### Custom config
```javascript ```javascript
ImagePreview({ ImagePreview({
@ -34,7 +34,7 @@ ImagePreview({
}); });
``` ```
#### Async Close ### Async Close
```javascript ```javascript
const instance = ImagePreview({ const instance = ImagePreview({
@ -50,7 +50,7 @@ setTimeout(() => {
}, 1000); }, 1000);
``` ```
#### Component Call ### Component Call
```html ```html
<van-image-preview <van-image-preview
@ -83,6 +83,8 @@ export default {
} }
``` ```
## API
### Options ### Options
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,6 +1,6 @@
## ImagePreview 图片预览 # ImagePreview 图片预览
### 使用指南 ### 引入
`ImagePreview`和其他组件不同不是通过HTML结构的方式来使用而是通过函数调用的方式。使用前需要先引入它。 `ImagePreview`和其他组件不同不是通过HTML结构的方式来使用而是通过函数调用的方式。使用前需要先引入它。
@ -10,9 +10,9 @@ import { ImagePreview } from 'vant';
Vue.use(ImagePreview); Vue.use(ImagePreview);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
直接传入图片数组,即可展示图片预览 直接传入图片数组,即可展示图片预览
@ -23,7 +23,7 @@ ImagePreview([
]); ]);
``` ```
#### 传入配置项 ### 传入配置项
通过传入配置对象,可以指定初始图片的位置、监听关闭事件 通过传入配置对象,可以指定初始图片的位置、监听关闭事件
@ -40,7 +40,7 @@ ImagePreview({
}); });
``` ```
#### 异步关闭 ### 异步关闭
通过`asyncClose`属性可以开启异步关闭,开启后异步关闭后,只能通过实例上的 close 方法关闭图片预览 通过`asyncClose`属性可以开启异步关闭,开启后异步关闭后,只能通过实例上的 close 方法关闭图片预览
@ -58,7 +58,7 @@ setTimeout(() => {
}, 1000); }, 1000);
``` ```
#### 组件调用 ### 组件调用
如果需要在图片预览内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 `Vue.use` 注册组件 如果需要在图片预览内嵌入组件或其他自定义内容,可以使用组件调用的方式,调用前需要通过 `Vue.use` 注册组件
@ -93,6 +93,8 @@ export default {
} }
``` ```
## API
### Options ### Options
通过函数调用 `ImagePreview` 时,支持传入以下选项: 通过函数调用 `ImagePreview` 时,支持传入以下选项:

View File

@ -1,4 +1,4 @@
## IndexBar # IndexBar
### Install ### Install
@ -8,9 +8,9 @@ import { IndexBar } from 'vant';
Vue.use(IndexBar); Vue.use(IndexBar);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-index-bar> <van-index-bar>
@ -28,7 +28,7 @@ Vue.use(IndexBar);
</van-index-bar> </van-index-bar>
``` ```
#### Custom Index List ### Custom Index List
```html ```html
<van-index-bar :index-list="indexList"> <van-index-bar :index-list="indexList">
@ -56,6 +56,8 @@ export default {
} }
``` ```
## API
### IndexBar Props ### IndexBar Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,6 +1,6 @@
## IndexBar 索引栏 # IndexBar 索引栏
### 使用指南 ### 引入
``` javascript ``` javascript
import { IndexBar, IndexAnchor } from 'vant'; import { IndexBar, IndexAnchor } from 'vant';
@ -8,9 +8,9 @@ import { IndexBar, IndexAnchor } from 'vant';
Vue.use(IndexBar).use(IndexAnchor); Vue.use(IndexBar).use(IndexAnchor);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
点击索引栏时,会自动跳转到对应的`IndexAnchor`锚点位置 点击索引栏时,会自动跳转到对应的`IndexAnchor`锚点位置
@ -30,7 +30,7 @@ Vue.use(IndexBar).use(IndexAnchor);
</van-index-bar> </van-index-bar>
``` ```
#### 自定义索引列表 ### 自定义索引列表
可以通过`index-list`属性自定义展示的索引字符列表, 可以通过`index-list`属性自定义展示的索引字符列表,
@ -60,6 +60,8 @@ export default {
} }
``` ```
## API
### IndexBar Props ### IndexBar Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Lazyload # Lazyload
### Install ### Install
@ -9,9 +9,9 @@ import { Lazyload } from 'vant';
Vue.use(Lazyload, options); Vue.use(Lazyload, options);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<img v-for="img in imageList" v-lazy="img" > <img v-for="img in imageList" v-lazy="img" >
@ -30,14 +30,15 @@ export default {
} }
``` ```
#### Lazyload Background Image ### Lazyload Background Image
Use `v-lazy:background-image` to set background url, and declare the height of the container. Use `v-lazy:background-image` to set background url, and declare the height of the container.
```html ```html
<div v-for="img in imageList" v-lazy:background-image="img" /> <div v-for="img in imageList" v-lazy:background-image="img" />
``` ```
#### Lazyload Component ### Lazyload Component
```html ```html
<lazy-component> <lazy-component>
@ -45,6 +46,8 @@ Use `v-lazy:background-image` to set background url, and declare the height of t
</lazy-component> </lazy-component>
``` ```
## API
### Options ### Options
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,6 +1,6 @@
## Lazyload 图片懒加载 # Lazyload 图片懒加载
### 使用指南 ### 引入
`Lazyload``Vue` 指令,使用前需要对指令进行注册 `Lazyload``Vue` 指令,使用前需要对指令进行注册
@ -12,9 +12,10 @@ import { Lazyload } from 'vant';
Vue.use(Lazyload, options); Vue.use(Lazyload, options);
``` ```
### 代码演示 ## 代码演示
### 基础用法
#### 基础用法
`v-lazy`指令的值设置为你需要懒加载的图片 `v-lazy`指令的值设置为你需要懒加载的图片
```html ```html
@ -34,7 +35,7 @@ export default {
} }
``` ```
#### 背景图懒加载 ### 背景图懒加载
和图片懒加载不同,背景图懒加载需要使用`v-lazy:background-image`,值设置为背景图片的地址,需要注意的是必须声明容器高度。 和图片懒加载不同,背景图懒加载需要使用`v-lazy:background-image`,值设置为背景图片的地址,需要注意的是必须声明容器高度。
@ -42,7 +43,7 @@ export default {
<div v-for="img in imageList" v-lazy:background-image="img" /> <div v-for="img in imageList" v-lazy:background-image="img" />
``` ```
#### 懒加载模块 ### 懒加载模块
懒加载模块需要使用到`lazy-component`,将需要懒加载的内容放在`lazy-component`中即可。 懒加载模块需要使用到`lazy-component`,将需要懒加载的内容放在`lazy-component`中即可。
@ -52,6 +53,8 @@ export default {
</lazy-component> </lazy-component>
``` ```
## API
### Options ### Options
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,16 +1,20 @@
## List # List
### Intro
A list component to show items and control loading status. A list component to show items and control loading status.
### Install ### Install
``` javascript ``` javascript
import { List } from 'vant'; import { List } from 'vant';
Vue.use(List); Vue.use(List);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-list <van-list
@ -91,6 +95,8 @@ export default {
} }
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,16 +1,20 @@
## List 列表 # List 列表
### 介绍
瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。 瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。
### 使用指南 ### 引入
``` javascript ``` javascript
import { List } from 'vant'; import { List } from 'vant';
Vue.use(List); Vue.use(List);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
List 组件通过`loading``finished`两个变量控制加载状态,当组件滚动到底部时,会触发`load`事件并将`loading`设置成`true`。此时可以发起异步操作并更新数据,数据更新完毕后,将`loading`设置成`false`即可。若数据已全部加载完毕,则直接将`finished`设置成`true`即可。 List 组件通过`loading``finished`两个变量控制加载状态,当组件滚动到底部时,会触发`load`事件并将`loading`设置成`true`。此时可以发起异步操作并更新数据,数据更新完毕后,将`loading`设置成`false`即可。若数据已全部加载完毕,则直接将`finished`设置成`true`即可。
@ -98,6 +102,8 @@ export default {
} }
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,40 +1,43 @@
## Loading # Loading
### Install ### Install
``` javascript ``` javascript
import { Loading } from 'vant'; import { Loading } from 'vant';
Vue.use(Loading); Vue.use(Loading);
``` ```
### Usage ## Usage
#### Type ### Type
```html ```html
<van-loading /> <van-loading />
<van-loading type="spinner" /> <van-loading type="spinner" />
``` ```
#### Color ### Color
```html ```html
<van-loading color="#1989fa" /> <van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
``` ```
#### Text ### Text
```html ```html
<van-loading size="24px">Loading...</van-loading> <van-loading size="24px">Loading...</van-loading>
``` ```
#### Vertical ### Vertical
```html ```html
<van-loading size="24px" vertical>Loading...</van-loading> <van-loading size="24px" vertical>Loading...</van-loading>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,40 +1,43 @@
## Loading 加载 # Loading 加载
### 引入
### 使用指南
``` javascript ``` javascript
import { Loading } from 'vant'; import { Loading } from 'vant';
Vue.use(Loading); Vue.use(Loading);
``` ```
### 代码演示 ## 代码演示
#### 加载类型 ### 加载类型
```html ```html
<van-loading /> <van-loading />
<van-loading type="spinner" /> <van-loading type="spinner" />
``` ```
#### 自定义颜色 ### 自定义颜色
```html ```html
<van-loading color="#1989fa" /> <van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />
``` ```
#### 加载文案 ### 加载文案
```html ```html
<van-loading size="24px">加载中...</van-loading> <van-loading size="24px">加载中...</van-loading>
``` ```
#### 垂直排列 ### 垂直排列
```html ```html
<van-loading size="24px" vertical>加载中...</van-loading> <van-loading size="24px" vertical>加载中...</van-loading>
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,7 +1,11 @@
## Internationalization # Internationalization
### Intro
The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below. The default language of Vant is Chinese. If you want to use other languages, you can follow the instructions below.
### Switch languages ### Switch languages
Vant supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to diffrent languages. Vant supports multiple languages with the Locale component, and the `Locale.use` method allows you to switch to diffrent languages.
```js ```js
@ -12,6 +16,7 @@ Locale.use('en-US', enUS);
``` ```
### Modify default configs ### Modify default configs
Use `Locale.add` method to modify the default configs. Use `Locale.add` method to modify the default configs.
```js ```js
@ -29,6 +34,7 @@ Locale.add(messages);
``` ```
### Config files ### Config files
Current supported languages: Current supported languages:
| Language | Filename | | Language | Filename |

View File

@ -1,7 +1,11 @@
## 国际化 # 国际化
### 介绍
Vant 默认采用中文作为语言,如果需要使用其他语言,可以参考下面的方案 Vant 默认采用中文作为语言,如果需要使用其他语言,可以参考下面的方案
### 多语言切换 ### 多语言切换
Vant 通过 Locale 组件实现多语言支持,使用 `Locale.use` 方法可以切换当前使用的语言。 Vant 通过 Locale 组件实现多语言支持,使用 `Locale.use` 方法可以切换当前使用的语言。
```js ```js
@ -12,6 +16,7 @@ Locale.use('en-US', enUS);
``` ```
### 修改默认文案 ### 修改默认文案
通过 `Locale.add` 方法可以实现文案的修改和扩展,示例如下: 通过 `Locale.add` 方法可以实现文案的修改和扩展,示例如下:
```js ```js

View File

@ -1,15 +1,16 @@
## NavBar # NavBar
### Install ### Install
``` javascript ``` javascript
import { NavBar } from 'vant'; import { NavBar } from 'vant';
Vue.use(NavBar); Vue.use(NavBar);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-nav-bar <van-nav-bar
@ -35,7 +36,7 @@ export default {
} }
``` ```
#### Advanced Usage ### Advanced Usage
```html ```html
<van-nav-bar title="Title" left-text="Back" left-arrow> <van-nav-bar title="Title" left-text="Back" left-arrow>
@ -43,6 +44,7 @@ export default {
</van-nav-bar> </van-nav-bar>
``` ```
## API
### Props ### Props

View File

@ -1,15 +1,16 @@
## NavBar 导航栏 # NavBar 导航栏
### 引入
### 使用指南
``` javascript ``` javascript
import { NavBar } from 'vant'; import { NavBar } from 'vant';
Vue.use(NavBar); Vue.use(NavBar);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<van-nav-bar <van-nav-bar
@ -35,7 +36,8 @@ export default {
} }
``` ```
#### 高级用法 ### 高级用法
通过插槽定制内容 通过插槽定制内容
```html ```html
@ -44,6 +46,7 @@ export default {
</van-nav-bar> </van-nav-bar>
``` ```
## API
### Props ### Props

View File

@ -1,15 +1,16 @@
## NoticeBar # NoticeBar
### Install ### Install
``` javascript ``` javascript
import { NoticeBar } from 'vant'; import { NoticeBar } from 'vant';
Vue.use(NoticeBar); Vue.use(NoticeBar);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-notice-bar <van-notice-bar
@ -18,7 +19,7 @@ Vue.use(NoticeBar);
/> />
``` ```
#### Disable scroll ### Disable scroll
```html ```html
<van-notice-bar :scrollable="false"> <van-notice-bar :scrollable="false">
@ -26,7 +27,7 @@ Vue.use(NoticeBar);
</van-notice-bar> </van-notice-bar>
``` ```
#### Wrapable ### Wrapable
```html ```html
<van-notice-bar wrapable :scrollable="false"> <van-notice-bar wrapable :scrollable="false">
@ -34,7 +35,7 @@ Vue.use(NoticeBar);
</van-notice-bar> </van-notice-bar>
``` ```
#### Mode ### Mode
```html ```html
<van-notice-bar mode="closeable"> <van-notice-bar mode="closeable">
@ -58,6 +59,8 @@ Vue.use(NoticeBar);
</van-notice-bar> </van-notice-bar>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,16 @@
## NoticeBar 通知栏 # NoticeBar 通知栏
### 引入
### 使用指南
``` javascript ``` javascript
import { NoticeBar } from 'vant'; import { NoticeBar } from 'vant';
Vue.use(NoticeBar); Vue.use(NoticeBar);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<van-notice-bar <van-notice-bar
@ -18,7 +19,7 @@ Vue.use(NoticeBar);
/> />
``` ```
#### 禁用滚动 ### 禁用滚动
文字内容多于一行时,可通过`scrollable`参数控制是否开启滚动 文字内容多于一行时,可通过`scrollable`参数控制是否开启滚动
@ -28,7 +29,7 @@ Vue.use(NoticeBar);
</van-notice-bar> </van-notice-bar>
``` ```
#### 多行展示 ### 多行展示
禁用滚动时,可以设置`wrapable`来开启多行展示 禁用滚动时,可以设置`wrapable`来开启多行展示
@ -38,7 +39,7 @@ Vue.use(NoticeBar);
</van-notice-bar> </van-notice-bar>
``` ```
#### 通知栏模式 ### 通知栏模式
默认模式为空,支持`closeable``link`两种模式 默认模式为空,支持`closeable``link`两种模式
@ -66,6 +67,8 @@ Vue.use(NoticeBar);
</van-notice-bar> </van-notice-bar>
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Notify # Notify
### Install ### Install
@ -8,15 +8,15 @@ import { Notify } from 'vant';
Vue.use(Notify); Vue.use(Notify);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```js ```js
Notify('Notify Message'); Notify('Notify Message');
``` ```
#### Custom Config ### Custom Config
```js ```js
Notify({ Notify({
@ -26,7 +26,7 @@ Notify({
}); });
``` ```
#### $notify Method ### $notify Method
After import the Notify component, the $notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component. After import the Notify component, the $notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
@ -38,6 +38,8 @@ export default {
} }
``` ```
## API
### Methods ### Methods
| Methods | Attribute | Return value | Description | | Methods | Attribute | Return value | Description |

View File

@ -1,21 +1,22 @@
## Notify 消息提示 # Notify 消息提示
### 引入
### 使用指南
``` javascript ``` javascript
import { Notify } from 'vant'; import { Notify } from 'vant';
Vue.use(Notify); Vue.use(Notify);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```js ```js
Notify('通知内容'); Notify('通知内容');
``` ```
#### 自定义配置 ### 自定义配置
```js ```js
Notify({ Notify({
@ -25,7 +26,7 @@ Notify({
}); });
``` ```
#### 组件内调用 ### 组件内调用
引入 Notify 组件后,会自动在 Vue 的 prototype 上挂载 $notify 方法,便于在组件内调用。 引入 Notify 组件后,会自动在 Vue 的 prototype 上挂载 $notify 方法,便于在组件内调用。
@ -37,6 +38,8 @@ export default {
} }
``` ```
## API
### 方法 ### 方法
| 方法名 | 参数 | 返回值 | 介绍 | | 方法名 | 参数 | 返回值 | 介绍 |

View File

@ -1,4 +1,4 @@
## NumberKeyboard # NumberKeyboard
### Install ### Install
``` javascript ``` javascript
@ -7,9 +7,9 @@ import { NumberKeyboard } from 'vant';
Vue.use(NumberKeyboard); Vue.use(NumberKeyboard);
``` ```
### Usage ## Usage
#### Default Style ### Default Style
```html ```html
<van-button @touchstart.stop="show = true"> <van-button @touchstart.stop="show = true">
@ -45,7 +45,7 @@ export default {
} }
``` ```
#### Custom Style ### Custom Style
```html ```html
<van-number-keyboard <van-number-keyboard
@ -59,6 +59,8 @@ export default {
/> />
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,16 @@
## NumberKeyboard 数字键盘 # NumberKeyboard 数字键盘
### 引入
### 使用指南
``` javascript ``` javascript
import { NumberKeyboard } from 'vant'; import { NumberKeyboard } from 'vant';
Vue.use(NumberKeyboard); Vue.use(NumberKeyboard);
``` ```
### 代码演示 ## 代码演示
#### 默认样式 ### 默认样式
```html ```html
<van-button @touchstart.stop="show = true"> <van-button @touchstart.stop="show = true">
@ -45,7 +46,7 @@ export default {
} }
``` ```
#### 自定义样式 ### 自定义样式
```html ```html
<van-number-keyboard <van-number-keyboard
@ -59,6 +60,8 @@ export default {
/> />
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,15 +1,16 @@
## Pagination # Pagination
### Install ### Install
``` javascript ``` javascript
import { Pagination } from 'vant'; import { Pagination } from 'vant';
Vue.use(Pagination); Vue.use(Pagination);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-pagination <van-pagination
@ -29,7 +30,7 @@ export default {
} }
``` ```
#### Simple mode ### Simple mode
```html ```html
<van-pagination <van-pagination
@ -39,7 +40,7 @@ export default {
/> />
``` ```
#### Show ellipses ### Show ellipses
```html ```html
<van-pagination <van-pagination
@ -50,6 +51,8 @@ export default {
/> />
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,17 +1,17 @@
## Pagination 分页 # Pagination 分页
### 引入
### 使用指南
``` javascript ``` javascript
import { Pagination } from 'vant'; import { Pagination } from 'vant';
Vue.use(Pagination); Vue.use(Pagination);
``` ```
### 代码演示 ## 代码演示
#### 基础用法
### 基础用法
```html ```html
<van-pagination <van-pagination
@ -31,7 +31,7 @@ export default {
} }
``` ```
#### 简单模式 ### 简单模式
```html ```html
<van-pagination <van-pagination
@ -41,7 +41,7 @@ export default {
/> />
``` ```
#### 显示省略号 ### 显示省略号
```html ```html
<van-pagination <van-pagination
@ -52,6 +52,8 @@ export default {
/> />
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,15 +1,16 @@
## Panel # Panel
### Install ### Install
``` javascript ``` javascript
import { Panel } from 'vant'; import { Panel } from 'vant';
Vue.use(Panel); Vue.use(Panel);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-panel title="Title" desc="Description" status="Status"> <van-panel title="Title" desc="Description" status="Status">
@ -17,7 +18,7 @@ Vue.use(Panel);
</van-panel> </van-panel>
``` ```
#### Advanced Usage ### Advanced Usage
```html ```html
<van-panel title="Title" desc="Description" status="Status"> <van-panel title="Title" desc="Description" status="Status">
@ -29,6 +30,8 @@ Vue.use(Panel);
</van-panel> </van-panel>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,17 @@
## Panel 面板 # Panel 面板
### 引入
### 使用指南
``` javascript ``` javascript
import { Panel } from 'vant'; import { Panel } from 'vant';
Vue.use(Panel); Vue.use(Panel);
``` ```
### 代码演示 ## 代码演示
### 基础用法
#### 基础用法
面板只是一个容器,里面可以放入自定义的内容 面板只是一个容器,里面可以放入自定义的内容
```html ```html
@ -18,7 +20,8 @@ Vue.use(Panel);
</van-panel> </van-panel>
``` ```
#### 高级用法 ### 高级用法
使用`slot`自定义内容 使用`slot`自定义内容
```html ```html
@ -31,6 +34,8 @@ Vue.use(Panel);
</van-panel> </van-panel>
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,16 +1,20 @@
## PasswordInput # PasswordInput
### Intro
The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number-keyboard) Component. The PasswordInput component is usually used with [NumberKeyboard](#/en-US/number-keyboard) Component.
### Install ### Install
``` javascript ``` javascript
import { PasswordInput, NumberKeyboard } from 'vant'; import { PasswordInput, NumberKeyboard } from 'vant';
Vue.use(PasswordInput).use(NumberKeyboard); Vue.use(PasswordInput).use(NumberKeyboard);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<!-- PasswordInput --> <!-- PasswordInput -->
@ -49,7 +53,7 @@ export default {
} }
``` ```
#### Without mask ### Without mask
```html ```html
<van-password-input <van-password-input
@ -59,6 +63,8 @@ export default {
/> />
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,16 +1,19 @@
## PasswordInput 密码输入框 # PasswordInput 密码输入框
### 介绍
密码输入框组件通常与 [数字键盘](#/zh-CN/number-keyboard) 组件配合使用 密码输入框组件通常与 [数字键盘](#/zh-CN/number-keyboard) 组件配合使用
### 使用指南 ### 引入
``` javascript ``` javascript
import { PasswordInput, NumberKeyboard } from 'vant'; import { PasswordInput, NumberKeyboard } from 'vant';
Vue.use(PasswordInput).use(NumberKeyboard); Vue.use(PasswordInput).use(NumberKeyboard);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<!-- 密码输入框 --> <!-- 密码输入框 -->
@ -49,7 +52,7 @@ export default {
} }
``` ```
#### 明文展示 ### 明文展示
```html ```html
<!-- 密码输入框 --> <!-- 密码输入框 -->

View File

@ -1,16 +1,20 @@
## Picker # Picker
### Intro
The Picker component is usually used with [Popup](#/en-US/popup) Component. The Picker component is usually used with [Popup](#/en-US/popup) Component.
### Install ### Install
``` javascript ``` javascript
import { Picker } from 'vant'; import { Picker } from 'vant';
Vue.use(Picker); Vue.use(Picker);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-picker :columns="columns" @change="onChange" /> <van-picker :columns="columns" @change="onChange" />
@ -31,7 +35,7 @@ export default {
}; };
``` ```
#### Default Index ### Default Index
```html ```html
<van-picker <van-picker
@ -41,7 +45,7 @@ export default {
/> />
``` ```
#### Show Toolbar ### Show Toolbar
```html ```html
<van-picker <van-picker
@ -71,7 +75,7 @@ export default {
}; };
``` ```
#### Disable option ### Disable option
```html ```html
<van-picker :columns="columns" /> <van-picker :columns="columns" />
@ -91,7 +95,7 @@ export default {
}; };
``` ```
#### Multi columns ### Multi columns
```html ```html
<van-picker :columns="columns" @change="onChange" /> <van-picker :columns="columns" @change="onChange" />
@ -127,13 +131,16 @@ export default {
}; };
``` ```
#### Loading ### Loading
When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt
```html ```html
<van-picker :columns="columns" loading /> <van-picker :columns="columns" loading />
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,16 +1,20 @@
## Picker 选择器 # Picker 选择器
### 介绍
选择器组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用 选择器组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
### 使用指南 ### 引入
``` javascript ``` javascript
import { Picker } from 'vant'; import { Picker } from 'vant';
Vue.use(Picker); Vue.use(Picker);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
对于单列选择器,传入数值格式的 columns 即可,同时可以监听选项改变的 change 事件 对于单列选择器,传入数值格式的 columns 即可,同时可以监听选项改变的 change 事件
@ -33,7 +37,7 @@ export default {
}; };
``` ```
#### 默认选中项 ### 默认选中项
单列选择器可以直接通过`default-index`属性设置初始选中项的索引值 单列选择器可以直接通过`default-index`属性设置初始选中项的索引值
@ -45,7 +49,7 @@ export default {
/> />
``` ```
#### 展示顶部栏 ### 展示顶部栏
通常选择器组件会传入`show-toolbar`属性以展示顶部操作栏,并可以监听对应的`confirm``cancel`事件 通常选择器组件会传入`show-toolbar`属性以展示顶部操作栏,并可以监听对应的`confirm``cancel`事件
@ -77,7 +81,7 @@ export default {
}; };
``` ```
#### 禁用选项 ### 禁用选项
选项可以为对象结构,通过设置 disabled 来禁用该选项 选项可以为对象结构,通过设置 disabled 来禁用该选项
@ -99,7 +103,7 @@ export default {
}; };
``` ```
#### 多列联动 ### 多列联动
```html ```html
<van-picker :columns="columns" @change="onChange" /> <van-picker :columns="columns" @change="onChange" />
@ -135,7 +139,7 @@ export default {
}; };
``` ```
#### 加载状态 ### 加载状态
若选择器数据是异步获取的,可以通过 `loading` 属性显示加载提示 若选择器数据是异步获取的,可以通过 `loading` 属性显示加载提示
@ -143,6 +147,8 @@ export default {
<van-picker :columns="columns" loading /> <van-picker :columns="columns" loading />
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,15 +1,16 @@
## Popup # Popup
### Install ### Install
``` javascript ``` javascript
import { Popup } from 'vant'; import { Popup } from 'vant';
Vue.use(Popup); Vue.use(Popup);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
Popup is located in the middle of the screen by default Popup is located in the middle of the screen by default
@ -27,7 +28,7 @@ export default {
}; };
``` ```
#### Position ### Position
Use `position` prop to set popup display position Use `position` prop to set popup display position
@ -37,6 +38,8 @@ Use `position` prop to set popup display position
</van-popup> </van-popup>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,16 @@
## Popup 弹出层 # Popup 弹出层
### 引入
### 使用指南
``` javascript ``` javascript
import { Popup } from 'vant'; import { Popup } from 'vant';
Vue.use(Popup); Vue.use(Popup);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
`Popup`默认从中间弹出 `Popup`默认从中间弹出
@ -27,7 +28,7 @@ export default {
}; };
``` ```
#### 弹出位置 ### 弹出位置
通过`position`属性设置`Popup`弹出位置 通过`position`属性设置`Popup`弹出位置
@ -37,6 +38,8 @@ export default {
</van-popup> </van-popup>
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,15 +1,17 @@
## Progress # Progress
### Install ### Install
``` javascript ``` javascript
import { Progress } from 'vant'; import { Progress } from 'vant';
Vue.use(Progress); Vue.use(Progress);
``` ```
### Usage ## Usage
### Basic Usage
#### Basic Usage
Use 'percentage' prop to set current progress Use 'percentage' prop to set current progress
```html ```html
@ -17,14 +19,15 @@ Use 'percentage' prop to set current progress
``` ```
#### Inactive ### Inactive
```html ```html
<van-progress inactive :percentage="50" /> <van-progress inactive :percentage="50" />
``` ```
#### Custom Style ### Custom Style
Use `pivot-text` to custom textuse `color` to custom bar color Use `pivot-text` to custom textuse `color` to custom bar color
```html ```html
@ -48,6 +51,8 @@ Use `pivot-text` to custom textuse `color` to custom bar color
/> />
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,16 @@
## Progress 进度条 # Progress 进度条
### 引入
### 使用指南
``` javascript ``` javascript
import { Progress } from 'vant'; import { Progress } from 'vant';
Vue.use(Progress); Vue.use(Progress);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
进度条默认为蓝色,使用`percentage`属性来设置当前进度 进度条默认为蓝色,使用`percentage`属性来设置当前进度
@ -17,15 +18,13 @@ Vue.use(Progress);
<van-progress :percentage="50" /> <van-progress :percentage="50" />
``` ```
### 置灰
#### 置灰
```html ```html
<van-progress inactive :percentage="50" /> <van-progress inactive :percentage="50" />
``` ```
### 样式定制
#### 样式定制
可以使用`pivot-text`属性自定义文字,`color`属性自定义进度条颜色 可以使用`pivot-text`属性自定义文字,`color`属性自定义进度条颜色
@ -50,6 +49,8 @@ Vue.use(Progress);
/> />
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,15 +1,17 @@
## PullRefresh # PullRefresh
### Install ### Install
``` javascript ``` javascript
import { PullRefresh } from 'vant'; import { PullRefresh } from 'vant';
Vue.use(PullRefresh); Vue.use(PullRefresh);
``` ```
### Usage ## Usage
### Basic Usage
#### Basic Usage
The `refresh` event will be triggered when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event. The `refresh` event will be triggered when pull refresh, you should set `v-model` to `false` to reset loading status after process refresh event.
```html ```html
@ -39,6 +41,8 @@ export default {
} }
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
@ -53,14 +57,12 @@ export default {
| head-height | Height of head | `Number` | `50` | | head-height | Height of head | `Number` | `50` |
| disabled | Whether to disable | `Boolean` | `false` | | disabled | Whether to disable | `Boolean` | `false` |
### Events ### Events
| Event | Description | Parameters | | Event | Description | Parameters |
|------|------|------| |------|------|------|
| refresh | Triggered when pull refresh | - | | refresh | Triggered when pull refresh | - |
### Slots ### Slots
| Name | Description | | Name | Description |

View File

@ -1,15 +1,16 @@
## PullRefresh 下拉刷新 # PullRefresh 下拉刷新
### 引入
### 使用指南
``` javascript ``` javascript
import { PullRefresh } from 'vant'; import { PullRefresh } from 'vant';
Vue.use(PullRefresh); Vue.use(PullRefresh);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
下拉刷新时会触发 `refresh` 事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 `v-model` 设置为 `false`,表示加载完成。 下拉刷新时会触发 `refresh` 事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 `v-model` 设置为 `false`,表示加载完成。
@ -40,6 +41,8 @@ export default {
} }
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,6 +1,7 @@
## Radio # Radio
### Install ### Install
``` javascript ``` javascript
import { RadioGroup, Radio } from 'vant'; import { RadioGroup, Radio } from 'vant';
@ -8,9 +9,9 @@ Vue.use(RadioGroup);
Vue.use(Radio); Vue.use(Radio);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
Use `v-model` to bind the name of checked radio Use `v-model` to bind the name of checked radio
@ -31,7 +32,7 @@ export default {
}; };
``` ```
#### Disabled ### Disabled
```html ```html
<van-radio-group v-model="radio" disabled> <van-radio-group v-model="radio" disabled>
@ -40,13 +41,13 @@ export default {
</van-radio-group> </van-radio-group>
``` ```
#### Custom Color ### Custom Color
```html ```html
<van-radio checked-color="#07c160">Radio</van-radio> <van-radio checked-color="#07c160">Radio</van-radio>
``` ```
#### Custom Icon ### Custom Icon
Use icon slot to custom icon Use icon slot to custom icon
@ -73,7 +74,7 @@ export default {
} }
``` ```
#### Inside a Cell ### Inside a Cell
```html ```html
<van-radio-group v-model="radio"> <van-radio-group v-model="radio">
@ -88,6 +89,8 @@ export default {
</van-radio-group> </van-radio-group>
``` ```
## API
### Radio Props ### Radio Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,6 +1,7 @@
## Radio 单选框 # Radio 单选框
### 引入
### 使用指南
``` javascript ``` javascript
import { RadioGroup, Radio } from 'vant'; import { RadioGroup, Radio } from 'vant';
@ -8,9 +9,9 @@ Vue.use(RadioGroup);
Vue.use(Radio); Vue.use(Radio);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
通过`v-model`绑定值当前选中项的 name 通过`v-model`绑定值当前选中项的 name
@ -31,7 +32,7 @@ export default {
}; };
``` ```
#### 禁用状态 ### 禁用状态
通过`disabled`属性禁止选项切换,在`van-radio`上设置`disabled`可以禁用单个选项 通过`disabled`属性禁止选项切换,在`van-radio`上设置`disabled`可以禁用单个选项
@ -42,13 +43,13 @@ export default {
</van-radio-group> </van-radio-group>
``` ```
#### 自定义颜色 ### 自定义颜色
```html ```html
<van-radio checked-color="#07c160">复选框</van-radio> <van-radio checked-color="#07c160">复选框</van-radio>
``` ```
#### 自定义图标 ### 自定义图标
通过 icon 插槽自定义图标,可以通过 `slot-scope` 判断是否为选中状态 通过 icon 插槽自定义图标,可以通过 `slot-scope` 判断是否为选中状态
@ -75,7 +76,7 @@ export default {
} }
``` ```
#### 与 Cell 组件一起使用 ### 与 Cell 组件一起使用
此时你需要再引入`Cell``CellGroup`组件。 此时你需要再引入`Cell``CellGroup`组件。
@ -92,6 +93,8 @@ export default {
</van-radio-group> </van-radio-group>
``` ```
## API
### Radio Props ### Radio Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,15 +1,16 @@
## Rate # Rate
### Install ### Install
``` javascript ``` javascript
import { Rate } from 'vant'; import { Rate } from 'vant';
Vue.use(Rate); Vue.use(Rate);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-rate v-model="value" /> <van-rate v-model="value" />
@ -25,7 +26,7 @@ export default {
} }
``` ```
#### Custom Icon ### Custom Icon
```html ```html
<van-rate <van-rate
@ -35,7 +36,7 @@ export default {
/> />
``` ```
#### Custom Style ### Custom Style
```html ```html
<van-rate <van-rate
@ -47,7 +48,7 @@ export default {
/> />
``` ```
#### Half Star ### Half Star
```html ```html
<van-rate <van-rate
@ -68,24 +69,26 @@ export default {
} }
``` ```
#### Custom Count ### Custom Count
```html ```html
<van-rate v-model="value" :count="6" /> <van-rate v-model="value" :count="6" />
``` ```
#### Disabled ### Disabled
```html ```html
<van-rate v-model="value" disabled /> <van-rate v-model="value" disabled />
``` ```
#### Readonly ### Readonly
```html ```html
<van-rate v-model="value" readonly /> <van-rate v-model="value" readonly />
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,15 +1,15 @@
## Rate 评分 # Rate 评分
### 使用指南 ### 引入
``` javascript ``` javascript
import { Rate } from 'vant'; import { Rate } from 'vant';
Vue.use(Rate); Vue.use(Rate);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<van-rate v-model="value" /> <van-rate v-model="value" />
@ -25,7 +25,7 @@ export default {
} }
``` ```
#### 自定义图标 ### 自定义图标
```html ```html
<van-rate <van-rate
@ -35,7 +35,7 @@ export default {
/> />
``` ```
#### 自定义样式 ### 自定义样式
```html ```html
<van-rate <van-rate
@ -47,7 +47,7 @@ export default {
/> />
``` ```
#### 半星 ### 半星
```html ```html
<van-rate <van-rate
@ -68,24 +68,26 @@ export default {
} }
``` ```
#### 自定义数量 ### 自定义数量
```html ```html
<van-rate v-model="value" :count="6" /> <van-rate v-model="value" :count="6" />
``` ```
#### 禁用状态 ### 禁用状态
```html ```html
<van-rate v-model="value" disabled /> <van-rate v-model="value" disabled />
``` ```
#### 只读状态 ### 只读状态
```html ```html
<van-rate v-model="value" readonly /> <van-rate v-model="value" readonly />
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,15 +1,16 @@
## Search # Search
### Install ### Install
``` javascript ``` javascript
import { Search } from 'vant'; import { Search } from 'vant';
Vue.use(Search); Vue.use(Search);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-search placeholder="Placeholder" v-model="value" /> <van-search placeholder="Placeholder" v-model="value" />
@ -23,7 +24,8 @@ export default {
} }
``` ```
#### Listen to Events ### Listen to Events
`search` event will be triggered when click the search button on the keyboard. `search` event will be triggered when click the search button on the keyboard.
`cancel` event will be triggered when click the cancel button. `cancel` event will be triggered when click the cancel button.
@ -42,7 +44,8 @@ Tips: There will be a search button on the keyboard when Search is inside a form
</form> </form>
``` ```
#### Custom Button ### Custom Button
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
```html ```html
@ -56,6 +59,8 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
</van-search> </van-search>
``` ```
## API
### Props ### Props
Search support all native properties of input tagsuch as `maxlength``placeholder``autofocus` Search support all native properties of input tagsuch as `maxlength``placeholder``autofocus`

View File

@ -1,22 +1,25 @@
## Search 搜索 # Search 搜索
### 引入
### 使用指南
``` javascript ``` javascript
import { Search } from 'vant'; import { Search } from 'vant';
Vue.use(Search); Vue.use(Search);
``` ```
### 代码演示 ## 代码演示
### 基础用法
#### 基础用法
`van-search`v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。 `van-search`v-model 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
```html ```html
<van-search placeholder="请输入搜索关键词" v-model="value" /> <van-search placeholder="请输入搜索关键词" v-model="value" />
``` ```
#### 监听对应事件 ### 监听对应事件
`van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发 `van-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的 搜索/回车 按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发
Tips: 在 `van-search` 外层增加 form 标签,并且 action 不为空,即可在 IOS 弹出的输入法中显示搜索按钮 Tips: 在 `van-search` 外层增加 form 标签,并且 action 不为空,即可在 IOS 弹出的输入法中显示搜索按钮
@ -33,7 +36,8 @@ Tips: 在 `van-search` 外层增加 form 标签,并且 action 不为空,即
</form> </form>
``` ```
#### 自定义行动按钮 ### 自定义行动按钮
`van-search` 支持自定义右侧取消按钮,使用名字为 action 的插槽即可。使用此插槽以后,原有的 cancel 事件不再生效。 `van-search` 支持自定义右侧取消按钮,使用名字为 action 的插槽即可。使用此插槽以后,原有的 cancel 事件不再生效。
```html ```html
@ -48,6 +52,8 @@ Tips: 在 `van-search` 外层增加 form 标签,并且 action 不为空,即
</van-search> </van-search>
``` ```
## API
### Props ### Props
Search 默认支持 Input 标签所有的原生属性,比如 `maxlength``placeholder``autofocus` Search 默认支持 Input 标签所有的原生属性,比如 `maxlength``placeholder``autofocus`

View File

@ -1,4 +1,4 @@
## Sidebar # Sidebar
### Install ### Install
@ -9,9 +9,9 @@ Vue.use(Sidebar);
Vue.use(SidebarItem); Vue.use(SidebarItem);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
Use `active-key` prop to set index of chosen item Use `active-key` prop to set index of chosen item
@ -40,6 +40,8 @@ export default {
}; };
``` ```
## API
### Sidebar Props ### Sidebar Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,6 +1,6 @@
## Sidebar 侧边导航 # Sidebar 侧边导航
### 使用指南 ### 引入
``` javascript ``` javascript
import { Sidebar, SidebarItem } from 'vant'; import { Sidebar, SidebarItem } from 'vant';
@ -9,9 +9,9 @@ Vue.use(Sidebar);
Vue.use(SidebarItem); Vue.use(SidebarItem);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
通过在`van-sidebar`上设置`active-key`属性来控制选中项 通过在`van-sidebar`上设置`active-key`属性来控制选中项
@ -40,6 +40,8 @@ export default {
}; };
``` ```
## API
### Sidebar Props ### Sidebar Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,4 +1,4 @@
## Skeleton # Skeleton
### Install ### Install
@ -8,21 +8,21 @@ import { Skeleton } from 'vant';
Vue.use(Skeleton); Vue.use(Skeleton);
``` ```
### Usage ## Usage
#### Basic Usage ### Basic Usage
```html ```html
<van-skeleton title :row="3" /> <van-skeleton title :row="3" />
``` ```
#### Show Avatar ### Show Avatar
```html ```html
<van-skeleton title avatar :row="3" /> <van-skeleton title avatar :row="3" />
``` ```
#### Show Children ### Show Children
```html ```html
<van-skeleton <van-skeleton
@ -48,6 +48,8 @@ export default {
}; };
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

View File

@ -1,6 +1,6 @@
## Skeleton 骨架屏 # Skeleton 骨架屏
### 使用指南 ### 引入
``` javascript ``` javascript
import { Skeleton } from 'vant'; import { Skeleton } from 'vant';
@ -8,9 +8,9 @@ import { Skeleton } from 'vant';
Vue.use(Skeleton); Vue.use(Skeleton);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
通过`title`属性显示标题占位图,通过`row`属性配置占位段落行数 通过`title`属性显示标题占位图,通过`row`属性配置占位段落行数
@ -18,7 +18,7 @@ Vue.use(Skeleton);
<van-skeleton title :row="3" /> <van-skeleton title :row="3" />
``` ```
#### 显示头像 ### 显示头像
通过`avatar`属性显示头像占位图 通过`avatar`属性显示头像占位图
@ -26,7 +26,7 @@ Vue.use(Skeleton);
<van-skeleton title avatar :row="3" /> <van-skeleton title avatar :row="3" />
``` ```
#### 展示子组件 ### 展示子组件
`loading`属性设置成`false`表示内容加载完成,此时会隐藏占位图,并显示`Skeleton`的子组件 `loading`属性设置成`false`表示内容加载完成,此时会隐藏占位图,并显示`Skeleton`的子组件
@ -54,6 +54,8 @@ export default {
}; };
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |

View File

@ -1,14 +1,16 @@
## Sku # Sku
### Install ### Install
```javascript ```javascript
import { Sku } from 'vant'; import { Sku } from 'vant';
Vue.use(Sku); Vue.use(Sku);
``` ```
### Usage ## Usage
#### Basic Usage
### Basic Usage
```html ```html
<van-sku <van-sku
@ -29,7 +31,7 @@ Vue.use(Sku);
/> />
``` ```
#### Custom Stepper Config ### Custom Stepper Config
```html ```html
<van-sku <van-sku
@ -46,7 +48,7 @@ Vue.use(Sku);
/> />
``` ```
#### Advanced Usage ### Advanced Usage
```html ```html
<van-sku <van-sku
@ -96,6 +98,8 @@ Vue.use(Sku);
</van-sku> </van-sku>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
@ -150,9 +154,7 @@ Use ref to get sku instance and call instance methods
| sku-messages | Custom messages | | sku-messages | Custom messages |
| sku-actions | Custom button actions | | sku-actions | Custom button actions |
#### Data Structure ### Sku Data Structure
#### Sku Data Structure
```javascript ```javascript
sku: { sku: {
@ -201,7 +203,7 @@ sku: {
} }
``` ```
#### initialSku Data Structure ### initialSku Data Structure
```javascript ```javascript
{ {
@ -213,7 +215,7 @@ sku: {
} }
``` ```
#### Goods Data Structure ### Goods Data Structure
```javascript ```javascript
goods: { goods: {
@ -223,7 +225,7 @@ goods: {
``` ```
#### customStepperConfig Data Structure ### customStepperConfig Data Structure
```javascript ```javascript
customStepperConfig: { customStepperConfig: {
@ -249,7 +251,7 @@ customStepperConfig: {
} }
``` ```
#### messageConfig Data Structure ### messageConfig Data Structure
```javascript ```javascript
messageConfig: { messageConfig: {
@ -270,7 +272,7 @@ messageConfig: {
} }
``` ```
#### Events Params Data Structure ### Events Params Data Structure
```javascript ```javascript
skuData: { skuData: {

View File

@ -1,15 +1,16 @@
## Sku 商品规格 # Sku 商品规格
### 引入
### 使用指南
```javascript ```javascript
import { Sku } from 'vant'; import { Sku } from 'vant';
Vue.use(Sku); Vue.use(Sku);
``` ```
### 代码演示 ## 代码演示
#### 基础用法 ### 基础用法
```html ```html
<van-sku <van-sku
@ -30,7 +31,7 @@ Vue.use(Sku);
/> />
``` ```
#### 自定义步进器 ### 自定义步进器
```html ```html
<van-sku <van-sku
@ -47,7 +48,7 @@ Vue.use(Sku);
/> />
``` ```
#### 高级用法 ### 高级用法
```html ```html
<van-sku <van-sku
@ -97,6 +98,8 @@ Vue.use(Sku);
</van-sku> </van-sku>
``` ```
## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
@ -155,9 +158,7 @@ Sku 组件默认划分好了若干区块,这些区块都定义成了插槽,
| sku-messages | 商品留言区 | | sku-messages | 商品留言区 |
| sku-actions | 操作按钮区 | | sku-actions | 操作按钮区 |
### 数据结构 ### sku 对象结构
#### sku 对象结构
```javascript ```javascript
sku: { sku: {
@ -210,7 +211,7 @@ sku: {
} }
``` ```
#### initialSku 对象结构 ### initialSku 对象结构
```javascript ```javascript
{ {
@ -223,7 +224,7 @@ sku: {
} }
``` ```
#### goods 对象结构 ### goods 对象结构
```javascript ```javascript
goods: { goods: {
@ -234,7 +235,7 @@ goods: {
} }
``` ```
#### customStepperConfig 对象结构 ### customStepperConfig 对象结构
```javascript ```javascript
customStepperConfig: { customStepperConfig: {
@ -260,7 +261,7 @@ customStepperConfig: {
} }
``` ```
#### messageConfig Data Structure ### messageConfig Data Structure
```javascript ```javascript
messageConfig: { messageConfig: {
@ -281,7 +282,7 @@ messageConfig: {
} }
``` ```
#### 添加购物车和点击购买回调函数接收的 skuData 对象结构 ### 添加购物车和点击购买回调函数接收的 skuData 对象结构
```javascript ```javascript
skuData: { skuData: {

View File

@ -1,14 +1,16 @@
## Slider # Slider
### Install ### Install
``` javascript ``` javascript
import { Slider } from 'vant'; import { Slider } from 'vant';
Vue.use(Slider); Vue.use(Slider);
``` ```
### Usage ## Usage
#### Basic Usage
### Basic Usage
```html ```html
<van-slider v-model="value" @change="onChange" /> <van-slider v-model="value" @change="onChange" />
@ -30,25 +32,25 @@ export default {
}; };
``` ```
#### Range ### Range
```html ```html
<van-slider v-model="value" :min="10" :max="90" /> <van-slider v-model="value" :min="10" :max="90" />
``` ```
#### Disabled ### Disabled
```html ```html
<van-slider v-model="value" disabled /> <van-slider v-model="value" disabled />
``` ```
#### Step size ### Step size
```html ```html
<van-slider v-model="value" :step="10" /> <van-slider v-model="value" :step="10" />
``` ```
#### Custom style ### Custom style
```html ```html
<van-slider <van-slider
@ -58,7 +60,7 @@ export default {
/> />
``` ```
#### Custom button ### Custom button
```html ```html
<van-slider <van-slider
@ -74,7 +76,7 @@ export default {
</van-slider> </van-slider>
``` ```
#### Vertical ### Vertical
```html ```html
<div :style="{ height: '100px' }"> <div :style="{ height: '100px' }">
@ -82,6 +84,8 @@ export default {
</div> </div>
``` ```
## API
### Props ### Props
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |

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