mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-20 10:59:46 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
5a9ba13452
12
README.md
12
README.md
@ -5,13 +5,11 @@
|
||||
<h3 align="center" style="margin: 30px 0 35px;">Mobile UI Components built on Vue</h3>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://img.shields.io/npm/v/vant.svg?style=flat-square" alt="npm version" />
|
||||
<img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square" alt="Coverage Status" />
|
||||
<img src="https://travis-ci.org/youzan/vant.svg?branch=master" alt="Build Status" />
|
||||
<img src="https://img.shields.io/npm/dt/vant.svg?style=flat-square" alt="downloads" />
|
||||
<img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square" alt="downloads" />
|
||||
<img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=JS%20gzip%20size" alt="JS Gzip Size" />
|
||||
<img src="https://img.badgesize.io/https://unpkg.com/vant/lib/index.css?compression=gzip&style=flat-square&label=CSS%20gzip%20size" alt="CSS Gzip Size" />
|
||||
<img src="https://img.shields.io/npm/v/vant.svg?style=for-the-badge" alt="npm version" />
|
||||
<img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=for-the-badge" alt="npm version" />
|
||||
<img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=for-the-badge&color=#4fc08d" alt="Coverage Status" />
|
||||
<img src="https://img.shields.io/npm/dm/vant.svg?style=for-the-badge&color=#4fc08d" alt="downloads" />
|
||||
<img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=for-the-badge&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
|
||||
@ -4,13 +4,11 @@
|
||||
<h3 align="center" style="margin: 30px 0 35px;">轻量、可靠的移动端 Vue 组件库</h3>
|
||||
|
||||
<p align="center">
|
||||
<img src="https://img.shields.io/npm/v/vant.svg?style=flat-square" alt="npm version" />
|
||||
<img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square" alt="Coverage Status" />
|
||||
<img src="https://travis-ci.org/youzan/vant.svg?branch=master" alt="Build Status" />
|
||||
<img src="https://img.shields.io/npm/dt/vant.svg?style=flat-square" alt="downloads" />
|
||||
<img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square" alt="downloads" />
|
||||
<img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=JS%20gzip%20size" alt="JS Gzip Size" />
|
||||
<img src="https://img.badgesize.io/https://unpkg.com/vant/lib/index.css?compression=gzip&style=flat-square&label=CSS%20gzip%20size" alt="CSS Gzip Size" />
|
||||
<img src="https://img.shields.io/npm/v/vant.svg?style=for-the-badge" alt="npm version" />
|
||||
<img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=for-the-badge" alt="npm version" />
|
||||
<img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=for-the-badge&color=#4fc08d" alt="Coverage Status" />
|
||||
<img src="https://img.shields.io/npm/dm/vant.svg?style=for-the-badge&color=#4fc08d" alt="downloads" />
|
||||
<img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=for-the-badge&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
|
||||
@ -1,210 +1,328 @@
|
||||
# Changelog
|
||||
|
||||
### [v2.5.3](https://github.com/youzan/vant/compare/v2.5.2...v2.5.3)
|
||||
|
||||
`2020-02-28`
|
||||
|
||||
**Feature**
|
||||
|
||||
- ActionSheet: add close-on-popstate prop [#5716](https://github.com/youzan/vant/issues/5716)
|
||||
- Area: add columns-top、columns-bottom prop [#5719](https://github.com/youzan/vant/issues/5719)
|
||||
- Area: add title slot [#5719](https://github.com/youzan/vant/issues/5719)
|
||||
- Button: add icon-prefix prop [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- Cell: add icon-prefix prop [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- Field: add icon-prefix prop [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- Form: rule message can be function [#5704](https://github.com/youzan/vant/issues/5704)
|
||||
- Form: rule validator add rule param [#5704](https://github.com/youzan/vant/issues/5704)
|
||||
- Form: support pattern rule [#5700](https://github.com/youzan/vant/issues/5700)
|
||||
- Form: support rule formatter [d87835](https://github.com/youzan/vant/commit/d878354ebf8eedf849764480c11a90c4cdd2fbe3)
|
||||
- GridItem: add icon-prefix prop [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- Rate: add icon-prefix prop [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- TabbarItem: add icon-prefix prop [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: scrollIntoView error when hidden [#5708](https://github.com/youzan/vant/issues/5708)
|
||||
- DatetimePicker: getPicker method not work [#5710](https://github.com/youzan/vant/issues/5710)
|
||||
- Popup: close-on-popstate not work when deactivated [f07077](https://github.com/youzan/vant/commit/f070773b42b86dd98d1f3989651e735895db78ee)
|
||||
|
||||
### [v2.5.2](https://github.com/youzan/vant/compare/v2.5.1...v2.5.2)
|
||||
|
||||
`2020-02-21`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: add close、closed event [556f33](https://github.com/youzan/vant/commit/556f335cc224a40ab27bda863a67601c36339ea9)
|
||||
- Calendar: add open、opened event [a83082](https://github.com/youzan/vant/commit/a83082f599362456d85864904cb5f47b44138e43)
|
||||
- Form: add scroll-to-error prop [#5680](https://github.com/youzan/vant/issues/5680)
|
||||
- Form: add validate-trigger prop [c08db7](https://github.com/youzan/vant/commit/c08db724a3ed6440da5d5faebfa08561312f4d3a)
|
||||
- Form: add scrollToField method [#5680](https://github.com/youzan/vant/issues/5680)
|
||||
- Sku: add preview-on-click-image prop [#5684](https://github.com/youzan/vant/issues/5684)
|
||||
- Sku: add sku-header-image-extra slot [#5696](https://github.com/youzan/vant/issues/5696)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Swipe: fix wrap problems caused by decimal width in some android devices [02afe7](https://github.com/youzan/vant/commit/02afe720c6aaeeb58036cde3072b6373e3b9254f)
|
||||
|
||||
### [v2.5.1](https://github.com/youzan/vant/compare/v2.5.1-beta.0...v2.5.1)
|
||||
|
||||
`2020-02-18`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Sku: support define initialMessages
|
||||
- Calendar: scroll to current month after reset [407b7d](https://github.com/youzan/vant/commit/407b7ded43bc87c98605444dbbb829f5f05744b6)
|
||||
- Calendar: scroll to currecnt month when default-date changed [#5664](https://github.com/youzan/vant/issues/5664)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: add Math.floor to avoid decimal height issues [#5640](https://github.com/youzan/vant/issues/5640)
|
||||
- Calendar: should not check range in single mode [79d2c3](https://github.com/youzan/vant/commit/79d2c344f9ee9945b09434b35cbe63a3816410ad)
|
||||
- Form: error-message-align prop type [#5674](https://github.com/youzan/vant/issues/5674)
|
||||
- Swipe: incorrect width when resize in invisible state [#5678](https://github.com/youzan/vant/issues/5678)
|
||||
|
||||
### [v2.5.0](https://github.com/youzan/vant/compare/v2.4.7...v2.5.0)
|
||||
|
||||
`2020-02-15`
|
||||
|
||||
**New Component**
|
||||
|
||||
- add Form component
|
||||
|
||||
**Feature**
|
||||
|
||||
- Field: add name prop [f3398d](https://github.com/youzan/vant/commit/f3398dc2cdd1191613b97454b4725275458bde1b)
|
||||
- Field: add rules prop [0ed7aa](https://github.com/youzan/vant/commit/0ed7aaac88f769549b688259b8e6e1050a10cb99)
|
||||
- AddressEdit: add disable-area prop [#5630](https://github.com/youzan/vant/issues/5630)
|
||||
- AddressList: add item-bottom slot [#5629](https://github.com/youzan/vant/issues/5629)
|
||||
- RadioGroup: add direction prop [4dd41b](https://github.com/youzan/vant/commit/4dd41b23decbaf86c8812e0afcc1d72773f223f6)
|
||||
- CheckboxGroup: add direction prop [153902](https://github.com/youzan/vant/commit/15390241d8d4252a828aa0e9d8c61377ba07512a)
|
||||
- ImagePreview: add scale event [#5658](https://github.com/youzan/vant/issues/5658)
|
||||
- ImagePreview: add closeable prop [#5654](https://github.com/youzan/vant/issues/5654)
|
||||
|
||||
**Style**
|
||||
|
||||
- Field: input slot vertical align center [03c826](https://github.com/youzan/vant/commit/03c826c4d44efd95a5ee509b5f183d8ded574fd7)
|
||||
- Field: improve label right padding [2d6445](https://github.com/youzan/vant/commit/2d64458776df87625db9e8b07d83a7044a2bcf53)
|
||||
- Uploader: add uploader disabled style [#5628](https://github.com/youzan/vant/issues/5628)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: fix render issues in some devices [#5640](https://github.com/youzan/vant/issues/5640)
|
||||
- Dialog: fix Dialog.Component typing [#5646](https://github.com/youzan/vant/issues/5646)
|
||||
- Field: text-fill-color may affect child element [e17a4a](https://github.com/youzan/vant/commit/e17a4a24993822b0f35114dacbbb3bebc5b51a60)
|
||||
- Picker: change event untriggered without a transition [#5662](https://github.com/youzan/vant/issues/5662)
|
||||
- Tabs: scrollspy not work when custom scroller [#5637](https://github.com/youzan/vant/issues/5637)
|
||||
- Calendar: should not submit form when click button [e93fcb](https://github.com/youzan/vant/commit/e93fcb0603b988a2ffb5b1651588f7e4ad8aa92d)
|
||||
|
||||
### [v2.4.7](https://github.com/youzan/vant/compare/v2.4.7-beta.0...v2.4.7)
|
||||
|
||||
`2020-02-06`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: improve accessibility [2124cc](https://github.com/youzan/vant/commit/2124cc5261be4a7d666cf6f70d4295309f3705d9)
|
||||
- Field: highlight word num when reaching maxlength [61093e](https://github.com/youzan/vant/commit/61093ef00f2dc421eb94ec7690093c1d565a296c)
|
||||
- Sku: add sku-actions-top slot [#5617](https://github.com/youzan/vant/issues/5617)
|
||||
- Uploader: support failed status [#5624](https://github.com/youzan/vant/issues/5624)
|
||||
- Uploader: support uploading status [#5625](https://github.com/youzan/vant/issues/5625)
|
||||
|
||||
**Style**
|
||||
|
||||
- ActionSheet: add @action-sheet-close-icon-active-color less var [265bfe](https://github.com/youzan/vant/commit/265bfeaac756e05803858062ab1ece2092a08e17)
|
||||
- Popup: add @popup-close-icon-active-color less var [660b03](https://github.com/youzan/vant/commit/660b0399512d3deddcdfb99af5cff1674617c515)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: missing className when selected [0b7c56](https://github.com/youzan/vant/commit/0b7c567a78c85fbf1c3d59fcd3ce76c691040ff1)
|
||||
- Popup: may throw error when using get-container and destroyed
|
||||
|
||||
### [v2.4.6](https://github.com/youzan/vant/compare/v2.4.5...v2.4.6)
|
||||
|
||||
`2020-02-01`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Picker: should watch columns change [#5614](https://github.com/youzan/vant/issues/5614)
|
||||
|
||||
- Picker: should watch columns change [#5614](https://github.com/youzan/vant/issues/5614)
|
||||
|
||||
### [v2.4.5](https://github.com/youzan/vant/compare/v2.4.4...v2.4.5)
|
||||
|
||||
`2020-02-01`
|
||||
|
||||
**Feature**
|
||||
|
||||
* Picker: support cascade columns [#4247](https://github.com/youzan/vant/issues/4247)
|
||||
* Slider: add button-size prop [1e9b8c](https://github.com/youzan/vant/commit/1e9b8c846674562d56ab638a0982baab4bb6870e)
|
||||
* Optimize the props type. The original number type props now support string.
|
||||
- Picker: support cascade columns [#4247](https://github.com/youzan/vant/issues/4247)
|
||||
- Slider: add button-size prop [1e9b8c](https://github.com/youzan/vant/commit/1e9b8c846674562d56ab638a0982baab4bb6870e)
|
||||
- Optimize the props type. The original number type props now support string.
|
||||
|
||||
**Style**
|
||||
|
||||
* DropdownItem: add @dropdown-item-z-index less var [6f4c6f](https://github.com/youzan/vant/commit/6f4c6f5aa6614559cfc24bc361e68c9c938bbb61)
|
||||
* IndexBar: add @index-anchor-z-index less var [89ee8e](https://github.com/youzan/vant/commit/89ee8e38723dadb2daa6ee31c325cdd2ad03ba99)
|
||||
* IndexBar: add @index-bar-sidebar-z-index less var [89ee8e](https://github.com/youzan/vant/commit/89ee8e38723dadb2daa6ee31c325cdd2ad03ba99)
|
||||
* IndexBar: add @index-bar-index-active-color less var [0011db](https://github.com/youzan/vant/commit/0011db75365b60699ae140d85e54b9e477f46a22)
|
||||
* Notify: add @notify-text-color less var [9dcf57](https://github.com/youzan/vant/commit/9dcf57c65f5e046318e953f2e8ce87918b1cb312)
|
||||
* Overlay: add @overlay-z-index less var [95d19f](https://github.com/youzan/vant/commit/95d19f70d1c90efc752074ff764b07787d89cf1e)
|
||||
* Rate: add @rate-icon-disabled-color less var [8b8471](https://github.com/youzan/vant/commit/8b8471945c4313735a5fe59402212f37a31acfea)
|
||||
* Rate: add @rate-icon-full-color less var [5c804c](https://github.com/youzan/vant/commit/5c804cf920b75c5bdf962fa49eae31363783f32f)
|
||||
* Rate: add @rate-icon-void-color less var [f90015](https://github.com/youzan/vant/commit/f90015efe7619af055b9ebd4c8be7da1f17b8da0)
|
||||
* Slider: add @slider-bar-height less var [a5819c](https://github.com/youzan/vant/commit/a5819c286e06469bc41e8aa9e0ed44cc21625dad)
|
||||
* Search: add @search-content-background-color less var [ea7419](https://github.com/youzan/vant/commit/ea74194990314bd1ff1e8237c221be92fdb8ae37)
|
||||
* Step: add @step-active-color less var [9e7a68](https://github.com/youzan/vant/commit/9e7a6874141fa05f0158ca8006c268d0a3d92679)
|
||||
* Tabbar: add @tabbar-z-index less var [0441f7](https://github.com/youzan/vant/commit/0441f7ba098aca24b797de29d10af8f47cf32d15)
|
||||
* NavBar: add @nav-bar-z-index less var [a2d870](https://github.com/youzan/vant/commit/a2d870ad8ee4912226ec8871cc4c2d56ef870902)
|
||||
* NumberKeyboard: add @number-keyboard-z-index less var [760938](https://github.com/youzan/vant/commit/760938962399e0589b4a258ff29e7fe2f3ba90f1)
|
||||
- DropdownItem: add @dropdown-item-z-index less var [6f4c6f](https://github.com/youzan/vant/commit/6f4c6f5aa6614559cfc24bc361e68c9c938bbb61)
|
||||
- IndexBar: add @index-anchor-z-index less var [89ee8e](https://github.com/youzan/vant/commit/89ee8e38723dadb2daa6ee31c325cdd2ad03ba99)
|
||||
- IndexBar: add @index-bar-sidebar-z-index less var [89ee8e](https://github.com/youzan/vant/commit/89ee8e38723dadb2daa6ee31c325cdd2ad03ba99)
|
||||
- IndexBar: add @index-bar-index-active-color less var [0011db](https://github.com/youzan/vant/commit/0011db75365b60699ae140d85e54b9e477f46a22)
|
||||
- Notify: add @notify-text-color less var [9dcf57](https://github.com/youzan/vant/commit/9dcf57c65f5e046318e953f2e8ce87918b1cb312)
|
||||
- Overlay: add @overlay-z-index less var [95d19f](https://github.com/youzan/vant/commit/95d19f70d1c90efc752074ff764b07787d89cf1e)
|
||||
- Rate: add @rate-icon-disabled-color less var [8b8471](https://github.com/youzan/vant/commit/8b8471945c4313735a5fe59402212f37a31acfea)
|
||||
- Rate: add @rate-icon-full-color less var [5c804c](https://github.com/youzan/vant/commit/5c804cf920b75c5bdf962fa49eae31363783f32f)
|
||||
- Rate: add @rate-icon-void-color less var [f90015](https://github.com/youzan/vant/commit/f90015efe7619af055b9ebd4c8be7da1f17b8da0)
|
||||
- Slider: add @slider-bar-height less var [a5819c](https://github.com/youzan/vant/commit/a5819c286e06469bc41e8aa9e0ed44cc21625dad)
|
||||
- Search: add @search-content-background-color less var [ea7419](https://github.com/youzan/vant/commit/ea74194990314bd1ff1e8237c221be92fdb8ae37)
|
||||
- Step: add @step-active-color less var [9e7a68](https://github.com/youzan/vant/commit/9e7a6874141fa05f0158ca8006c268d0a3d92679)
|
||||
- Tabbar: add @tabbar-z-index less var [0441f7](https://github.com/youzan/vant/commit/0441f7ba098aca24b797de29d10af8f47cf32d15)
|
||||
- NavBar: add @nav-bar-z-index less var [a2d870](https://github.com/youzan/vant/commit/a2d870ad8ee4912226ec8871cc4c2d56ef870902)
|
||||
- NumberKeyboard: add @number-keyboard-z-index less var [760938](https://github.com/youzan/vant/commit/760938962399e0589b4a258ff29e7fe2f3ba90f1)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* ImagePreview: limit max-zoom when double clicking [1baa60](https://github.com/youzan/vant/commit/1baa60f2244b4605dc82f6dcf564671f5c623023)
|
||||
* Popup: duration prop not work when position is center [44072e](https://github.com/youzan/vant/commit/44072e8c3f548cff78401780213ab7ef213372c3)
|
||||
* Step: active-color should be effective for line [cfadce](https://github.com/youzan/vant/commit/cfadcefb0a1c29dfb1d940fbb7add746595158bd)
|
||||
|
||||
- ImagePreview: limit max-zoom when double clicking [1baa60](https://github.com/youzan/vant/commit/1baa60f2244b4605dc82f6dcf564671f5c623023)
|
||||
- Popup: duration prop not work when position is center [44072e](https://github.com/youzan/vant/commit/44072e8c3f548cff78401780213ab7ef213372c3)
|
||||
- Step: active-color should be effective for line [cfadce](https://github.com/youzan/vant/commit/cfadcefb0a1c29dfb1d940fbb7add746595158bd)
|
||||
|
||||
### [v2.4.4](https://github.com/youzan/vant/compare/v2.4.3...v2.4.4)
|
||||
|
||||
`2020-01-24`
|
||||
|
||||
**Feature**
|
||||
|
||||
* Card: change thumb fit mode to cover [e766d5](https://github.com/youzan/vant/commit/e766d5d5743e7f492b3601ce4010b8524fb2b016)
|
||||
* Calendar: add get-contaienr prop [#5609](https://github.com/youzan/vant/issues/5609)
|
||||
* Calendar: add close-on-popstate prop [2b82dc](https://github.com/youzan/vant/commit/2b82dcc3dd2dba678aba5e0533e0ff6af7c55b11)
|
||||
* CountDown: add change event [#5599](https://github.com/youzan/vant/issues/5599)
|
||||
* GoodsActionButton: add icon prop [b83bed](https://github.com/youzan/vant/commit/b83bed3b6c41d0896386b3c4b6380c9568bd3ef2)
|
||||
- Card: change thumb fit mode to cover [e766d5](https://github.com/youzan/vant/commit/e766d5d5743e7f492b3601ce4010b8524fb2b016)
|
||||
- Calendar: add get-contaienr prop [#5609](https://github.com/youzan/vant/issues/5609)
|
||||
- Calendar: add close-on-popstate prop [2b82dc](https://github.com/youzan/vant/commit/2b82dcc3dd2dba678aba5e0533e0ff6af7c55b11)
|
||||
- CountDown: add change event [#5599](https://github.com/youzan/vant/issues/5599)
|
||||
- GoodsActionButton: add icon prop [b83bed](https://github.com/youzan/vant/commit/b83bed3b6c41d0896386b3c4b6380c9568bd3ef2)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Sku: get-container can be string type [#5608](https://github.com/youzan/vant/issues/5608)
|
||||
|
||||
- Sku: get-container can be string type [#5608](https://github.com/youzan/vant/issues/5608)
|
||||
|
||||
### [v2.4.3](https://github.com/youzan/vant/compare/v2.4.3-beta.0...v2.4.3)
|
||||
|
||||
`2020-01-19`
|
||||
|
||||
**Feature**
|
||||
|
||||
* Calendar: add max-range、range-prompt prop [#5583](https://github.com/youzan/vant/issues/5583)
|
||||
* ImagePreview: add @image-preview-index-text-shadow var [e2f302](https://github.com/youzan/vant/commit/e2f30242eaaebd36d9816e2746fe6c44323e6aca)
|
||||
* Stepper: add long-press prop [2f3ec6](https://github.com/youzan/vant/commit/2f3ec6a3d48a9d56f8127d27d51c3337f6e72cab)
|
||||
* Swipe: pause autoplay when page hidden [113157](https://github.com/youzan/vant/commit/11315787ec980767973a3fded50fb5858e51e298)
|
||||
- Calendar: add max-range、range-prompt prop [#5583](https://github.com/youzan/vant/issues/5583)
|
||||
- ImagePreview: add @image-preview-index-text-shadow var [e2f302](https://github.com/youzan/vant/commit/e2f30242eaaebd36d9816e2746fe6c44323e6aca)
|
||||
- Stepper: add long-press prop [2f3ec6](https://github.com/youzan/vant/commit/2f3ec6a3d48a9d56f8127d27d51c3337f6e72cab)
|
||||
- Swipe: pause autoplay when page hidden [113157](https://github.com/youzan/vant/commit/11315787ec980767973a3fded50fb5858e51e298)
|
||||
|
||||
**Improvement**
|
||||
|
||||
* Icon: update share icon [2f77ac](https://github.com/youzan/vant/commit/2f77acfc6cef23ea664defc38c4cd806ceca1ee4)
|
||||
* Field: imporve readonly cursor [60173d](https://github.com/youzan/vant/commit/60173dd6bc004339333c50218d7c6b2f6c1bc07b)
|
||||
* Stepper: improve disable-input behavior [959eca](https://github.com/youzan/vant/commit/959eca136c4ca6a39e22d36512db74b93ad100c6)
|
||||
- Icon: update share icon [2f77ac](https://github.com/youzan/vant/commit/2f77acfc6cef23ea664defc38c4cd806ceca1ee4)
|
||||
- Field: imporve readonly cursor [60173d](https://github.com/youzan/vant/commit/60173dd6bc004339333c50218d7c6b2f6c1bc07b)
|
||||
- Stepper: improve disable-input behavior [959eca](https://github.com/youzan/vant/commit/959eca136c4ca6a39e22d36512db74b93ad100c6)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Calendar: should show range prompt after select [ff0901](https://github.com/youzan/vant/commit/ff09011e0ef18ab29dd70b51f412625dd10bb4cb)
|
||||
* GoodsAction: should set wrapper height [#5593](https://github.com/youzan/vant/issues/5593)
|
||||
- Calendar: should show range prompt after select [ff0901](https://github.com/youzan/vant/commit/ff09011e0ef18ab29dd70b51f412625dd10bb4cb)
|
||||
- GoodsAction: should set wrapper height [#5593](https://github.com/youzan/vant/issues/5593)
|
||||
|
||||
**Types**
|
||||
|
||||
* Calendar: fix missing type definition [#5588](https://github.com/youzan/vant/issues/5588)
|
||||
* Toast: incorrect definition of setDefaultOptions method [#5582](https://github.com/youzan/vant/issues/5582)
|
||||
|
||||
- Calendar: fix missing type definition [#5588](https://github.com/youzan/vant/issues/5588)
|
||||
- Toast: incorrect definition of setDefaultOptions method [#5582](https://github.com/youzan/vant/issues/5582)
|
||||
|
||||
### [v2.4.2](https://github.com/youzan/vant/compare/v2.4.2-beta.1...v2.4.2)
|
||||
|
||||
`2020-01-14`
|
||||
|
||||
**Feature**
|
||||
|
||||
* Sku: add properties prop [#5525](https://github.com/youzan/vant/issues/5525)
|
||||
* Field: add digit type [#5524](https://github.com/youzan/vant/issues/5524)
|
||||
* Image: add error-icon prop [#5470](https://github.com/youzan/vant/issues/5470)
|
||||
* Image: add loading-icon prop [#5469](https://github.com/youzan/vant/issues/5469)
|
||||
* Field: add formatter prop [#5534](https://github.com/youzan/vant/issues/5534)
|
||||
* Swipe: add prev、next method [#5548](https://github.com/youzan/vant/issues/5548)
|
||||
* GoodsAcitonIcon: add color prop [#5576](https://github.com/youzan/vant/issues/5576)
|
||||
- Sku: add properties prop [#5525](https://github.com/youzan/vant/issues/5525)
|
||||
- Field: add digit type [#5524](https://github.com/youzan/vant/issues/5524)
|
||||
- Image: add error-icon prop [#5470](https://github.com/youzan/vant/issues/5470)
|
||||
- Image: add loading-icon prop [#5469](https://github.com/youzan/vant/issues/5469)
|
||||
- Field: add formatter prop [#5534](https://github.com/youzan/vant/issues/5534)
|
||||
- Swipe: add prev、next method [#5548](https://github.com/youzan/vant/issues/5548)
|
||||
- GoodsAcitonIcon: add color prop [#5576](https://github.com/youzan/vant/issues/5576)
|
||||
|
||||
**Improvement**
|
||||
|
||||
* AddressEdit: show error message in field [#5479](https://github.com/youzan/vant/issues/5479)
|
||||
* ActionSheet: update close icon style [#5574](https://github.com/youzan/vant/issues/5574)
|
||||
* AddressList: update style [#5507](https://github.com/youzan/vant/issues/5507)
|
||||
* CouponList: update style [#5501](https://github.com/youzan/vant/issues/5501)
|
||||
* Calendar: scroll to current month when show [#5526](https://github.com/youzan/vant/issues/5526)
|
||||
* ImagePreview: improve error image style [#5570](https://github.com/youzan/vant/issues/5570)
|
||||
* improve cursor of all components [c1a535](https://github.com/youzan/vant/commit/c1a535b0dd9470f8eb526e86aa59cf6dec022f3a)
|
||||
- AddressEdit: show error message in field [#5479](https://github.com/youzan/vant/issues/5479)
|
||||
- ActionSheet: update close icon style [#5574](https://github.com/youzan/vant/issues/5574)
|
||||
- AddressList: update style [#5507](https://github.com/youzan/vant/issues/5507)
|
||||
- CouponList: update style [#5501](https://github.com/youzan/vant/issues/5501)
|
||||
- Calendar: scroll to current month when show [#5526](https://github.com/youzan/vant/issues/5526)
|
||||
- ImagePreview: improve error image style [#5570](https://github.com/youzan/vant/issues/5570)
|
||||
- improve cursor of all components [c1a535](https://github.com/youzan/vant/commit/c1a535b0dd9470f8eb526e86aa59cf6dec022f3a)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Button: should not have click feedback when loading [0a70d3](https://github.com/youzan/vant/commit/0a70d344124ef756a73ea9edfee07303f394d880)
|
||||
* Card: thumb image border-radius become effective [#5480](https://github.com/youzan/vant/issues/5480)
|
||||
* Calendar: incorrect month title after auto scroll [#5569](https://github.com/youzan/vant/issues/5569)
|
||||
* Calendar: missing info when selected [#5536](https://github.com/youzan/vant/issues/5536)
|
||||
* Checkbox: only the icon is clickable when label-disabled [3d10d4](https://github.com/youzan/vant/commit/3d10d42fccadd1b9df46860d758a91f7825073e9)
|
||||
* CouponList: incorrect click feedback [#5521](https://github.com/youzan/vant/issues/5521)
|
||||
* Field: should limit number input in iOS [#5520](https://github.com/youzan/vant/issues/5520)
|
||||
* ImagePreview: disable desktop browser image drag [#4487](https://github.com/youzan/vant/issues/4487)
|
||||
* Picker: optimize the click experience [5cbb9e](https://github.com/youzan/vant/commit/5cbb9e29989ac58d44a4ec503cbb984269c8f18e)
|
||||
* PullRefresh: should set height when using head-height [028747](https://github.com/youzan/vant/commit/028747c35471f33e8c2b0baa6fb8915510daac22)
|
||||
* Tabs: can not render line when wrapper is fixed [#5496](https://github.com/youzan/vant/issues/5496)
|
||||
|
||||
- Button: should not have click feedback when loading [0a70d3](https://github.com/youzan/vant/commit/0a70d344124ef756a73ea9edfee07303f394d880)
|
||||
- Card: thumb image border-radius become effective [#5480](https://github.com/youzan/vant/issues/5480)
|
||||
- Calendar: incorrect month title after auto scroll [#5569](https://github.com/youzan/vant/issues/5569)
|
||||
- Calendar: missing info when selected [#5536](https://github.com/youzan/vant/issues/5536)
|
||||
- Checkbox: only the icon is clickable when label-disabled [3d10d4](https://github.com/youzan/vant/commit/3d10d42fccadd1b9df46860d758a91f7825073e9)
|
||||
- CouponList: incorrect click feedback [#5521](https://github.com/youzan/vant/issues/5521)
|
||||
- Field: should limit number input in iOS [#5520](https://github.com/youzan/vant/issues/5520)
|
||||
- ImagePreview: disable desktop browser image drag [#4487](https://github.com/youzan/vant/issues/4487)
|
||||
- Picker: optimize the click experience [5cbb9e](https://github.com/youzan/vant/commit/5cbb9e29989ac58d44a4ec503cbb984269c8f18e)
|
||||
- PullRefresh: should set height when using head-height [028747](https://github.com/youzan/vant/commit/028747c35471f33e8c2b0baa6fb8915510daac22)
|
||||
- Tabs: can not render line when wrapper is fixed [#5496](https://github.com/youzan/vant/issues/5496)
|
||||
|
||||
### [v2.4.1](https://github.com/youzan/vant/compare/v2.4.0...v2.4.1)
|
||||
|
||||
`2020-01-02`
|
||||
|
||||
**Feature**
|
||||
|
||||
* ContactEdit: show error message in field [#5437](https://github.com/youzan/vant/issues/5437)
|
||||
* CouponCell: prefer to use value over denominations [#5438](https://github.com/youzan/vant/issues/5438)
|
||||
- ContactEdit: show error message in field [#5437](https://github.com/youzan/vant/issues/5437)
|
||||
- CouponCell: prefer to use value over denominations [#5438](https://github.com/youzan/vant/issues/5438)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Calendar: fix incorrect day offset [#5452](https://github.com/youzan/vant/issues/5452)
|
||||
* List: fix incorrect reaching edge condition when direction is up [#5439](https://github.com/youzan/vant/issues/5439)
|
||||
|
||||
- Calendar: fix incorrect day offset [#5452](https://github.com/youzan/vant/issues/5452)
|
||||
- List: fix incorrect reaching edge condition when direction is up [#5439](https://github.com/youzan/vant/issues/5439)
|
||||
|
||||
### [v2.4.0](https://github.com/youzan/vant/compare/v2.3.3...v2.4.0)
|
||||
|
||||
`2020-01-01`
|
||||
|
||||
**New Component**
|
||||
|
||||
* add Calendar component
|
||||
- add Calendar component
|
||||
|
||||
|
||||
|
||||
**Feature**
|
||||
|
||||
* List: add error slot [e9a938](https://github.com/youzan/vant/commit/e9a938820232194ad5f62b2b6588fa5d604016ae)
|
||||
* List: add finished slot [8a0705](https://github.com/youzan/vant/commit/8a0705d7610890c0da47e9e7eb0ef5665a3dca0d)
|
||||
* PullRefresh: add success slot [56e450](https://github.com/youzan/vant/commit/56e450f29e67a5e66b26cf9937c458270f462bdc)
|
||||
* CouponList: update button style [#5368](https://github.com/youzan/vant/issues/5368)
|
||||
* DatetimePicker: add getPicker method [1dc1fe](https://github.com/youzan/vant/commit/1dc1feae40b8ca11df980aa1d5ecf108151938e4)
|
||||
* Image: add @image-loading-icon-size、@image-error-icon-size var [d7ae8c](https://github.com/youzan/vant/commit/d7ae8c5a26dcb6b7b79b4ca7a2ed3842673c2ea0)
|
||||
* Picker: add confirm method [5eb2a4](https://github.com/youzan/vant/commit/5eb2a4012ae3e9d90a29a924ae454e54408b1235)
|
||||
* TreeSelect: add @tree-select-item-selected-size var [373159](https://github.com/youzan/vant/commit/37315975203f28d36634d9ad8388a7f4dc8a44ea)
|
||||
- List: add error slot [e9a938](https://github.com/youzan/vant/commit/e9a938820232194ad5f62b2b6588fa5d604016ae)
|
||||
- List: add finished slot [8a0705](https://github.com/youzan/vant/commit/8a0705d7610890c0da47e9e7eb0ef5665a3dca0d)
|
||||
- PullRefresh: add success slot [56e450](https://github.com/youzan/vant/commit/56e450f29e67a5e66b26cf9937c458270f462bdc)
|
||||
- CouponList: update button style [#5368](https://github.com/youzan/vant/issues/5368)
|
||||
- DatetimePicker: add getPicker method [1dc1fe](https://github.com/youzan/vant/commit/1dc1feae40b8ca11df980aa1d5ecf108151938e4)
|
||||
- Image: add @image-loading-icon-size、@image-error-icon-size var [d7ae8c](https://github.com/youzan/vant/commit/d7ae8c5a26dcb6b7b79b4ca7a2ed3842673c2ea0)
|
||||
- Picker: add confirm method [5eb2a4](https://github.com/youzan/vant/commit/5eb2a4012ae3e9d90a29a924ae454e54408b1235)
|
||||
- TreeSelect: add @tree-select-item-selected-size var [373159](https://github.com/youzan/vant/commit/37315975203f28d36634d9ad8388a7f4dc8a44ea)
|
||||
|
||||
**Compatibility**
|
||||
|
||||
* NumberKeyboard: avoid Vue 2.6 event bubble issues [#5349](https://github.com/youzan/vant/issues/5349)
|
||||
* Picker: avoid Vue 2.6 event bubble issues by manually binding events [#5345](https://github.com/youzan/vant/issues/5345)
|
||||
* PullRefresh: avoid Vue 2.6 event bubble issues [#5347](https://github.com/youzan/vant/issues/5347)
|
||||
* Rate、Slider: avoid Vue 2.6 event bubble issues [#5350](https://github.com/youzan/vant/issues/5350)
|
||||
* Swipe: avoid Vue 2.6 event bubble issues [#5346](https://github.com/youzan/vant/issues/5346)
|
||||
* SwipeCell: avoid Vue 2.6 event bubble issues [#5348](https://github.com/youzan/vant/issues/5348)
|
||||
- NumberKeyboard: avoid Vue 2.6 event bubble issues [#5349](https://github.com/youzan/vant/issues/5349)
|
||||
- Picker: avoid Vue 2.6 event bubble issues by manually binding events [#5345](https://github.com/youzan/vant/issues/5345)
|
||||
- PullRefresh: avoid Vue 2.6 event bubble issues [#5347](https://github.com/youzan/vant/issues/5347)
|
||||
- Rate、Slider: avoid Vue 2.6 event bubble issues [#5350](https://github.com/youzan/vant/issues/5350)
|
||||
- Swipe: avoid Vue 2.6 event bubble issues [#5346](https://github.com/youzan/vant/issues/5346)
|
||||
- SwipeCell: avoid Vue 2.6 event bubble issues [#5348](https://github.com/youzan/vant/issues/5348)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* ImagePreview: close event triggered twice [#5411](https://github.com/youzan/vant/issues/5411)
|
||||
* ImagePreview: should not emit close event after tapped when using async-close [#5410](https://github.com/youzan/vant/issues/5410)
|
||||
* PullRefresh: failed to trigger pull refresh when scrolling [e00058](https://github.com/youzan/vant/commit/e00058b681d8796feaaaa4a9f2c4083a18b61fe9)
|
||||
* Tag: incorrect transition when set closeable dynamically [fe6e2f](https://github.com/youzan/vant/commit/fe6e2f29ba289206138fe17df046a55000b218ad)
|
||||
* Tag: should not trigger click event when close [#5351](https://github.com/youzan/vant/issues/5351)
|
||||
* Toast: may lose forbid click when has multiple toasts [#5398](https://github.com/youzan/vant/issues/5398)
|
||||
* Icon: should compatible with medel-o [7b905a](https://github.com/youzan/vant/commit/7b905a6de85b895e2226c35875ee3633c2ae7e79)
|
||||
* IndexBar: incorrect anchor position when anchor doesn't have a parent node [#5429](https://github.com/youzan/vant/issues/5429)
|
||||
* Picker: compatible with desktop scenario [#5430](https://github.com/youzan/vant/issues/5430)
|
||||
* Stepper: input disabled text color in safari [#5428](https://github.com/youzan/vant/issues/5428)
|
||||
- ImagePreview: close event triggered twice [#5411](https://github.com/youzan/vant/issues/5411)
|
||||
- ImagePreview: should not emit close event after tapped when using async-close [#5410](https://github.com/youzan/vant/issues/5410)
|
||||
- PullRefresh: failed to trigger pull refresh when scrolling [e00058](https://github.com/youzan/vant/commit/e00058b681d8796feaaaa4a9f2c4083a18b61fe9)
|
||||
- Tag: incorrect transition when set closeable dynamically [fe6e2f](https://github.com/youzan/vant/commit/fe6e2f29ba289206138fe17df046a55000b218ad)
|
||||
- Tag: should not trigger click event when close [#5351](https://github.com/youzan/vant/issues/5351)
|
||||
- Toast: may lose forbid click when has multiple toasts [#5398](https://github.com/youzan/vant/issues/5398)
|
||||
- Icon: should compatible with medel-o [7b905a](https://github.com/youzan/vant/commit/7b905a6de85b895e2226c35875ee3633c2ae7e79)
|
||||
- IndexBar: incorrect anchor position when anchor doesn't have a parent node [#5429](https://github.com/youzan/vant/issues/5429)
|
||||
- Picker: compatible with desktop scenario [#5430](https://github.com/youzan/vant/issues/5430)
|
||||
- Stepper: input disabled text color in safari [#5428](https://github.com/youzan/vant/issues/5428)
|
||||
|
||||
**Types**
|
||||
|
||||
* AddressEdit: add setAddressDetail method type [#5352](https://github.com/youzan/vant/issues/5352)
|
||||
* Area: add reset method type [#5353](https://github.com/youzan/vant/issues/5353)
|
||||
* Checkbox: add toggle method type [#5354](https://github.com/youzan/vant/issues/5354)
|
||||
* CountDown: add methods types [0438bd](https://github.com/youzan/vant/commit/0438bdbc97a81ad8b7de18ef8784d9907ce641c6)
|
||||
* DropdownItem: add toggle method type [5c1883](https://github.com/youzan/vant/commit/5c1883f77c36d5026c60c873197dab98d4ca42f5)
|
||||
* Field: add focus、blur method type [0b5c8e](https://github.com/youzan/vant/commit/0b5c8e5f3df570292e8599e7c2ff997fbee120ce)
|
||||
* List: add check method type [285bce](https://github.com/youzan/vant/commit/285bce677c8997d55515a760f4d12b05349ebd3f)
|
||||
* Picker: add method types [46d2b0](https://github.com/youzan/vant/commit/46d2b094477b52a96e85d18ec6fc42051a832e10)
|
||||
* Sku: add methods types [d2bb9f](https://github.com/youzan/vant/commit/d2bb9fa81b401e429296003e4c2ec8c0e544d2af)
|
||||
* Swipe: add swipeTo、resize method types [a1831b](https://github.com/youzan/vant/commit/a1831b86387f1127325b9952d2d18349d41dc5c7)
|
||||
* SwipeCell: add open、close method type [9a9676](https://github.com/youzan/vant/commit/9a9676d6af7d29ac2221761ad680cecd4e929a39)
|
||||
* Tabs: add resize method type [3c526e](https://github.com/youzan/vant/commit/3c526ec1a26b5a38bc6a6ba2ded7a3db94bbcced)
|
||||
* Uploader: add closeImagePreview method type [cf191e](https://github.com/youzan/vant/commit/cf191e09cbc8093bb72f5d1e9381b263cdf9f0d2)
|
||||
|
||||
- AddressEdit: add setAddressDetail method type [#5352](https://github.com/youzan/vant/issues/5352)
|
||||
- Area: add reset method type [#5353](https://github.com/youzan/vant/issues/5353)
|
||||
- Checkbox: add toggle method type [#5354](https://github.com/youzan/vant/issues/5354)
|
||||
- CountDown: add methods types [0438bd](https://github.com/youzan/vant/commit/0438bdbc97a81ad8b7de18ef8784d9907ce641c6)
|
||||
- DropdownItem: add toggle method type [5c1883](https://github.com/youzan/vant/commit/5c1883f77c36d5026c60c873197dab98d4ca42f5)
|
||||
- Field: add focus、blur method type [0b5c8e](https://github.com/youzan/vant/commit/0b5c8e5f3df570292e8599e7c2ff997fbee120ce)
|
||||
- List: add check method type [285bce](https://github.com/youzan/vant/commit/285bce677c8997d55515a760f4d12b05349ebd3f)
|
||||
- Picker: add method types [46d2b0](https://github.com/youzan/vant/commit/46d2b094477b52a96e85d18ec6fc42051a832e10)
|
||||
- Sku: add methods types [d2bb9f](https://github.com/youzan/vant/commit/d2bb9fa81b401e429296003e4c2ec8c0e544d2af)
|
||||
- Swipe: add swipeTo、resize method types [a1831b](https://github.com/youzan/vant/commit/a1831b86387f1127325b9952d2d18349d41dc5c7)
|
||||
- SwipeCell: add open、close method type [9a9676](https://github.com/youzan/vant/commit/9a9676d6af7d29ac2221761ad680cecd4e929a39)
|
||||
- Tabs: add resize method type [3c526e](https://github.com/youzan/vant/commit/3c526ec1a26b5a38bc6a6ba2ded7a3db94bbcced)
|
||||
- Uploader: add closeImagePreview method type [cf191e](https://github.com/youzan/vant/commit/cf191e09cbc8093bb72f5d1e9381b263cdf9f0d2)
|
||||
|
||||
### [v2.3.3](https://github.com/youzan/vant/tree/v2.3.3)
|
||||
|
||||
`2019-12-21`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- fix compile error when using babel-plugin-import
|
||||
|
||||
|
||||
### [v2.3.2](https://github.com/youzan/vant/tree/v2.3.2)
|
||||
|
||||
`2019-12-20`
|
||||
|
||||
**Bug Fixes**
|
||||
@ -214,16 +332,16 @@
|
||||
- fix CountDown infinite tick if call reset after finish [\#5340](https://github.com/youzan/vant/pull/5340)
|
||||
- fix ImagePreview onClose should only trigger once [\#5341](https://github.com/youzan/vant/pull/5341)
|
||||
|
||||
|
||||
### [v2.3.1](https://github.com/youzan/vant/tree/v2.3.1)
|
||||
|
||||
`2019-12-20`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Fix uncompiled ES6 code in the entry file
|
||||
|
||||
|
||||
### [v2.3.0](https://github.com/youzan/vant/tree/v2.3.0)
|
||||
|
||||
`2019-12-20`
|
||||
|
||||
**Style**
|
||||
@ -285,8 +403,8 @@ Upgrading the style of business components:
|
||||
- fix Uploader not trigger oversize event when upload same file [\#5177](https://github.com/youzan/vant/pull/5177)
|
||||
- fix less import issue [\#5157](https://github.com/youzan/vant/pull/5157)
|
||||
|
||||
|
||||
### [v2.2.16](https://github.com/youzan/vant/tree/v2.2.16)
|
||||
|
||||
`2019-12-03`
|
||||
|
||||
**Features**
|
||||
@ -294,16 +412,16 @@ Upgrading the style of business components:
|
||||
- Stepper: add disable-plus props [\#5180](https://github.com/youzan/vant/pull/5180)
|
||||
- Stepper: add disable-minus props [\#5180](https://github.com/youzan/vant/pull/5180)
|
||||
|
||||
|
||||
### [v2.2.15](https://github.com/youzan/vant/tree/v2.2.15)
|
||||
|
||||
`2019-11-28`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- fix List incorrect list status in some cases
|
||||
|
||||
|
||||
### [v2.2.14](https://github.com/youzan/vant/tree/v2.2.14)
|
||||
|
||||
`2019-11-22`
|
||||
|
||||
**Features**
|
||||
@ -320,8 +438,8 @@ Upgrading the style of business components:
|
||||
- fix SwipeCell compatible with desktop scenario [\#5077](https://github.com/youzan/vant/pull/5077)
|
||||
- fix DropdownMenu should't close when custom container and get clicked [\#5047](https://github.com/youzan/vant/pull/5047)
|
||||
|
||||
|
||||
### [v2.2.13](https://github.com/youzan/vant/tree/v2.2.13)
|
||||
|
||||
`2019-11-14`
|
||||
|
||||
**Features**
|
||||
@ -344,8 +462,8 @@ Upgrading the style of business components:
|
||||
- fix DateTimePicker incorrect value when set max-hour or max-minute [\#5006](https://github.com/youzan/vant/pull/5006)
|
||||
- fix ImagePreview missing swipeDuration type definition [\#4968](https://github.com/youzan/vant/pull/4968)
|
||||
|
||||
|
||||
### [v2.2.12](https://github.com/youzan/vant/tree/v2.2.12)
|
||||
|
||||
`2019-11-07`
|
||||
|
||||
**Features**
|
||||
@ -359,8 +477,8 @@ Upgrading the style of business components:
|
||||
- fix List may trigger load event repeatedly [\#4953](https://github.com/youzan/vant/pull/4953)
|
||||
- fix can't custom hairline border color [\#4939](https://github.com/youzan/vant/pull/4939)
|
||||
|
||||
|
||||
### [v2.2.11](https://github.com/youzan/vant/tree/v2.2.11)
|
||||
|
||||
`2019-11-04`
|
||||
|
||||
**Features**
|
||||
@ -377,8 +495,8 @@ Upgrading the style of business components:
|
||||
- fix CountDown should pause timer when deactivated [\#4919](https://github.com/youzan/vant/pull/4919)
|
||||
- fix Grid info、dot prop not work when use icon slot [\#4902](https://github.com/youzan/vant/pull/4902)
|
||||
|
||||
|
||||
### [v2.2.10](https://github.com/youzan/vant/tree/v2.2.10)
|
||||
|
||||
`2019-10-27`
|
||||
|
||||
**Features**
|
||||
@ -393,8 +511,8 @@ Upgrading the style of business components:
|
||||
- fix Uploader file preview border radius [\#4846](https://github.com/youzan/vant/pull/4846)
|
||||
- fix DatetimePicker incorrecrt initial value when use min-date and filter [\#4837](https://github.com/youzan/vant/pull/4837)
|
||||
|
||||
|
||||
### [v2.2.9](https://github.com/youzan/vant/tree/v2.2.9)
|
||||
|
||||
`2019-10-20`
|
||||
|
||||
**Features**
|
||||
@ -414,8 +532,8 @@ Upgrading the style of business components:
|
||||
- fix ImagePreview should not close when click index [\#4764](https://github.com/youzan/vant/pull/4764)
|
||||
- fix AddressEdit choose overseas failure when configuring placeholer [\#4769](https://github.com/youzan/vant/pull/4769)
|
||||
|
||||
|
||||
### [v2.2.8](https://github.com/youzan/vant/tree/v2.2.8)
|
||||
|
||||
`2019-10-17`
|
||||
|
||||
**Features**
|
||||
@ -436,8 +554,8 @@ Upgrading the style of business components:
|
||||
- fix Rate incorrect height caused by inline-block [\#4693](https://github.com/youzan/vant/pull/4693)
|
||||
- fix Slider pseudo element may casue body overflow-x [\#4699](https://github.com/youzan/vant/pull/4699)
|
||||
|
||||
|
||||
### [v2.2.7](https://github.com/youzan/vant/tree/v2.2.7)
|
||||
|
||||
`2019-10-11`
|
||||
|
||||
**Features**
|
||||
@ -455,8 +573,8 @@ Upgrading the style of business components:
|
||||
- fix DatetimePicker should update value when range changed [\#4676](https://github.com/youzan/vant/pull/4676)
|
||||
- fix Field incorrect placeholder color when error and disabled [\#4666](https://github.com/youzan/vant/pull/4666)
|
||||
|
||||
|
||||
### [v2.2.6](https://github.com/youzan/vant/tree/v2.2.6)
|
||||
|
||||
`2019-10-08`
|
||||
|
||||
**Features**
|
||||
@ -476,8 +594,8 @@ Upgrading the style of business components:
|
||||
- fix GoodsAction incorrect border radius [\#4653](https://github.com/youzan/vant/pull/4653)
|
||||
- fix NumberKeyboard compatible with Vue 2.6 event bubble bug [\#4632](https://github.com/youzan/vant/pull/4632)
|
||||
|
||||
|
||||
### [v2.2.5](https://github.com/youzan/vant/tree/v2.2.5)
|
||||
|
||||
`2019-09-28`
|
||||
|
||||
**Features**
|
||||
@ -497,16 +615,16 @@ Upgrading the style of business components:
|
||||
- fix Swipe incorrect swipeTo animation [\#4570](https://github.com/youzan/vant/pull/4570)
|
||||
- fix Uploader incorrect preview index when upload same images [\#4577](https://github.com/youzan/vant/pull/4577)
|
||||
|
||||
|
||||
### [v2.2.4](https://github.com/youzan/vant/tree/v2.2.4) [Deprecated]
|
||||
|
||||
`2019-09-28` 🇨🇳
|
||||
|
||||
**Tips**
|
||||
|
||||
- There is a style loss issue in this version, please use version 2.2.5
|
||||
|
||||
|
||||
### [v2.2.3](https://github.com/youzan/vant/tree/v2.2.3)
|
||||
|
||||
`2019-09-24`
|
||||
|
||||
**Features**
|
||||
@ -526,8 +644,8 @@ Upgrading the style of business components:
|
||||
- ActionSheet: enable safe-area-inset-bottom by default [\#4524](https://github.com/youzan/vant/pull/4524)
|
||||
- NumberKeyboard: enable safe-area-inset-bottom by default [\#4544](https://github.com/youzan/vant/pull/4544)
|
||||
|
||||
|
||||
### [v2.2.2](https://github.com/youzan/vant/tree/v2.2.2)
|
||||
|
||||
`2019-09-19`
|
||||
|
||||
**Features**
|
||||
@ -545,8 +663,8 @@ Upgrading the style of business components:
|
||||
- fix ImagePreview incorrect scale [\#4477](https://github.com/youzan/vant/pull/4477)
|
||||
- fix DatetimePicker infinite loop when use formatted text is unnumeric [\#4485](https://github.com/youzan/vant/pull/4485)
|
||||
|
||||
|
||||
### [v2.2.1](https://github.com/youzan/vant/tree/v2.2.1)
|
||||
|
||||
`2019-09-12`
|
||||
|
||||
**Features**
|
||||
@ -572,8 +690,8 @@ Upgrading the style of business components:
|
||||
- fix Uploader should't emit click-preview when delete [\#4407](https://github.com/youzan/vant/pull/4407)
|
||||
- fix Progress incorrect pivot position [\#4396](https://github.com/youzan/vant/pull/4396)
|
||||
|
||||
|
||||
### [v2.2.0](https://github.com/youzan/vant/tree/v2.2.0)
|
||||
|
||||
`2019-09-06`
|
||||
|
||||
**Features**
|
||||
@ -603,8 +721,8 @@ Upgrading the style of business components:
|
||||
- fix ImagePreview should reset scale after toggle [\#4319](https://github.com/youzan/vant/pull/4319)
|
||||
- fix ImagePreview should emit change event when reset to start position [\#4320](https://github.com/youzan/vant/pull/4320)
|
||||
|
||||
|
||||
### [v2.1.8](https://github.com/youzan/vant/tree/v2.1.8)
|
||||
|
||||
`2019-08-29`
|
||||
|
||||
**Features**
|
||||
@ -620,8 +738,8 @@ Upgrading the style of business components:
|
||||
- fix Picker should avoid click event when moving [\#4273](https://github.com/youzan/vant/pull/4273)
|
||||
- fix Picker incorrect position when pause momentum [\#4277](https://github.com/youzan/vant/pull/4277)
|
||||
|
||||
|
||||
### [v2.1.7](https://github.com/youzan/vant/tree/v2.1.7)
|
||||
|
||||
`2019-08-26`
|
||||
|
||||
**Bug Fixes**
|
||||
@ -629,8 +747,8 @@ Upgrading the style of business components:
|
||||
- fix RadioGroup disabled prop not work [\#4242](https://github.com/youzan/vant/pull/4242)
|
||||
- fix CheckboxGroup disabled prop not work [\#4242](https://github.com/youzan/vant/pull/4242)
|
||||
|
||||
|
||||
### [v2.1.6](https://github.com/youzan/vant/tree/v2.1.6)
|
||||
|
||||
`2019-08-26`
|
||||
|
||||
**Features**
|
||||
@ -643,13 +761,12 @@ Upgrading the style of business components:
|
||||
- Sku: can preview images of non-first level sku [\#4236](https://github.com/youzan/vant/pull/4236)
|
||||
- Locale: add Spanish translation [\#4235](https://github.com/youzan/vant/pull/4235)
|
||||
|
||||
|
||||
- fix Tabbar incorrect active style in route mode [\#4229](https://github.com/youzan/vant/pull/4229)
|
||||
- fix NumberKeyboard incorrect sidebar position when has title [\#4228](https://github.com/youzan/vant/pull/4228)
|
||||
- fix IndexBar the problem of rolling out parent boundaries when sticky bottom [\#4218](https://github.com/youzan/vant/pull/4218)
|
||||
|
||||
* fix Tabbar incorrect active style in route mode [\#4229](https://github.com/youzan/vant/pull/4229)
|
||||
* fix NumberKeyboard incorrect sidebar position when has title [\#4228](https://github.com/youzan/vant/pull/4228)
|
||||
* fix IndexBar the problem of rolling out parent boundaries when sticky bottom [\#4218](https://github.com/youzan/vant/pull/4218)
|
||||
|
||||
### [v2.1.5](https://github.com/youzan/vant/tree/v2.1.5)
|
||||
|
||||
`2019-08-23`
|
||||
|
||||
**Features**
|
||||
@ -666,9 +783,8 @@ Upgrading the style of business components:
|
||||
- fix NumberKeyboard border color [\#4183](https://github.com/youzan/vant/pull/4183)
|
||||
- fix Area can't select some oversea countries [\#4195](https://github.com/youzan/vant/pull/4195)
|
||||
|
||||
|
||||
|
||||
### [v2.1.4](https://github.com/youzan/vant/tree/v2.1.4)
|
||||
|
||||
`2019-08-21`
|
||||
|
||||
**Features**
|
||||
@ -693,8 +809,8 @@ Upgrading the style of business components:
|
||||
- fix Field button width shrinked in firefox [\#4144](https://github.com/youzan/vant/pull/4144)
|
||||
- fix Picker prevent style be override by base.css [\#4136](https://github.com/youzan/vant/pull/4136)
|
||||
|
||||
|
||||
### [v2.1.3](https://github.com/youzan/vant/tree/v2.1.3)
|
||||
|
||||
`2019-08-15`
|
||||
|
||||
**Features**
|
||||
@ -715,8 +831,8 @@ Upgrading the style of business components:
|
||||
- fix Icon gift-o、refund-o icon incomplete [\#4089](https://github.com/youzan/vant/pull/4089)
|
||||
- fix Slider should not emit change event when value not changed [\#4087](https://github.com/youzan/vant/pull/4087)
|
||||
|
||||
|
||||
### [v2.1.2](https://github.com/youzan/vant/tree/v2.1.2)
|
||||
|
||||
`2019-08-10`
|
||||
|
||||
**Features**
|
||||
@ -739,8 +855,8 @@ Upgrading the style of business components:
|
||||
|
||||
- fix Sticky incorrect position when inside scroll container [\#4055](https://github.com/youzan/vant/pull/4055)
|
||||
|
||||
|
||||
### [v2.1.1](https://github.com/youzan/vant/tree/v2.1.1)
|
||||
|
||||
`2019-08-02`
|
||||
|
||||
**Bug Fixes**
|
||||
@ -748,8 +864,8 @@ Upgrading the style of business components:
|
||||
- fix DatetimePicker event not work [\#4027](https://github.com/youzan/vant/pull/4027)
|
||||
- fix Popup ensure z-index setting order [\#4026](https://github.com/youzan/vant/pull/4026)
|
||||
|
||||
|
||||
### [v2.1.0](https://github.com/youzan/vant/tree/v2.1.0) [deprecated]
|
||||
|
||||
`2019-08-01`
|
||||
|
||||
**Features**
|
||||
@ -780,8 +896,8 @@ Upgrading the style of business components:
|
||||
- fix Radio: can't select when click gap [\#4007](https://github.com/youzan/vant/pull/4007)
|
||||
- fix SwipeCell should not prevent touchmove when opened [\#3982](https://github.com/youzan/vant/pull/3982)
|
||||
|
||||
|
||||
### [v2.0.9](https://github.com/youzan/vant/tree/v2.0.9)
|
||||
|
||||
`2019-07-19`
|
||||
|
||||
**Features**
|
||||
@ -803,8 +919,8 @@ Upgrading the style of business components:
|
||||
- fix DropdownMenu cann't use toggle to open item [\#3876](https://github.com/youzan/vant/pull/3876)
|
||||
- fix SwipeCell should stop event propagation [\#3898](https://github.com/youzan/vant/pull/3898)
|
||||
|
||||
|
||||
### [v2.0.8](https://github.com/youzan/vant/tree/v2.0.8)
|
||||
|
||||
`2019-07-16`
|
||||
|
||||
**Features**
|
||||
@ -820,8 +936,8 @@ Upgrading the style of business components:
|
||||
- fix List not work when body is the scrolling container [\#3844](https://github.com/youzan/vant/pull/3844)
|
||||
- fix IndexBar incorrect active anchor in some cases [\#3832](https://github.com/youzan/vant/pull/3832)
|
||||
|
||||
|
||||
### [v2.0.7](https://github.com/youzan/vant/tree/v2.0.7)
|
||||
|
||||
`2019-07-11`
|
||||
|
||||
**Features**
|
||||
@ -841,8 +957,8 @@ Upgrading the style of business components:
|
||||
- fix Dialog missing closeOnPopstate in type definition [\#3789](https://github.com/youzan/vant/pull/3789)
|
||||
- fix DatetimePicker confirm event param incorrect when use filter [\#3816](https://github.com/youzan/vant/pull/3816)
|
||||
|
||||
|
||||
### [v2.0.6](https://github.com/youzan/vant/tree/v2.0.6)
|
||||
|
||||
`2019-07-05`
|
||||
|
||||
**Features**
|
||||
@ -858,8 +974,8 @@ Upgrading the style of business components:
|
||||
- fix Collapse use double raf to ensure animation can start [\#3723](https://github.com/youzan/vant/pull/3723)
|
||||
- fix PullRefresh ensure value change can be watched [\#3719](https://github.com/youzan/vant/pull/3719)
|
||||
|
||||
|
||||
### [v2.0.5](https://github.com/youzan/vant/tree/v2.0.5)
|
||||
|
||||
`2019-07-02`
|
||||
|
||||
**Features**
|
||||
@ -872,8 +988,8 @@ Upgrading the style of business components:
|
||||
|
||||
- fix postcss config overwritten issue
|
||||
|
||||
|
||||
### [v2.0.4](https://github.com/youzan/vant/tree/v2.0.4)
|
||||
|
||||
`2019-07-01`
|
||||
|
||||
**Features**
|
||||
@ -893,8 +1009,8 @@ Upgrading the style of business components:
|
||||
- fix Collapse flick in safari [\#3686](https://github.com/youzan/vant/pull/3686)
|
||||
- fix Picker compatibility issues on lower versions of Android [\#3688](https://github.com/youzan/vant/pull/3688)
|
||||
|
||||
|
||||
### [v2.0.3](https://github.com/youzan/vant/tree/v2.0.3)
|
||||
|
||||
`2019-06-27`
|
||||
|
||||
**Features**
|
||||
@ -916,8 +1032,8 @@ Upgrading the style of business components:
|
||||
- fix Tab may cause error when render title slot [\#3631](https://github.com/youzan/vant/pull/3631)
|
||||
- fix vetur auto-complete [\#3617](https://github.com/youzan/vant/pull/3617)
|
||||
|
||||
|
||||
### [v2.0.2](https://github.com/youzan/vant/tree/v2.0.2)
|
||||
|
||||
`2019-06-21`
|
||||
|
||||
**Features**
|
||||
@ -937,8 +1053,8 @@ Upgrading the style of business components:
|
||||
- fix Sku can not preview image when only have goods picture [\#3569](https://github.com/youzan/vant/pull/3569)
|
||||
- fix Toast missing type definition of clear method [\#3542](https://github.com/youzan/vant/pull/3542)
|
||||
|
||||
|
||||
### [v2.0.1](https://github.com/youzan/vant/tree/v2.0.1)
|
||||
|
||||
`2019-06-15`
|
||||
|
||||
**Features**
|
||||
@ -956,8 +1072,8 @@ Upgrading the style of business components:
|
||||
- fix Toast missing fade-out transition in multiple mode [\#3504](https://github.com/youzan/vant/pull/3504)
|
||||
- fix Locale can not modify functional message [\#3498](https://github.com/youzan/vant/pull/3498)
|
||||
|
||||
|
||||
### [v2.0.0](https://github.com/youzan/vant/tree/v2.0.0)
|
||||
|
||||
`2019-06-12`
|
||||
|
||||
#### Overview
|
||||
|
||||
@ -10,161 +10,278 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
|
||||
|
||||
### [v2.5.3](https://github.com/youzan/vant/compare/v2.5.2...v2.5.3)
|
||||
|
||||
`2020-02-28`
|
||||
|
||||
**Feature**
|
||||
|
||||
- ActionSheet: 新增 close-on-popstate 属性 [#5716](https://github.com/youzan/vant/issues/5716)
|
||||
- Area: 新增 columns-top、columns-bottom 属性 [#5719](https://github.com/youzan/vant/issues/5719)
|
||||
- Area: 新增 title 插槽 [#5719](https://github.com/youzan/vant/issues/5719)
|
||||
- Button: 新增 icon-prefix 属性 [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- Cell: 新增 icon-prefix 属性 [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- Field: 新增 icon-prefix 属性 [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- Form: validator 新增 rule 参数 [#5704](https://github.com/youzan/vant/issues/5704)
|
||||
- Form: 支持将 message 定义为函数 [#5704](https://github.com/youzan/vant/issues/5704)
|
||||
- Form: 支持在 rule 中定义 pattern [#5700](https://github.com/youzan/vant/issues/5700)
|
||||
- Form: 支持在 rule 中定义 formatter [d87835](https://github.com/youzan/vant/commit/d878354ebf8eedf849764480c11a90c4cdd2fbe3)
|
||||
- GridItem: 新增 icon-prefix 属性 [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- Rate: 新增 icon-prefix 属性 [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
- TabbarItem: 新增 icon-prefix 属性 [#5666](https://github.com/youzan/vant/issues/5666)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: 修复隐藏状态下 scrollIntoView 函数报错的问题 [#5708](https://github.com/youzan/vant/issues/5708)
|
||||
- DatetimePicker: 修复 getPicker 方法无法调用的问题 [#5710](https://github.com/youzan/vant/issues/5710)
|
||||
- Popup: 修复 close-on-popstate 在 keep-alive 下无效的问题 [f07077](https://github.com/youzan/vant/commit/f070773b42b86dd98d1f3989651e735895db78ee)
|
||||
|
||||
### [v2.5.2](https://github.com/youzan/vant/compare/v2.5.1...v2.5.2)
|
||||
|
||||
`2020-02-21`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: 新增 close、closed 事件 [556f33](https://github.com/youzan/vant/commit/556f335cc224a40ab27bda863a67601c36339ea9)
|
||||
- Calendar: 新增 open、opened 事件 [a83082](https://github.com/youzan/vant/commit/a83082f599362456d85864904cb5f47b44138e43)
|
||||
- Form: 新增 scroll-to-error 属性 [#5680](https://github.com/youzan/vant/issues/5680)
|
||||
- Form: 新增 validate-trigger 属性 [c08db7](https://github.com/youzan/vant/commit/c08db724a3ed6440da5d5faebfa08561312f4d3a)
|
||||
- Form: 新增 scrollToField 方法 [#5680](https://github.com/youzan/vant/issues/5680)
|
||||
- Sku: 新增 preview-on-click-image 属性 [#5684](https://github.com/youzan/vant/issues/5684)
|
||||
- Sku: 新增 sku-header-image-extra 插槽 [#5696](https://github.com/youzan/vant/issues/5696)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Swipe: 修复容器宽度为小数时在部分安卓设备上出现换行的问题 [02afe7](https://github.com/youzan/vant/commit/02afe720c6aaeeb58036cde3072b6373e3b9254f)
|
||||
|
||||
### [v2.5.1](https://github.com/youzan/vant/compare/v2.5.1-beta.0...v2.5.1)
|
||||
|
||||
`2020-02-18`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Sku: 新增 initialMessages 字段
|
||||
- Calendar: 在调用 reset 方法后自动定位到当前月份 [407b7d](https://github.com/youzan/vant/commit/407b7ded43bc87c98605444dbbb829f5f05744b6)
|
||||
- Calendar: 在修改 default-date 属性后自动定位到当前月份 [#5664](https://github.com/youzan/vant/issues/5664)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: 修复在个别情况下日历渲染为空白的问题 [#5640](https://github.com/youzan/vant/issues/5640)
|
||||
- Calendar: 修复在单选情况下使用 max-range 属性导致报错的问题 [79d2c3](https://github.com/youzan/vant/commit/79d2c344f9ee9945b09434b35cbe63a3816410ad)
|
||||
- Form: 修复 error-message-align 属性类型定义报错的问题 [#5674](https://github.com/youzan/vant/issues/5674)
|
||||
- Swipe: 修复在隐藏状态下触发浏览器缩放时元素宽度错误的问题 [#5678](https://github.com/youzan/vant/issues/5678)
|
||||
|
||||
### [v2.5.0](https://github.com/youzan/vant/compare/v2.4.7...v2.5.0)
|
||||
|
||||
`2020-02-15`
|
||||
|
||||
**New Component**
|
||||
|
||||
- 新增 [Form 表单](#/zh-CN/form)组件
|
||||
|
||||
**Feature**
|
||||
|
||||
- Field: 新增 name 属性 [f3398d](https://github.com/youzan/vant/commit/f3398dc2cdd1191613b97454b4725275458bde1b)
|
||||
- Field: 新增 rules 属性 [0ed7aa](https://github.com/youzan/vant/commit/0ed7aaac88f769549b688259b8e6e1050a10cb99)
|
||||
- AddressEdit: 新增 disable-area 属性 [#5630](https://github.com/youzan/vant/issues/5630)
|
||||
- AddressList: 新增 item-bottom 插槽 [#5629](https://github.com/youzan/vant/issues/5629)
|
||||
- RadioGroup: 新增 direction 属性 [4dd41b](https://github.com/youzan/vant/commit/4dd41b23decbaf86c8812e0afcc1d72773f223f6)
|
||||
- CheckboxGroup: 新增 direction 属性 [153902](https://github.com/youzan/vant/commit/15390241d8d4252a828aa0e9d8c61377ba07512a)
|
||||
- ImagePreview: 新增 scale 事件 [#5658](https://github.com/youzan/vant/issues/5658)
|
||||
- ImagePreview: 新增 closeable 属性 [#5654](https://github.com/youzan/vant/issues/5654)
|
||||
|
||||
**Style**
|
||||
|
||||
- Field: input 插槽的内容默认在垂直方向居中 [03c826](https://github.com/youzan/vant/commit/03c826c4d44efd95a5ee509b5f183d8ded574fd7)
|
||||
- Field: 优化 label-position 为 right 时的右边距 [2d6445](https://github.com/youzan/vant/commit/2d64458776df87625db9e8b07d83a7044a2bcf53)
|
||||
- Uploader: 优化禁用态上传区域颜色 [#5628](https://github.com/youzan/vant/issues/5628)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: 修复特定情况下未正确渲染日历内容的问题 [#5640](https://github.com/youzan/vant/issues/5640)
|
||||
- Dialog: 修复 Dialog.Component 类型定义错误的问题 [#5646](https://github.com/youzan/vant/issues/5646)
|
||||
- Field: 修复子元素文字颜色错误的问题 [e17a4a](https://github.com/youzan/vant/commit/e17a4a24993822b0f35114dacbbb3bebc5b51a60)
|
||||
- Picker: 修复未触发弹性滚动时 change 事件不生效的问题 [#5662](https://github.com/youzan/vant/issues/5662)
|
||||
- Tabs: 修复自定义滚动容器时 scrollspy 属性无效的问题 [#5637](https://github.com/youzan/vant/issues/5637)
|
||||
- Calendar: 修复底部按钮会触发表单提交的问题 [e93fcb](https://github.com/youzan/vant/commit/e93fcb0603b988a2ffb5b1651588f7e4ad8aa92d)
|
||||
|
||||
### [v2.4.7](https://github.com/youzan/vant/compare/v2.4.7-beta.0...v2.4.7)
|
||||
|
||||
`2020-02-06`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: 优化无障碍访问 [2124cc](https://github.com/youzan/vant/commit/2124cc5261be4a7d666cf6f70d4295309f3705d9)
|
||||
- Field: 字数统计达到上限时高亮展示 [61093e](https://github.com/youzan/vant/commit/61093ef00f2dc421eb94ec7690093c1d565a296c)
|
||||
- Sku: 新增 sku-actions-top 插槽 [#5617](https://github.com/youzan/vant/issues/5617)
|
||||
- Uploader: 支持展示上传中状态 [#5625](https://github.com/youzan/vant/issues/5625)
|
||||
- Uploader: 支持展示上传失败状态 [#5624](https://github.com/youzan/vant/issues/5624)
|
||||
|
||||
**Style**
|
||||
|
||||
- ActionSheet: 新增 @action-sheet-close-icon-active-color 变量 [265bfe](https://github.com/youzan/vant/commit/265bfeaac756e05803858062ab1ece2092a08e17)
|
||||
- Popup: 新增 @popup-close-icon-active-color 变量 [660b03](https://github.com/youzan/vant/commit/660b0399512d3deddcdfb99af5cff1674617c515)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: 修复选中日期 className 属性未生效的问题 [0b7c56](https://github.com/youzan/vant/commit/0b7c567a78c85fbf1c3d59fcd3ce76c691040ff1)
|
||||
- Popup: 修复使用 get-container 属性后 destroy 时抛出错误的问题
|
||||
|
||||
### [v2.4.6](https://github.com/youzan/vant/compare/v2.4.5...v2.4.6)
|
||||
|
||||
`2020-02-01`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Picker: 修复更新 columns 数据不生效的问题 [#5614](https://github.com/youzan/vant/issues/5614)
|
||||
|
||||
- Picker: 修复更新 columns 数据不生效的问题 [#5614](https://github.com/youzan/vant/issues/5614)
|
||||
|
||||
### [v2.4.5](https://github.com/youzan/vant/compare/v2.4.4...v2.4.5)
|
||||
|
||||
`2020-02-01`
|
||||
|
||||
**Feature**
|
||||
|
||||
* Picker: 支持级联选择 [#4247](https://github.com/youzan/vant/issues/4247)
|
||||
* Slider: 新增 button-size 属性 [1e9b8c](https://github.com/youzan/vant/commit/1e9b8c846674562d56ab638a0982baab4bb6870e)
|
||||
* 优化 props 类型，原有 number 类型的 props 现在支持传入 string
|
||||
- Picker: 支持级联选择 [#4247](https://github.com/youzan/vant/issues/4247)
|
||||
- Slider: 新增 button-size 属性 [1e9b8c](https://github.com/youzan/vant/commit/1e9b8c846674562d56ab638a0982baab4bb6870e)
|
||||
- 优化 props 类型，原有 number 类型的 props 现在支持传入 string
|
||||
|
||||
**Style**
|
||||
|
||||
* DropdownItem: 新增 @dropdown-item-z-index 变量 [6f4c6f](https://github.com/youzan/vant/commit/6f4c6f5aa6614559cfc24bc361e68c9c938bbb61)
|
||||
* IndexBar: 新增 @index-anchor-z-index 变量 [89ee8e](https://github.com/youzan/vant/commit/89ee8e38723dadb2daa6ee31c325cdd2ad03ba99)
|
||||
* IndexBar: 新增 @index-bar-sidebar-z-index 变量 [89ee8e](https://github.com/youzan/vant/commit/89ee8e38723dadb2daa6ee31c325cdd2ad03ba99)
|
||||
* IndexBar: 新增 @index-bar-index-active-color 变量 [0011db](https://github.com/youzan/vant/commit/0011db75365b60699ae140d85e54b9e477f46a22)
|
||||
* Notify: 新增 @notify-text-color 变量 [9dcf57](https://github.com/youzan/vant/commit/9dcf57c65f5e046318e953f2e8ce87918b1cb312)
|
||||
* Overlay: 新增 @overlay-z-index 变量 [95d19f](https://github.com/youzan/vant/commit/95d19f70d1c90efc752074ff764b07787d89cf1e)
|
||||
* Rate: 新增 @rate-icon-disabled-color 变量 [8b8471](https://github.com/youzan/vant/commit/8b8471945c4313735a5fe59402212f37a31acfea)
|
||||
* Rate: 新增 @rate-icon-full-color 变量 [5c804c](https://github.com/youzan/vant/commit/5c804cf920b75c5bdf962fa49eae31363783f32f)
|
||||
* Rate: 新增 @rate-icon-void-color 变量 [f90015](https://github.com/youzan/vant/commit/f90015efe7619af055b9ebd4c8be7da1f17b8da0)
|
||||
* Slider: 新增 @slider-bar-height 变量 [a5819c](https://github.com/youzan/vant/commit/a5819c286e06469bc41e8aa9e0ed44cc21625dad)
|
||||
* Search: 新增 @search-content-background-color 变量 [ea7419](https://github.com/youzan/vant/commit/ea74194990314bd1ff1e8237c221be92fdb8ae37)
|
||||
* Step: 新增 @step-active-color 变量 [9e7a68](https://github.com/youzan/vant/commit/9e7a6874141fa05f0158ca8006c268d0a3d92679)
|
||||
* Tabbar: 新增 @tabbar-z-index 变量 [0441f7](https://github.com/youzan/vant/commit/0441f7ba098aca24b797de29d10af8f47cf32d15)
|
||||
* NavBar: 新增 @nav-bar-z-index 变量 [a2d870](https://github.com/youzan/vant/commit/a2d870ad8ee4912226ec8871cc4c2d56ef870902)
|
||||
* NumberKeyboard: 新增 @number-keyboard-z-index 变量 [760938](https://github.com/youzan/vant/commit/760938962399e0589b4a258ff29e7fe2f3ba90f1)
|
||||
- DropdownItem: 新增 @dropdown-item-z-index 变量 [6f4c6f](https://github.com/youzan/vant/commit/6f4c6f5aa6614559cfc24bc361e68c9c938bbb61)
|
||||
- IndexBar: 新增 @index-anchor-z-index 变量 [89ee8e](https://github.com/youzan/vant/commit/89ee8e38723dadb2daa6ee31c325cdd2ad03ba99)
|
||||
- IndexBar: 新增 @index-bar-sidebar-z-index 变量 [89ee8e](https://github.com/youzan/vant/commit/89ee8e38723dadb2daa6ee31c325cdd2ad03ba99)
|
||||
- IndexBar: 新增 @index-bar-index-active-color 变量 [0011db](https://github.com/youzan/vant/commit/0011db75365b60699ae140d85e54b9e477f46a22)
|
||||
- Notify: 新增 @notify-text-color 变量 [9dcf57](https://github.com/youzan/vant/commit/9dcf57c65f5e046318e953f2e8ce87918b1cb312)
|
||||
- Overlay: 新增 @overlay-z-index 变量 [95d19f](https://github.com/youzan/vant/commit/95d19f70d1c90efc752074ff764b07787d89cf1e)
|
||||
- Rate: 新增 @rate-icon-disabled-color 变量 [8b8471](https://github.com/youzan/vant/commit/8b8471945c4313735a5fe59402212f37a31acfea)
|
||||
- Rate: 新增 @rate-icon-full-color 变量 [5c804c](https://github.com/youzan/vant/commit/5c804cf920b75c5bdf962fa49eae31363783f32f)
|
||||
- Rate: 新增 @rate-icon-void-color 变量 [f90015](https://github.com/youzan/vant/commit/f90015efe7619af055b9ebd4c8be7da1f17b8da0)
|
||||
- Slider: 新增 @slider-bar-height 变量 [a5819c](https://github.com/youzan/vant/commit/a5819c286e06469bc41e8aa9e0ed44cc21625dad)
|
||||
- Search: 新增 @search-content-background-color 变量 [ea7419](https://github.com/youzan/vant/commit/ea74194990314bd1ff1e8237c221be92fdb8ae37)
|
||||
- Step: 新增 @step-active-color 变量 [9e7a68](https://github.com/youzan/vant/commit/9e7a6874141fa05f0158ca8006c268d0a3d92679)
|
||||
- Tabbar: 新增 @tabbar-z-index 变量 [0441f7](https://github.com/youzan/vant/commit/0441f7ba098aca24b797de29d10af8f47cf32d15)
|
||||
- NavBar: 新增 @nav-bar-z-index 变量 [a2d870](https://github.com/youzan/vant/commit/a2d870ad8ee4912226ec8871cc4c2d56ef870902)
|
||||
- NumberKeyboard: 新增 @number-keyboard-z-index 变量 [760938](https://github.com/youzan/vant/commit/760938962399e0589b4a258ff29e7fe2f3ba90f1)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* ImagePreview: 修复双击缩放时 max-zoom 属性不生效的问题 [1baa60](https://github.com/youzan/vant/commit/1baa60f2244b4605dc82f6dcf564671f5c623023)
|
||||
* Popup: 修复 position 为 center 时 duration 属性不生效的问题 [44072e](https://github.com/youzan/vant/commit/44072e8c3f548cff78401780213ab7ef213372c3)
|
||||
* Step: 修复 active-color 未改变分隔线颜色的问题 [cfadce](https://github.com/youzan/vant/commit/cfadcefb0a1c29dfb1d940fbb7add746595158bd)
|
||||
|
||||
- ImagePreview: 修复双击缩放时 max-zoom 属性不生效的问题 [1baa60](https://github.com/youzan/vant/commit/1baa60f2244b4605dc82f6dcf564671f5c623023)
|
||||
- Popup: 修复 position 为 center 时 duration 属性不生效的问题 [44072e](https://github.com/youzan/vant/commit/44072e8c3f548cff78401780213ab7ef213372c3)
|
||||
- Step: 修复 active-color 未改变分隔线颜色的问题 [cfadce](https://github.com/youzan/vant/commit/cfadcefb0a1c29dfb1d940fbb7add746595158bd)
|
||||
|
||||
### [v2.4.4](https://github.com/youzan/vant/compare/v2.4.3...v2.4.4) 🐭
|
||||
|
||||
`2020-01-24`
|
||||
|
||||
**Feature**
|
||||
|
||||
* Card: 优化图片拉伸模式 [e766d5](https://github.com/youzan/vant/commit/e766d5d5743e7f492b3601ce4010b8524fb2b016)
|
||||
* Calendar: 新增 get-contaienr 属性 [#5609](https://github.com/youzan/vant/issues/5609)
|
||||
* Calendar: 新增 close-on-popstate 属性 [2b82dc](https://github.com/youzan/vant/commit/2b82dcc3dd2dba678aba5e0533e0ff6af7c55b11)
|
||||
* CountDown: 新增 change 事件 [#5599](https://github.com/youzan/vant/issues/5599)
|
||||
* GoodsActionButton: 新增 icon 属性 [b83bed](https://github.com/youzan/vant/commit/b83bed3b6c41d0896386b3c4b6380c9568bd3ef2)
|
||||
- Card: 优化图片拉伸模式 [e766d5](https://github.com/youzan/vant/commit/e766d5d5743e7f492b3601ce4010b8524fb2b016)
|
||||
- Calendar: 新增 get-contaienr 属性 [#5609](https://github.com/youzan/vant/issues/5609)
|
||||
- Calendar: 新增 close-on-popstate 属性 [2b82dc](https://github.com/youzan/vant/commit/2b82dcc3dd2dba678aba5e0533e0ff6af7c55b11)
|
||||
- CountDown: 新增 change 事件 [#5599](https://github.com/youzan/vant/issues/5599)
|
||||
- GoodsActionButton: 新增 icon 属性 [b83bed](https://github.com/youzan/vant/commit/b83bed3b6c41d0896386b3c4b6380c9568bd3ef2)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Sku: 修复 get-container 属性不能为 string 类型的问题 [#5608](https://github.com/youzan/vant/issues/5608)
|
||||
|
||||
- Sku: 修复 get-container 属性不能为 string 类型的问题 [#5608](https://github.com/youzan/vant/issues/5608)
|
||||
|
||||
### [v2.4.3](https://github.com/youzan/vant/compare/v2.4.3-beta.0...v2.4.3)
|
||||
|
||||
`2020-01-19`
|
||||
|
||||
**Feature**
|
||||
|
||||
* Swipe: 页面隐藏时暂停自动轮播 [113157](https://github.com/youzan/vant/commit/11315787ec980767973a3fded50fb5858e51e298)
|
||||
* Stepper: 新增 long-press 属性 [2f3ec6](https://github.com/youzan/vant/commit/2f3ec6a3d48a9d56f8127d27d51c3337f6e72cab)
|
||||
* Calendar: 新增 max-range、range-prompt 属性 [#5583](https://github.com/youzan/vant/issues/5583)
|
||||
* ImagePreview: 新增 @image-preview-index-text-shadow 变量 [e2f302](https://github.com/youzan/vant/commit/e2f30242eaaebd36d9816e2746fe6c44323e6aca)
|
||||
- Swipe: 页面隐藏时暂停自动轮播 [113157](https://github.com/youzan/vant/commit/11315787ec980767973a3fded50fb5858e51e298)
|
||||
- Stepper: 新增 long-press 属性 [2f3ec6](https://github.com/youzan/vant/commit/2f3ec6a3d48a9d56f8127d27d51c3337f6e72cab)
|
||||
- Calendar: 新增 max-range、range-prompt 属性 [#5583](https://github.com/youzan/vant/issues/5583)
|
||||
- ImagePreview: 新增 @image-preview-index-text-shadow 变量 [e2f302](https://github.com/youzan/vant/commit/e2f30242eaaebd36d9816e2746fe6c44323e6aca)
|
||||
|
||||
**Improvement**
|
||||
|
||||
* Icon: 更新 share 图标 [2f77ac](https://github.com/youzan/vant/commit/2f77acfc6cef23ea664defc38c4cd806ceca1ee4)
|
||||
* Field: 优化 readonly 状态下的光标类型 [60173d](https://github.com/youzan/vant/commit/60173dd6bc004339333c50218d7c6b2f6c1bc07b)
|
||||
* Stepper: 优化 disable-input 状态下的输入框颜色 [959eca](https://github.com/youzan/vant/commit/959eca136c4ca6a39e22d36512db74b93ad100c6)
|
||||
- Icon: 更新 share 图标 [2f77ac](https://github.com/youzan/vant/commit/2f77acfc6cef23ea664defc38c4cd806ceca1ee4)
|
||||
- Field: 优化 readonly 状态下的光标类型 [60173d](https://github.com/youzan/vant/commit/60173dd6bc004339333c50218d7c6b2f6c1bc07b)
|
||||
- Stepper: 优化 disable-input 状态下的输入框颜色 [959eca](https://github.com/youzan/vant/commit/959eca136c4ca6a39e22d36512db74b93ad100c6)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* GoodsAction: 修复未设置容器高度的问题 [#5593](https://github.com/youzan/vant/issues/5593)
|
||||
- GoodsAction: 修复未设置容器高度的问题 [#5593](https://github.com/youzan/vant/issues/5593)
|
||||
|
||||
**Types**
|
||||
|
||||
* Calendar: 新增类型定义 [dac60c](https://github.com/youzan/vant/commit/dac60c8a37d3b2b3686dc25c1c34b4029a963d1b)
|
||||
* Toast: 修复 setDefaultOptions 方法参数定义错误 [#5582](https://github.com/youzan/vant/issues/5582)
|
||||
|
||||
- Calendar: 新增类型定义 [dac60c](https://github.com/youzan/vant/commit/dac60c8a37d3b2b3686dc25c1c34b4029a963d1b)
|
||||
- Toast: 修复 setDefaultOptions 方法参数定义错误 [#5582](https://github.com/youzan/vant/issues/5582)
|
||||
|
||||
### [v2.4.2](https://github.com/youzan/vant/compare/v2.4.2-beta.1...v2.4.2)
|
||||
|
||||
`2020-01-14`
|
||||
|
||||
**Feature**
|
||||
|
||||
* Sku: 新增 properties 属性 [#5525](https://github.com/youzan/vant/issues/5525)
|
||||
* Field: 新增 digit 类型 [#5524](https://github.com/youzan/vant/issues/5524)
|
||||
* Field: 新增 formatter 属性 [#5534](https://github.com/youzan/vant/issues/5534)
|
||||
* Image: 新增 error-icon 属性 [#5470](https://github.com/youzan/vant/issues/5470)
|
||||
* Image: 新增 loading-icon 属性 [#5469](https://github.com/youzan/vant/issues/5469)
|
||||
* Swipe: 新增 prev、next 方法 [#5548](https://github.com/youzan/vant/issues/5548)
|
||||
* GoodsAcitonIcon: 新增 color 属性 [#5576](https://github.com/youzan/vant/issues/5576)
|
||||
- Sku: 新增 properties 属性 [#5525](https://github.com/youzan/vant/issues/5525)
|
||||
- Field: 新增 digit 类型 [#5524](https://github.com/youzan/vant/issues/5524)
|
||||
- Field: 新增 formatter 属性 [#5534](https://github.com/youzan/vant/issues/5534)
|
||||
- Image: 新增 error-icon 属性 [#5470](https://github.com/youzan/vant/issues/5470)
|
||||
- Image: 新增 loading-icon 属性 [#5469](https://github.com/youzan/vant/issues/5469)
|
||||
- Swipe: 新增 prev、next 方法 [#5548](https://github.com/youzan/vant/issues/5548)
|
||||
- GoodsAcitonIcon: 新增 color 属性 [#5576](https://github.com/youzan/vant/issues/5576)
|
||||
|
||||
**Improvement**
|
||||
|
||||
* AddressList: 优化样式细节 [#5507](https://github.com/youzan/vant/issues/5507)
|
||||
* AddressEdit: 优化错误提示展示方式 [#5479](https://github.com/youzan/vant/issues/5479)
|
||||
* ActionSheet: 优化关闭按钮样式 [#5574](https://github.com/youzan/vant/issues/5574)
|
||||
* CouponList: 优化样式细节 [#5501](https://github.com/youzan/vant/issues/5501)
|
||||
* Calendar: 弹出时自动滚动到当前选中的日期 [#5526](https://github.com/youzan/vant/issues/5526)
|
||||
* ImagePreview: 优化图片加载失败提示样式 [#5570](https://github.com/youzan/vant/issues/5570)
|
||||
* 优化所有组件的光标类型 [c1a535](https://github.com/youzan/vant/commit/c1a535b0dd9470f8eb526e86aa59cf6dec022f3a)
|
||||
- AddressList: 优化样式细节 [#5507](https://github.com/youzan/vant/issues/5507)
|
||||
- AddressEdit: 优化错误提示展示方式 [#5479](https://github.com/youzan/vant/issues/5479)
|
||||
- ActionSheet: 优化关闭按钮样式 [#5574](https://github.com/youzan/vant/issues/5574)
|
||||
- CouponList: 优化样式细节 [#5501](https://github.com/youzan/vant/issues/5501)
|
||||
- Calendar: 弹出时自动滚动到当前选中的日期 [#5526](https://github.com/youzan/vant/issues/5526)
|
||||
- ImagePreview: 优化图片加载失败提示样式 [#5570](https://github.com/youzan/vant/issues/5570)
|
||||
- 优化所有组件的光标类型 [c1a535](https://github.com/youzan/vant/commit/c1a535b0dd9470f8eb526e86aa59cf6dec022f3a)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Button: 修复加载状态下仍会有点击反馈的问题 [0a70d3](https://github.com/youzan/vant/commit/0a70d344124ef756a73ea9edfee07303f394d880)
|
||||
* Card: 修复图片圆角样式未生效的问题 [#5480](https://github.com/youzan/vant/issues/5480)
|
||||
* Calendar: 修复选中的日期无法展示提示信息的问题 [#5536](https://github.com/youzan/vant/issues/5536)
|
||||
* Checkbox: 修复设置 label-disabled 后空白区域仍然可以点击的问题 [3d10d4](https://github.com/youzan/vant/commit/3d10d42fccadd1b9df46860d758a91f7825073e9)
|
||||
* CouponList: 修复点击反馈区域错误的问题 [#5521](https://github.com/youzan/vant/issues/5521)
|
||||
* Field: 修复 type 为 number 时在 iOS 上仍然能输入非数字字符的问题 [#5520](https://github.com/youzan/vant/issues/5520)
|
||||
* ImagePreview: 修复在桌面端使用时无法拖拽的问题 [#4487](https://github.com/youzan/vant/issues/4487)
|
||||
* Picker: 修复点击事件偶尔会丢失的问题 [5cbb9e](https://github.com/youzan/vant/commit/5cbb9e29989ac58d44a4ec503cbb984269c8f18e)
|
||||
* PullRefresh:修复 head-height 属性未正确设置高度的问题 [028747](https://github.com/youzan/vant/commit/028747c35471f33e8c2b0baa6fb8915510daac22)
|
||||
* Tabs: 修复容器设置 fixed 布局时无法渲染底部条的问题 [#5496](https://github.com/youzan/vant/issues/5496)
|
||||
|
||||
- Button: 修复加载状态下仍会有点击反馈的问题 [0a70d3](https://github.com/youzan/vant/commit/0a70d344124ef756a73ea9edfee07303f394d880)
|
||||
- Card: 修复图片圆角样式未生效的问题 [#5480](https://github.com/youzan/vant/issues/5480)
|
||||
- Calendar: 修复选中的日期无法展示提示信息的问题 [#5536](https://github.com/youzan/vant/issues/5536)
|
||||
- Checkbox: 修复设置 label-disabled 后空白区域仍然可以点击的问题 [3d10d4](https://github.com/youzan/vant/commit/3d10d42fccadd1b9df46860d758a91f7825073e9)
|
||||
- CouponList: 修复点击反馈区域错误的问题 [#5521](https://github.com/youzan/vant/issues/5521)
|
||||
- Field: 修复 type 为 number 时在 iOS 上仍然能输入非数字字符的问题 [#5520](https://github.com/youzan/vant/issues/5520)
|
||||
- ImagePreview: 修复在桌面端使用时无法拖拽的问题 [#4487](https://github.com/youzan/vant/issues/4487)
|
||||
- Picker: 修复点击事件偶尔会丢失的问题 [5cbb9e](https://github.com/youzan/vant/commit/5cbb9e29989ac58d44a4ec503cbb984269c8f18e)
|
||||
- PullRefresh:修复 head-height 属性未正确设置高度的问题 [028747](https://github.com/youzan/vant/commit/028747c35471f33e8c2b0baa6fb8915510daac22)
|
||||
- Tabs: 修复容器设置 fixed 布局时无法渲染底部条的问题 [#5496](https://github.com/youzan/vant/issues/5496)
|
||||
|
||||
### [v2.4.1](https://github.com/youzan/vant/compare/v2.4.0...v2.4.1)
|
||||
|
||||
`2020-01-02`
|
||||
|
||||
**Feature**
|
||||
|
||||
* ContactEdit: 优化错误提示展示方式 [#5437](https://github.com/youzan/vant/issues/5437)
|
||||
* CouponCell: 优先展示 value 字段的数值 [#5438](https://github.com/youzan/vant/issues/5438)
|
||||
- ContactEdit: 优化错误提示展示方式 [#5437](https://github.com/youzan/vant/issues/5437)
|
||||
- CouponCell: 优先展示 value 字段的数值 [#5438](https://github.com/youzan/vant/issues/5438)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Calendar: 修复日期对应的星期数展示错误的问题 [#5452](https://github.com/youzan/vant/issues/5452)
|
||||
* List: 修复 direction 为 up 时加载事件触发时机错误的问题 [#5439](https://github.com/youzan/vant/issues/5439)
|
||||
|
||||
- Calendar: 修复日期对应的星期数展示错误的问题 [#5452](https://github.com/youzan/vant/issues/5452)
|
||||
- List: 修复 direction 为 up 时加载事件触发时机错误的问题 [#5439](https://github.com/youzan/vant/issues/5439)
|
||||
|
||||
### [v2.4.0](https://github.com/youzan/vant/compare/v2.3.3...v2.4.0)
|
||||
|
||||
`2020-01-01`
|
||||
|
||||
**New Component**
|
||||
|
||||
* 新增 Calendar 日历组件
|
||||
- 新增 Calendar 日历组件
|
||||
|
||||
|
||||
|
||||
**Feature**
|
||||
|
||||
* List: 新增 error 插槽 [e9a938](https://github.com/youzan/vant/commit/e9a938820232194ad5f62b2b6588fa5d604016ae)
|
||||
* List: 新增 finished 插槽 [8a0705](https://github.com/youzan/vant/commit/8a0705d7610890c0da47e9e7eb0ef5665a3dca0d)
|
||||
* Picker: 新增 confirm 方法 [5eb2a4](https://github.com/youzan/vant/commit/5eb2a4012ae3e9d90a29a924ae454e54408b1235)
|
||||
* PullRefresh: 新增 success 插槽 [56e450](https://github.com/youzan/vant/commit/56e450f29e67a5e66b26cf9937c458270f462bdc)
|
||||
* CouponList: 更新底部按钮样式 [#5368](https://github.com/youzan/vant/issues/5368)
|
||||
* DatetimePicker: 新增 getPicker 方法 [1dc1fe](https://github.com/youzan/vant/commit/1dc1feae40b8ca11df980aa1d5ecf108151938e4)
|
||||
* TreeSelect: 新增 @tree-select-item-selected-size 变量 [373159](https://github.com/youzan/vant/commit/37315975203f28d36634d9ad8388a7f4dc8a44ea)
|
||||
* Image: 新增 @image-loading-icon-size、@image-error-icon-size 变量 [d7ae8c](https://github.com/youzan/vant/commit/d7ae8c5a26dcb6b7b79b4ca7a2ed3842673c2ea0)
|
||||
- List: 新增 error 插槽 [e9a938](https://github.com/youzan/vant/commit/e9a938820232194ad5f62b2b6588fa5d604016ae)
|
||||
- List: 新增 finished 插槽 [8a0705](https://github.com/youzan/vant/commit/8a0705d7610890c0da47e9e7eb0ef5665a3dca0d)
|
||||
- Picker: 新增 confirm 方法 [5eb2a4](https://github.com/youzan/vant/commit/5eb2a4012ae3e9d90a29a924ae454e54408b1235)
|
||||
- PullRefresh: 新增 success 插槽 [56e450](https://github.com/youzan/vant/commit/56e450f29e67a5e66b26cf9937c458270f462bdc)
|
||||
- CouponList: 更新底部按钮样式 [#5368](https://github.com/youzan/vant/issues/5368)
|
||||
- DatetimePicker: 新增 getPicker 方法 [1dc1fe](https://github.com/youzan/vant/commit/1dc1feae40b8ca11df980aa1d5ecf108151938e4)
|
||||
- TreeSelect: 新增 @tree-select-item-selected-size 变量 [373159](https://github.com/youzan/vant/commit/37315975203f28d36634d9ad8388a7f4dc8a44ea)
|
||||
- Image: 新增 @image-loading-icon-size、@image-error-icon-size 变量 [d7ae8c](https://github.com/youzan/vant/commit/d7ae8c5a26dcb6b7b79b4ca7a2ed3842673c2ea0)
|
||||
|
||||
**Compatibility**
|
||||
|
||||
@ -172,55 +289,55 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
从 2.4 版本开始，我们通过手动绑定事件的方式来规避这个问题，涉及以下组件：
|
||||
|
||||
* Area
|
||||
* DatetimePicker
|
||||
* ImagePreview
|
||||
* Rate
|
||||
* Slider
|
||||
* Swipe
|
||||
* SwipeCell
|
||||
* NumberKeyboard
|
||||
* Picker
|
||||
* PullRefresh
|
||||
- Area
|
||||
- DatetimePicker
|
||||
- ImagePreview
|
||||
- Rate
|
||||
- Slider
|
||||
- Swipe
|
||||
- SwipeCell
|
||||
- NumberKeyboard
|
||||
- Picker
|
||||
- PullRefresh
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
* Icon: 修复 medel-o 图标不展示的问题 [7b905a](https://github.com/youzan/vant/commit/7b905a6de85b895e2226c35875ee3633c2ae7e79)
|
||||
* ImagePreview: 修复 close 事件重复触发的问题 [#5410](https://github.com/youzan/vant/issues/5410)
|
||||
* PullRefresh: 修复下拉到顶部时可能不触发下拉刷新的问题 [e00058](https://github.com/youzan/vant/commit/e00058b681d8796feaaaa4a9f2c4083a18b61fe9)
|
||||
* Tag: 修复动态设置 closeable 时动画错误的问题 [fe6e2f](https://github.com/youzan/vant/commit/fe6e2f29ba289206138fe17df046a55000b218ad)
|
||||
* Tag: 修复 close 时会触发 click 事件的问题 [#5351](https://github.com/youzan/vant/issues/5351)
|
||||
* Toast: 修复同时存在多个 Toast 时 forbidClick 可能失效的问题 [#5398](https://github.com/youzan/vant/issues/5398)
|
||||
* Picker: 修复在桌面端使用时拖动后回弹的问题 [#5430](https://github.com/youzan/vant/issues/5430)
|
||||
* Stepper: 修复在 safari 上禁用时文字颜色不正确的问题 [#5428](https://github.com/youzan/vant/issues/5428)
|
||||
* IndexBar: 修复 IndexAnchor 没有父容器时定位错误的问题 [#5429](https://github.com/youzan/vant/issues/5429)
|
||||
- Icon: 修复 medel-o 图标不展示的问题 [7b905a](https://github.com/youzan/vant/commit/7b905a6de85b895e2226c35875ee3633c2ae7e79)
|
||||
- ImagePreview: 修复 close 事件重复触发的问题 [#5410](https://github.com/youzan/vant/issues/5410)
|
||||
- PullRefresh: 修复下拉到顶部时可能不触发下拉刷新的问题 [e00058](https://github.com/youzan/vant/commit/e00058b681d8796feaaaa4a9f2c4083a18b61fe9)
|
||||
- Tag: 修复动态设置 closeable 时动画错误的问题 [fe6e2f](https://github.com/youzan/vant/commit/fe6e2f29ba289206138fe17df046a55000b218ad)
|
||||
- Tag: 修复 close 时会触发 click 事件的问题 [#5351](https://github.com/youzan/vant/issues/5351)
|
||||
- Toast: 修复同时存在多个 Toast 时 forbidClick 可能失效的问题 [#5398](https://github.com/youzan/vant/issues/5398)
|
||||
- Picker: 修复在桌面端使用时拖动后回弹的问题 [#5430](https://github.com/youzan/vant/issues/5430)
|
||||
- Stepper: 修复在 safari 上禁用时文字颜色不正确的问题 [#5428](https://github.com/youzan/vant/issues/5428)
|
||||
- IndexBar: 修复 IndexAnchor 没有父容器时定位错误的问题 [#5429](https://github.com/youzan/vant/issues/5429)
|
||||
|
||||
**Types**
|
||||
|
||||
* AddressEdit: 新增 setAddressDetail 方法的类型定义 [#5352](https://github.com/youzan/vant/issues/5352)
|
||||
* Area: 新增 reset 方法的类型定义 [#5353](https://github.com/youzan/vant/issues/5353)
|
||||
* Checkbox: 新增 toggle 方法的类型定义 [#5354](https://github.com/youzan/vant/issues/5354)
|
||||
* CountDown: 新增 start、end、reset 方法的类型定义 [0438bd](https://github.com/youzan/vant/commit/0438bdbc97a81ad8b7de18ef8784d9907ce641c6)
|
||||
* DropdownItem: 新增 toggle 方法的类型定义 [5c1883](https://github.com/youzan/vant/commit/5c1883f77c36d5026c60c873197dab98d4ca42f5)
|
||||
* Field: 新增 focus、blur 方法的类型定义 [0b5c8e](https://github.com/youzan/vant/commit/0b5c8e5f3df570292e8599e7c2ff997fbee120ce)
|
||||
* List: 新增 check 方法的类型定义 [285bce](https://github.com/youzan/vant/commit/285bce677c8997d55515a760f4d12b05349ebd3f)
|
||||
* Picker: 新增 getValues 等方法的类型定义 [46d2b0](https://github.com/youzan/vant/commit/46d2b094477b52a96e85d18ec6fc42051a832e10)
|
||||
* Sku: 新增 methods types [d2bb9f](https://github.com/youzan/vant/commit/d2bb9fa81b401e429296003e4c2ec8c0e544d2af)
|
||||
* Swipe: 新增 swipeTo、resize 方法的类型定义 [a1831b](https://github.com/youzan/vant/commit/a1831b86387f1127325b9952d2d18349d41dc5c7)
|
||||
* SwipeCell: 新增 open、close 方法的类型定义 [9a9676](https://github.com/youzan/vant/commit/9a9676d6af7d29ac2221761ad680cecd4e929a39)
|
||||
* Tabs: 新增 resize 方法的类型定义 [3c526e](https://github.com/youzan/vant/commit/3c526ec1a26b5a38bc6a6ba2ded7a3db94bbcced)
|
||||
* Uploader: 新增 closeImagePreview 方法的类型定义 [cf191e](https://github.com/youzan/vant/commit/cf191e09cbc8093bb72f5d1e9381b263cdf9f0d2)
|
||||
|
||||
- AddressEdit: 新增 setAddressDetail 方法的类型定义 [#5352](https://github.com/youzan/vant/issues/5352)
|
||||
- Area: 新增 reset 方法的类型定义 [#5353](https://github.com/youzan/vant/issues/5353)
|
||||
- Checkbox: 新增 toggle 方法的类型定义 [#5354](https://github.com/youzan/vant/issues/5354)
|
||||
- CountDown: 新增 start、end、reset 方法的类型定义 [0438bd](https://github.com/youzan/vant/commit/0438bdbc97a81ad8b7de18ef8784d9907ce641c6)
|
||||
- DropdownItem: 新增 toggle 方法的类型定义 [5c1883](https://github.com/youzan/vant/commit/5c1883f77c36d5026c60c873197dab98d4ca42f5)
|
||||
- Field: 新增 focus、blur 方法的类型定义 [0b5c8e](https://github.com/youzan/vant/commit/0b5c8e5f3df570292e8599e7c2ff997fbee120ce)
|
||||
- List: 新增 check 方法的类型定义 [285bce](https://github.com/youzan/vant/commit/285bce677c8997d55515a760f4d12b05349ebd3f)
|
||||
- Picker: 新增 getValues 等方法的类型定义 [46d2b0](https://github.com/youzan/vant/commit/46d2b094477b52a96e85d18ec6fc42051a832e10)
|
||||
- Sku: 新增 methods types [d2bb9f](https://github.com/youzan/vant/commit/d2bb9fa81b401e429296003e4c2ec8c0e544d2af)
|
||||
- Swipe: 新增 swipeTo、resize 方法的类型定义 [a1831b](https://github.com/youzan/vant/commit/a1831b86387f1127325b9952d2d18349d41dc5c7)
|
||||
- SwipeCell: 新增 open、close 方法的类型定义 [9a9676](https://github.com/youzan/vant/commit/9a9676d6af7d29ac2221761ad680cecd4e929a39)
|
||||
- Tabs: 新增 resize 方法的类型定义 [3c526e](https://github.com/youzan/vant/commit/3c526ec1a26b5a38bc6a6ba2ded7a3db94bbcced)
|
||||
- Uploader: 新增 closeImagePreview 方法的类型定义 [cf191e](https://github.com/youzan/vant/commit/cf191e09cbc8093bb72f5d1e9381b263cdf9f0d2)
|
||||
|
||||
### [v2.3.3](https://github.com/youzan/vant/tree/v2.3.3)
|
||||
|
||||
`2019-12-21`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复 babel-plugin-import 按需引入部分组件时编译报错的问题
|
||||
|
||||
|
||||
### [v2.3.2](https://github.com/youzan/vant/tree/v2.3.2)
|
||||
|
||||
`2019-12-20`
|
||||
|
||||
**Bug Fixes**
|
||||
@ -230,16 +347,16 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 CountDown 在特定情况下内部计时器未清除的问题 [\#5340](https://github.com/youzan/vant/pull/5340)
|
||||
- 修复 ImagePreview 在特定情况下会重复 onClose 回调的问题 [\#5341](https://github.com/youzan/vant/pull/5341)
|
||||
|
||||
|
||||
### [v2.3.1](https://github.com/youzan/vant/tree/v2.3.1)
|
||||
|
||||
`2019-12-20`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复全量引入组件时，入口文件中存在未编译的 ES6 代码的问题
|
||||
|
||||
|
||||
### [v2.3.0](https://github.com/youzan/vant/tree/v2.3.0)
|
||||
|
||||
`2019-12-20`
|
||||
|
||||
**Style**
|
||||
@ -301,8 +418,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Uploader 重复上传同张图片时不会触发 oversize 事件的问题 [\#5177](https://github.com/youzan/vant/pull/5177)
|
||||
- 修复主题定制时使用低版本 Less 会报错的问题 [\#5157](https://github.com/youzan/vant/pull/5157)
|
||||
|
||||
|
||||
### [v2.2.16](https://github.com/youzan/vant/tree/v2.2.16)
|
||||
|
||||
`2019-12-03`
|
||||
|
||||
**Features**
|
||||
@ -310,16 +427,16 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- Stepper: 新增 disable-plus 属性 [\#5180](https://github.com/youzan/vant/pull/5180)
|
||||
- Stepper: 新增 disable-minus 属性 [\#5180](https://github.com/youzan/vant/pull/5180)
|
||||
|
||||
|
||||
### [v2.2.15](https://github.com/youzan/vant/tree/v2.2.15)
|
||||
|
||||
`2019-11-28`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复 List 组件在部分情况下加载状态未重置的问题
|
||||
|
||||
|
||||
### [v2.2.14](https://github.com/youzan/vant/tree/v2.2.14)
|
||||
|
||||
`2019-11-22`
|
||||
|
||||
**Features**
|
||||
@ -336,8 +453,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Tabbar 设置 safe-area-inset-bottom 后可能出现样式错位的问题 [\#5079](https://github.com/youzan/vant/pull/5079)
|
||||
- 修复 DropdownMenu 使用 get-container 属性时点击后会立即关闭的问题 [\#5047](https://github.com/youzan/vant/pull/5047)
|
||||
|
||||
|
||||
### [v2.2.13](https://github.com/youzan/vant/tree/v2.2.13)
|
||||
|
||||
`2019-11-14`
|
||||
|
||||
**Features**
|
||||
@ -360,8 +477,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 DateTimePicker 动态设置 max-hour 并小于 v-model 绑定的时间时出现错误的问题 [\#5006](https://github.com/youzan/vant/pull/5006)
|
||||
- 修复 ImagePreview 类型中定义缺少 swipeDuration 选项的问题 [\#4968](https://github.com/youzan/vant/pull/4968)
|
||||
|
||||
|
||||
### [v2.2.12](https://github.com/youzan/vant/tree/v2.2.12)
|
||||
|
||||
`2019-11-07`
|
||||
|
||||
**Features**
|
||||
@ -375,8 +492,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 List 在初始化时可能同时触发两次 load 事件的问题 [\#4953](https://github.com/youzan/vant/pull/4953)
|
||||
- 修复 @border-color 变量无法定制某些组件边框颜色的问题 [\#4939](https://github.com/youzan/vant/pull/4939)
|
||||
|
||||
|
||||
### [v2.2.11](https://github.com/youzan/vant/tree/v2.2.11)
|
||||
|
||||
`2019-11-04`
|
||||
|
||||
**Features**
|
||||
@ -393,8 +510,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 CountDown 在 keep-alive 状态下未暂停定时器的问题 [\#4919](https://github.com/youzan/vant/pull/4919)
|
||||
- 修复 Grid 使用 icon 插槽时 info、dot 属性不生效的问题 [\#4902](https://github.com/youzan/vant/pull/4902)
|
||||
|
||||
|
||||
### [v2.2.10](https://github.com/youzan/vant/tree/v2.2.10)
|
||||
|
||||
`2019-10-27`
|
||||
|
||||
**Features**
|
||||
@ -409,8 +526,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Uploader 文件预览圆角样式错误的问题 [\#4846](https://github.com/youzan/vant/pull/4846)
|
||||
- 修复 DatetimePicker 同时使用 min-date 和 filter 时初始值错误的问题 [\#4837](https://github.com/youzan/vant/pull/4837)
|
||||
|
||||
|
||||
### [v2.2.9](https://github.com/youzan/vant/tree/v2.2.9)
|
||||
|
||||
`2019-10-20`
|
||||
|
||||
**Features**
|
||||
@ -430,8 +547,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 ImagePreview 点击索引时会关闭预览的问题 [\#4764](https://github.com/youzan/vant/pull/4764)
|
||||
- 修复 AddressEdit 设置 area-placeholder 后无法选择海外地址的问题 [\#4769](https://github.com/youzan/vant/pull/4769)
|
||||
|
||||
|
||||
### [v2.2.8](https://github.com/youzan/vant/tree/v2.2.8)
|
||||
|
||||
`2019-10-17`
|
||||
|
||||
**Features**
|
||||
@ -452,8 +569,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Rate 由于 inline-block 导致的错误高度 [\#4693](https://github.com/youzan/vant/pull/4693)
|
||||
- 修复 AddressEdit 省市区未选择完全时能够保存的问题 [\#4724](https://github.com/youzan/vant/pull/4724)
|
||||
|
||||
|
||||
### [v2.2.7](https://github.com/youzan/vant/tree/v2.2.7)
|
||||
|
||||
`2019-10-11`
|
||||
|
||||
**Features**
|
||||
@ -471,8 +588,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 DatetimePicker 动态修改时间范围时, confirm 事件无法获取到正确结果的问题 [\#4676](https://github.com/youzan/vant/pull/4676)
|
||||
- 修复 Field 同时设置 error 和 disabled 属性时文字颜色错误的问题 [\#4666](https://github.com/youzan/vant/pull/4666)
|
||||
|
||||
|
||||
### [v2.2.6](https://github.com/youzan/vant/tree/v2.2.6)
|
||||
|
||||
`2019-10-08`
|
||||
|
||||
**Features**
|
||||
@ -492,8 +609,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 AddressList input 事件重复触发的问题 [\#4659](https://github.com/youzan/vant/pull/4659)
|
||||
- 修复 NumberKeyboard 在 Vue 2.6 下的兼容问题 [\#4632](https://github.com/youzan/vant/pull/4632)
|
||||
|
||||
|
||||
### [v2.2.5](https://github.com/youzan/vant/tree/v2.2.5)
|
||||
|
||||
`2019-09-28`
|
||||
|
||||
**Features**
|
||||
@ -513,16 +630,16 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Swipe swipeTo 方法在某些边界情况下过渡动画不正确的问题 [\#4570](https://github.com/youzan/vant/pull/4570)
|
||||
- 修复 Uploader 预览 URL 相同的图片时索引错误的问题 [\#4577](https://github.com/youzan/vant/pull/4577)
|
||||
|
||||
|
||||
### [v2.2.4](https://github.com/youzan/vant/tree/v2.2.4) [已废弃]
|
||||
|
||||
`2019-09-28` 🇨🇳
|
||||
|
||||
**Tips**
|
||||
|
||||
- 本版本存在样式丢失问题，请使用 2.2.5 版本
|
||||
|
||||
|
||||
### [v2.2.3](https://github.com/youzan/vant/tree/v2.2.3)
|
||||
|
||||
`2019-09-24`
|
||||
|
||||
**Features**
|
||||
@ -542,8 +659,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- ActionSheet: 默认开启 safe-area-inset-bottom 属性 [\#4524](https://github.com/youzan/vant/pull/4524)
|
||||
- NumberKeyboard: 默认开启 safe-area-inset-bottom 属性 [\#4544](https://github.com/youzan/vant/pull/4544)
|
||||
|
||||
|
||||
### [v2.2.2](https://github.com/youzan/vant/tree/v2.2.2)
|
||||
|
||||
`2019-09-19`
|
||||
|
||||
**Features**
|
||||
@ -561,8 +678,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 DatetimePicker 选项为纯文字时陷入死循环的问题 [\#4485](https://github.com/youzan/vant/pull/4485)
|
||||
- 修复 ImagePreview 手势缩放时可能出现缩放比例异常的问题 [\#4477](https://github.com/youzan/vant/pull/4477)
|
||||
|
||||
|
||||
### [v2.2.1](https://github.com/youzan/vant/tree/v2.2.1)
|
||||
|
||||
`2019-09-12`
|
||||
|
||||
**Features**
|
||||
@ -588,8 +705,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Uploader 删除时会触发 click-preview 事件的问题 [\#4407](https://github.com/youzan/vant/pull/4407)
|
||||
- 修复 Progress 文字位置不准确的问题 [\#4396](https://github.com/youzan/vant/pull/4396)
|
||||
|
||||
|
||||
### [v2.2.0](https://github.com/youzan/vant/tree/v2.2.0)
|
||||
|
||||
`2019-09-06`
|
||||
|
||||
**Features**
|
||||
@ -619,8 +736,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 ImagePreview 在关闭后未重置图片缩放状态的问题 [\#4319](https://github.com/youzan/vant/pull/4319)
|
||||
- 修复 ImagePreview 在某些情况下页码不正确的问题 [\#4320](https://github.com/youzan/vant/pull/4320)
|
||||
|
||||
|
||||
### [v2.1.8](https://github.com/youzan/vant/tree/v2.1.8)
|
||||
|
||||
`2019-08-29`
|
||||
|
||||
**Features**
|
||||
@ -636,8 +753,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Picker 滑动暂停时位置错误的问题 [\#4277](https://github.com/youzan/vant/pull/4277)
|
||||
- 修复 Picker 滑动结束时触发点击会跳动的问题 [\#4273](https://github.com/youzan/vant/pull/4273)
|
||||
|
||||
|
||||
### [v2.1.7](https://github.com/youzan/vant/tree/v2.1.7)
|
||||
|
||||
`2019-08-26`
|
||||
|
||||
**Bug Fixes**
|
||||
@ -645,8 +762,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 RadioGroup 设置 disabled 属性后仍能切换的问题 [\#4242](https://github.com/youzan/vant/pull/4242)
|
||||
- 修复 CheckboxGroup 设置 disabled 属性后仍能切换的问题 [\#4242](https://github.com/youzan/vant/pull/4242)
|
||||
|
||||
|
||||
### [v2.1.6](https://github.com/youzan/vant/tree/v2.1.6)
|
||||
|
||||
`2019-08-26`
|
||||
|
||||
**Features**
|
||||
@ -665,8 +782,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 NumberKeyboard 使用 title 属性时按钮位置错误的问题 [\#4228](https://github.com/youzan/vant/pull/4228)
|
||||
- 修复 IndexBar 在 sticky 模式下锚点位置可能超出元素边界的问题 [\#4218](https://github.com/youzan/vant/pull/4218)
|
||||
|
||||
|
||||
### [v2.1.5](https://github.com/youzan/vant/tree/v2.1.5)
|
||||
|
||||
`2019-08-23`
|
||||
|
||||
**Features**
|
||||
@ -683,8 +800,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 IndexBar 在局部滚动容器内计算错误的问题 [\#4184](https://github.com/youzan/vant/pull/4184)
|
||||
- 修复 NumberKeyboard 按键边框颜色错误的问题 [\#4183](https://github.com/youzan/vant/pull/4183)
|
||||
|
||||
|
||||
### [v2.1.4](https://github.com/youzan/vant/tree/v2.1.4)
|
||||
|
||||
`2019-08-21`
|
||||
|
||||
**Features**
|
||||
@ -709,8 +826,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Tabbar 触发 vue-router 路由重复跳转提示的问题 [\#4147](https://github.com/youzan/vant/pull/4147)
|
||||
- 修复 Picker 样式可能被重复引入的 base 样式覆盖的问题 [\#4136](https://github.com/youzan/vant/pull/4136)
|
||||
|
||||
|
||||
### [v2.1.3](https://github.com/youzan/vant/tree/v2.1.3)
|
||||
|
||||
`2019-08-15`
|
||||
|
||||
**Features**
|
||||
@ -731,8 +848,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Icon gift-o、refund-o 图标不完整的问题 [\#4089](https://github.com/youzan/vant/pull/4089)
|
||||
- 修复 Slider 位置未改变时也会触发 change 事件的问题 [\#4087](https://github.com/youzan/vant/pull/4087)
|
||||
|
||||
|
||||
### [v2.1.2](https://github.com/youzan/vant/tree/v2.1.2)
|
||||
|
||||
`2019-08-10`
|
||||
|
||||
**Features**
|
||||
@ -755,8 +872,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
- 修复 Sticky 在局部滚动容器内位置错误的问题 [\#4055](https://github.com/youzan/vant/pull/4055)
|
||||
|
||||
|
||||
### [v2.1.1](https://github.com/youzan/vant/tree/v2.1.1)
|
||||
|
||||
`2019-08-02`
|
||||
|
||||
**Bug Fixes**
|
||||
@ -764,8 +881,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 DatetimePicker 事件无法触发的问题 [\#4027](https://github.com/youzan/vant/pull/4027)
|
||||
- 修复 Popup 设置 z-index 顺序错误的问题 [\#4026](https://github.com/youzan/vant/pull/4026)
|
||||
|
||||
|
||||
### [v2.1.0](https://github.com/youzan/vant/tree/v2.1.0)
|
||||
|
||||
`2019-08-01` 🇨🇳
|
||||
|
||||
**Features**
|
||||
@ -796,8 +913,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Tabs 在 sticky 模式下滚动回到顶部时存在 1 像素偏差的问题 [\#3949](https://github.com/youzan/vant/pull/3949)
|
||||
- 修复 DatetimePicker 使用 formatter 且为 time 类型时 confirm 事件参数错误的问题 [\#3969](https://github.com/youzan/vant/pull/3969)
|
||||
|
||||
|
||||
### [v2.0.9](https://github.com/youzan/vant/tree/v2.0.9)
|
||||
|
||||
`2019-07-19`
|
||||
|
||||
**Features**
|
||||
@ -819,8 +936,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Dialog closeOnPopstate 无法被禁用的问题 [\#3868](https://github.com/youzan/vant/pull/3868)
|
||||
- 修复 DropdownMenu toggle 方法无法打开菜单的问题 [\#3876](https://github.com/youzan/vant/pull/3876)
|
||||
|
||||
|
||||
### [v2.0.8](https://github.com/youzan/vant/tree/v2.0.8)
|
||||
|
||||
`2019-07-16`
|
||||
|
||||
**Features**
|
||||
@ -836,8 +953,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 List 在 body 标签添加滚动样式时异常的问题 [\#3844](https://github.com/youzan/vant/pull/3844)
|
||||
- 修复 IndexBar 在某些情况下 active 锚点失效的问题 [\#3832](https://github.com/youzan/vant/pull/3832)
|
||||
|
||||
|
||||
### [v2.0.7](https://github.com/youzan/vant/tree/v2.0.7)
|
||||
|
||||
`2019-07-11`
|
||||
|
||||
**Features**
|
||||
@ -857,8 +974,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Dialog closeOnPopstate 方法缺少类型定义的问题 [\#3789](https://github.com/youzan/vant/pull/3789)
|
||||
- 修复 DatetimePicker 使用 filter 属性且为 time 类型时 confirm 事件参数错误的问题 [\#3816](https://github.com/youzan/vant/pull/3816)
|
||||
|
||||
|
||||
### [v2.0.6](https://github.com/youzan/vant/tree/v2.0.6)
|
||||
|
||||
`2019-07-05`
|
||||
|
||||
**Features**
|
||||
@ -874,8 +991,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 PullRefresh 同步修改 loading 时状态错误的问题 [\#3719](https://github.com/youzan/vant/pull/3719)
|
||||
- 修复 Collapse 在 safari 浏览器上渲染内容较多时高度错误的问题 [\#3723](https://github.com/youzan/vant/pull/3723)
|
||||
|
||||
|
||||
### [v2.0.5](https://github.com/youzan/vant/tree/v2.0.5)
|
||||
|
||||
`2019-07-02`
|
||||
|
||||
**Features**
|
||||
@ -888,8 +1005,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
- 修复 postcss 配置对 vant 不生效的问题
|
||||
|
||||
|
||||
### [v2.0.4](https://github.com/youzan/vant/tree/v2.0.4) 🇨🇳
|
||||
|
||||
`2019-07-01`
|
||||
|
||||
**Features**
|
||||
@ -909,8 +1026,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Collapse 在 safari 浏览器上动画可能闪烁的问题 [\#3686](https://github.com/youzan/vant/pull/3686)
|
||||
- 修复 Picker 在低版本 Android 机器上的兼容性问题 [\#3688](https://github.com/youzan/vant/pull/3688)
|
||||
|
||||
|
||||
### [v2.0.3](https://github.com/youzan/vant/tree/v2.0.3)
|
||||
|
||||
`2019-06-27`
|
||||
|
||||
**Features**
|
||||
@ -932,8 +1049,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Tab 使用 title slot 时可能报错的问题 [\#3631](https://github.com/youzan/vant/pull/3631)
|
||||
- 修复 vetur 插件自动补全组件属性不生效的问题 [\#3617](https://github.com/youzan/vant/pull/3617)
|
||||
|
||||
|
||||
### [v2.0.2](https://github.com/youzan/vant/tree/v2.0.2)
|
||||
|
||||
`2019-06-21`
|
||||
|
||||
**Features**
|
||||
@ -941,7 +1058,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- Picker: 优化滚动速率 [\#3556](https://github.com/youzan/vant/pull/3556)
|
||||
- Card: 新增 click-thumb 事件 [\#3586](https://github.com/youzan/vant/pull/3586)
|
||||
- CouponList: 新增 enabled-title、disabled-title 属性 [\#3578](https://github.com/youzan/vant/pull/3578)
|
||||
- Slider: 支持传入任意范围的 min、max 值 [\#3566](https://github.com/youzan/vant/pull/3566)
|
||||
- Slider: 支持传入任意范围的 min、max 值 [\#3566](https://github.com/youzan/vant/pull/3566)
|
||||
- Uploader: 支持 before-read 属性返回 Promise [\#3572](https://github.com/youzan/vant/pull/3572)
|
||||
- NumberKeyboard: 支持 v-model 绑定输入值 [\#3531](https://github.com/youzan/vant/pull/3531)
|
||||
- NumberKeyboard: 新增 maxlength 属性 [\#3532](https://github.com/youzan/vant/pull/3532)
|
||||
@ -953,8 +1070,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Button 在 safari 浏览器上存在外边距的问题 [\#3577](https://github.com/youzan/vant/pull/3577)
|
||||
- 修复 Toast clear 方法类型定义缺少参数的问题 [\#3542](https://github.com/youzan/vant/pull/3542)
|
||||
|
||||
|
||||
### [v2.0.1](https://github.com/youzan/vant/tree/v2.0.1)
|
||||
|
||||
`2019-06-15`
|
||||
|
||||
**Features**
|
||||
@ -972,8 +1089,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 修复 Locale 函数类型文案无法修改的问题 [\#3498](https://github.com/youzan/vant/pull/3498)
|
||||
- 修复 Toast 在 multiple 模式下没有淡出动画的问题 [\#3504](https://github.com/youzan/vant/pull/3504)
|
||||
|
||||
|
||||
### [v2.0.0](https://github.com/youzan/vant/tree/v2.0.0)
|
||||
|
||||
`2019-06-12`
|
||||
|
||||
#### 主要变动
|
||||
|
||||
@ -19,17 +19,17 @@
|
||||
|
||||
### 快速上手
|
||||
|
||||
请参考 [快速上手](#/zh-CN/quickstart) 章节
|
||||
请参考[快速上手](#/zh-CN/quickstart)章节。
|
||||
|
||||
### 贡献代码
|
||||
|
||||
修改代码请阅读我们的 [开发指南](#/zh-CN/contribution)
|
||||
修改代码请阅读我们的[开发指南](#/zh-CN/contribution)。
|
||||
|
||||
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)
|
||||
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
|
||||
|
||||
### 浏览器支持
|
||||
|
||||
现代浏览器以及 Android 4.0+, iOS 8.0+
|
||||
现代浏览器以及 Android 4.0+, iOS 8.0+。
|
||||
|
||||
### 加入我们
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "2.4.7-beta.0",
|
||||
"version": "2.5.3",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -63,7 +63,7 @@
|
||||
"vue": ">= 2.5.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vant/cli": "^2.2.2",
|
||||
"@vant/cli": "^2.2.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
# 更新日志
|
||||
|
||||
### [v2.2.4]
|
||||
`2020-02-14`
|
||||
|
||||
- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/youzan/vant/pull/5655)
|
||||
|
||||
|
||||
### [v2.2.3]
|
||||
`2020-02-13`
|
||||
|
||||
- 链接颜色调整为蓝色
|
||||
|
||||
|
||||
### [v2.2.2]
|
||||
`2020-02-05`
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/cli",
|
||||
"version": "2.2.2",
|
||||
"version": "2.2.4",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"typings": "lib/index.d.ts",
|
||||
@ -33,13 +33,13 @@
|
||||
"vue-template-compiler": "^2.5.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^8.0.1",
|
||||
"@types/fs-extra": "^8.1.0",
|
||||
"@types/html-webpack-plugin": "^3.2.2",
|
||||
"@types/lodash": "^4.14.149",
|
||||
"@types/postcss-load-config": "^2.0.1",
|
||||
"@types/sass": "^1.16.0",
|
||||
"@types/shelljs": "^0.8.6",
|
||||
"@types/webpack": "^4.41.4",
|
||||
"@types/webpack": "^4.41.6",
|
||||
"@types/webpack-dev-server": "^3.10.0",
|
||||
"@types/webpack-merge": "^4.1.5"
|
||||
},
|
||||
@ -51,7 +51,7 @@
|
||||
"@babel/preset-env": "^7.8.4",
|
||||
"@babel/preset-typescript": "^7.8.3",
|
||||
"@nuxt/friendly-errors-webpack-plugin": "^2.5.0",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/jest": "^25.1.3",
|
||||
"@vant/eslint-config": "^2.0.0",
|
||||
"@vant/markdown-loader": "^2.3.0",
|
||||
"@vant/markdown-vetur": "^1.1.0",
|
||||
@ -68,40 +68,40 @@
|
||||
"cache-loader": "^4.1.0",
|
||||
"chokidar": "^3.3.1",
|
||||
"clean-css": "^4.2.3",
|
||||
"codecov": "^3.6.4",
|
||||
"codecov": "^3.6.5",
|
||||
"commander": "^4.1.1",
|
||||
"consola": "^2.11.3",
|
||||
"conventional-changelog": "^3.1.18",
|
||||
"cross-env": "^7.0.0",
|
||||
"css-loader": "^3.4.2",
|
||||
"eslint": "^6.8.0",
|
||||
"fast-glob": "^3.1.1",
|
||||
"fast-glob": "^3.2.1",
|
||||
"gh-pages": "2.0.1",
|
||||
"html-webpack-plugin": "3.2.0",
|
||||
"husky": "^4.2.1",
|
||||
"husky": "^4.2.3",
|
||||
"jest": "^25.1.0",
|
||||
"jest-canvas-mock": "^2.2.0",
|
||||
"jest-serializer-vue": "^2.0.2",
|
||||
"less": "^3.10.3",
|
||||
"less": "^3.11.1",
|
||||
"less-loader": "^5.0.0",
|
||||
"lint-staged": "^10.0.7",
|
||||
"lodash": "^4.17.15",
|
||||
"ora": "^4.0.3",
|
||||
"portfinder": "^1.0.25",
|
||||
"postcss": "^7.0.26",
|
||||
"postcss": "^7.0.27",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"release-it": "^12.4.3",
|
||||
"release-it": "^12.6.0",
|
||||
"sass": "^1.25.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"shelljs": "^0.8.3",
|
||||
"style-loader": "^1.1.3",
|
||||
"stylelint": "^13.0.0",
|
||||
"typescript": "^3.7.5",
|
||||
"stylelint": "^13.2.0",
|
||||
"typescript": "^3.8.2",
|
||||
"vue-jest": "4.0.0-beta.2",
|
||||
"vue-loader": "^15.8.3",
|
||||
"vue-loader": "^15.9.0",
|
||||
"vue-router": "^3.1.5",
|
||||
"webpack": "^4.41.5",
|
||||
"webpack-dev-server": "3.10.2",
|
||||
"webpack": "^4.41.6",
|
||||
"webpack-dev-server": "3.10.3",
|
||||
"webpack-merge": "^4.2.2",
|
||||
"webpackbar": "^4.0.0"
|
||||
},
|
||||
|
||||
@ -37,8 +37,17 @@ export default {
|
||||
}
|
||||
|
||||
a {
|
||||
color: @van-doc-green;
|
||||
margin: 0 1px;
|
||||
color: @van-doc-blue;
|
||||
-webkit-font-smoothing: auto;
|
||||
|
||||
&:hover {
|
||||
color: darken(@van-doc-blue, 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: darken(@van-doc-blue, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
@ -162,7 +171,7 @@ export default {
|
||||
box-sizing: border-box;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid @van-doc-dark-grey;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { join } from 'path';
|
||||
import { sep, join } from 'path';
|
||||
import {
|
||||
lstatSync,
|
||||
existsSync,
|
||||
@ -15,8 +15,8 @@ import {
|
||||
|
||||
export const EXT_REGEXP = /\.\w+$/;
|
||||
export const SFC_REGEXP = /\.(vue)$/;
|
||||
export const DEMO_REGEXP = /\/demo$/;
|
||||
export const TEST_REGEXP = /\/test$/;
|
||||
export const DEMO_REGEXP = new RegExp('\\' + sep + 'demo$');
|
||||
export const TEST_REGEXP = new RegExp('\\' + sep + 'test$');
|
||||
export const STYLE_REGEXP = /\.(css|less|scss)$/;
|
||||
export const SCRIPT_REGEXP = /\.(js|ts|jsx|tsx)$/;
|
||||
export const ENTRY_EXTS = ['js', 'ts', 'tsx', 'jsx', 'vue'];
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* Build style entry of all components
|
||||
*/
|
||||
|
||||
import { join, relative } from 'path';
|
||||
import { sep, join, relative } from 'path';
|
||||
import { outputFileSync } from 'fs-extra';
|
||||
import { getComponents, replaceExt } from '../common';
|
||||
import { CSS_LANG, getCssBaseFile } from '../common/css';
|
||||
@ -72,7 +72,7 @@ function genEntry(params: {
|
||||
}
|
||||
|
||||
content += depsPath.map(template).join('\n');
|
||||
|
||||
content = content.replace(new RegExp('\\' + sep, 'g'), '/');
|
||||
outputFileSync(outputFile, content);
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { join } from 'path';
|
||||
import { relative, sep, join } from 'path';
|
||||
import { CSS_LANG } from '../common/css';
|
||||
import { existsSync } from 'fs-extra';
|
||||
import { getDeps, clearDepsCache, fillExt } from './get-deps';
|
||||
@ -6,10 +6,9 @@ import { getComponents, smartOutputFile } from '../common';
|
||||
import { SRC_DIR, STYPE_DEPS_JSON_FILE } from '../common/constant';
|
||||
|
||||
function matchPath(path: string, component: string): boolean {
|
||||
return path
|
||||
.replace(SRC_DIR, '')
|
||||
.split('/')
|
||||
.includes(component);
|
||||
const p = relative(SRC_DIR, path);
|
||||
const arr = p.split(sep);
|
||||
return arr.includes(component);
|
||||
}
|
||||
|
||||
function getStylePath(component: string) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -133,6 +133,7 @@ export default {
|
||||
| overlay | Whether to show overlay | *boolean* | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | *boolean* | `true` |
|
||||
| lazy-render | Whether to lazy render util appeared | *boolean* | `true` |
|
||||
| close-on-popstate `v2.5.3` | Whether to close when popstate | *boolean* | `false` |
|
||||
| close-on-click-action | Whether to close when click action | *boolean* | `false` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `true` |
|
||||
@ -153,10 +154,10 @@ export default {
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| select | Triggered when click option | item, index |
|
||||
| select | Triggered when click option | *action: Action, index: number* |
|
||||
| cancel | Triggered when cancel click | - |
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
| open | Triggered when open ActionSheet | - |
|
||||
| opened | Triggered when opened ActionSheet | - |
|
||||
| close | Triggered when close ActionSheet | - |
|
||||
| opened | Triggered when opened ActionSheet | - |
|
||||
| closed | Triggered when closed ActionSheet | - |
|
||||
| click-overlay | Triggered when click overlay | - |
|
||||
|
||||
@ -141,15 +141,16 @@ export default {
|
||||
| title | 顶部标题 | *string* | - |
|
||||
| cancel-text | 取消按钮文字 | *string* | - |
|
||||
| description `v2.2.8` | 选项上方的描述信息 | *string* | - |
|
||||
| close-icon `v2.2.13` | 关闭 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | `cross` |
|
||||
| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | *string* | `cross` |
|
||||
| duration `v2.0.3` | 动画时长，单位秒 | *number \| string* | `0.3` |
|
||||
| round `v2.0.9` | 是否显示圆角 | *boolean* | `true` |
|
||||
| overlay | 是否显示遮罩层 | *boolean* | `true` |
|
||||
| lock-scroll | 是否锁定背景滚动 | *boolean* | `true` |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` |
|
||||
| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | *boolean* | `false` |
|
||||
| close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否开启 [底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | *string \| () => Element* | - |
|
||||
|
||||
### Action 数据结构
|
||||
@ -169,13 +170,13 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| select | 选中选项时触发，禁用或加载状态下不会触发 | item: 选项对应的对象, index: 选择对应的索引 |
|
||||
| select | 选中选项时触发，禁用或加载状态下不会触发 | *action: Action, index: number* |
|
||||
| cancel | 取消按钮点击时触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
| open | 打开菜单时触发 | - |
|
||||
| opened | 打开菜单且动画结束后触发 | - |
|
||||
| close | 关闭菜单时触发 | - |
|
||||
| opened | 打开菜单且动画结束后触发 | - |
|
||||
| closed | 关闭菜单且动画结束后触发 | - |
|
||||
| click-overlay | 点击遮罩层时触发 | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@ -78,5 +78,9 @@
|
||||
color: @action-sheet-close-icon-color;
|
||||
font-size: @action-sheet-close-icon-size;
|
||||
line-height: inherit;
|
||||
|
||||
&:active {
|
||||
color: @action-sheet-close-icon-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,6 +34,7 @@ export type ActionSheetProps = PopupMixinProps & {
|
||||
closeIcon: string;
|
||||
cancelText?: string;
|
||||
description?: string;
|
||||
closeOnPopstate?: boolean;
|
||||
closeOnClickAction?: boolean;
|
||||
safeAreaInsetBottom?: boolean;
|
||||
};
|
||||
@ -143,6 +144,7 @@ function ActionSheet(
|
||||
lazyRender={props.lazyRender}
|
||||
lockScroll={props.lockScroll}
|
||||
getContainer={props.getContainer}
|
||||
closeOnPopstate={props.closeOnPopstate}
|
||||
closeOnClickOverlay={props.closeOnClickOverlay}
|
||||
safeAreaInsetBottom={props.safeAreaInsetBottom}
|
||||
{...inherit(ctx, true)}
|
||||
@ -164,6 +166,7 @@ ActionSheet.props = {
|
||||
cancelText: String,
|
||||
description: String,
|
||||
getContainer: [String, Function],
|
||||
closeOnPopstate: Boolean,
|
||||
closeOnClickAction: Boolean,
|
||||
round: {
|
||||
type: Boolean,
|
||||
|
||||
@ -73,6 +73,9 @@ export default {
|
||||
| show-delete | Whether to show delete button | *boolean* | `false` |
|
||||
| show-set-default | Whether to show default address switch | *boolean* | `false` |
|
||||
| show-search-result | Whether to show address search result | *boolean* | `false` |
|
||||
| show-area | Whether to show area cell | *boolean* | `true` |
|
||||
| show-detail | Whether to show detail field | *boolean* | `true` |
|
||||
| disable-area `v2.5.0` | Whether to disable area select | *boolean* | `false` |
|
||||
| save-button-text | Save button text | *string* | `Save` |
|
||||
| delete-button-text | Delete button text | *string* | `Delete` |
|
||||
| detail-rows | Detail input rows | *number \| string* | `1` |
|
||||
|
||||
@ -73,6 +73,9 @@ export default {
|
||||
| show-delete | 是否显示删除按钮 | *boolean* | `false` |
|
||||
| show-set-default | 是否显示默认地址栏 | *boolean* | `false` |
|
||||
| show-search-result | 是否显示搜索结果 | *boolean* | `false` |
|
||||
| show-area | 是否显示地区 | *boolean* | `true` |
|
||||
| show-detail | 是否显示详细地址 | *boolean* | `true` |
|
||||
| disable-area `v2.5.0` | 是否禁用地区选择 | *boolean* | `false` |
|
||||
| save-button-text | 保存按钮文字 | *string* | `保存` |
|
||||
| delete-button-text | 删除按钮文字 | *string* | `删除` |
|
||||
| detail-rows | 详细地址输入框行数 | *number \| string* | `1` |
|
||||
@ -104,7 +107,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
||||
@ -52,6 +52,7 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
disableArea: Boolean,
|
||||
detailRows: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
@ -250,7 +251,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
render() {
|
||||
const { data, errorInfo, searchResult } = this;
|
||||
const { data, errorInfo, searchResult, disableArea } = this;
|
||||
const onFocus = name => () => this.onFocus(name);
|
||||
|
||||
// hide bottom field when use search && detail get focused
|
||||
@ -280,15 +281,15 @@ export default createComponent({
|
||||
<Field
|
||||
vShow={this.showArea}
|
||||
readonly
|
||||
clickable
|
||||
clickable={!disableArea}
|
||||
label={t('area')}
|
||||
placeholder={t('areaPlaceholder')}
|
||||
errorMessage={errorInfo.areaCode}
|
||||
rightIcon="arrow"
|
||||
rightIcon={!disableArea ? 'arrow' : null}
|
||||
value={this.areaText}
|
||||
onFocus={onFocus('areaCode')}
|
||||
onClick={() => {
|
||||
this.showAreaPopup = true;
|
||||
this.showAreaPopup = !disableArea;
|
||||
}}
|
||||
/>
|
||||
<Detail
|
||||
|
||||
@ -7,19 +7,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,7 +38,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,19 +5,19 @@ exports[`create a AddressEdit 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@ -28,7 +28,7 @@ exports[`create a AddressEdit 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,19 +44,19 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@ -67,7 +67,7 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -75,7 +75,7 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -97,19 +97,19 @@ exports[`set-default 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@ -120,7 +120,7 @@ exports[`set-default 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -128,7 +128,7 @@ exports[`set-default 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -150,19 +150,19 @@ exports[`show area component 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@ -173,7 +173,7 @@ exports[`show area component 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -181,7 +181,7 @@ exports[`show area component 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -203,19 +203,19 @@ exports[`show area component 2`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@ -226,7 +226,7 @@ exports[`show area component 2`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -234,7 +234,7 @@ exports[`show area component 2`] = `
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>邮政编码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="邮政编码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -256,19 +256,19 @@ exports[`valid area placeholder confirm 1`] = `
|
||||
<div class="van-address-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>姓名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="收货人姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="收货人手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="选择省 / 市 / 区" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow">
|
||||
<!----></i></div>
|
||||
@ -279,7 +279,7 @@ exports[`valid area placeholder confirm 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@ import Radio from '../radio';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/types';
|
||||
import { DefaultSlots, ScopedSlot } from '../utils/types';
|
||||
|
||||
export type AddressItemData = {
|
||||
id: string | number;
|
||||
@ -27,6 +27,10 @@ export type AddressItemProps = {
|
||||
defaultTagText?: string;
|
||||
};
|
||||
|
||||
export type AddressItemSlots = DefaultSlots & {
|
||||
bottom?: ScopedSlot;
|
||||
};
|
||||
|
||||
export type AddressItemEvents = {
|
||||
onEdit(): void;
|
||||
onClick(): void;
|
||||
@ -38,7 +42,7 @@ const [createComponent, bem] = createNamespace('address-item');
|
||||
function AddressItem(
|
||||
h: CreateElement,
|
||||
props: AddressItemProps,
|
||||
slots: DefaultSlots,
|
||||
slots: AddressItemSlots,
|
||||
ctx: RenderContext<AddressItemProps>
|
||||
) {
|
||||
const { disabled, switchable } = props;
|
||||
@ -95,18 +99,18 @@ function AddressItem(
|
||||
}
|
||||
|
||||
return (
|
||||
<Cell
|
||||
class={bem({ disabled })}
|
||||
border={false}
|
||||
valueClass={bem('value')}
|
||||
clickable={switchable && !disabled}
|
||||
scopedSlots={{
|
||||
default: genContent,
|
||||
'right-icon': genRightIcon,
|
||||
}}
|
||||
onClick={onClick}
|
||||
{...inherit(ctx)}
|
||||
/>
|
||||
<div class={bem({ disabled })} onClick={onClick}>
|
||||
<Cell
|
||||
border={false}
|
||||
valueClass={bem('value')}
|
||||
scopedSlots={{
|
||||
default: genContent,
|
||||
'right-icon': genRightIcon,
|
||||
}}
|
||||
{...inherit(ctx)}
|
||||
/>
|
||||
{slots.bottom?.({ ...props.data, disabled })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -104,7 +104,8 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Custom content after list |
|
||||
| top | Custom content before list |
|
||||
| Name | Description | SlotProps |
|
||||
|------|------|------|
|
||||
| default | Custom content after list | - |
|
||||
| top | Custom content before list | - |
|
||||
| item-bottom `v2.5.0` | Custom content after list item | item |
|
||||
|
||||
@ -104,7 +104,8 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 在列表下方插入内容 |
|
||||
| top | 在顶部插入内容 |
|
||||
| 名称 | 说明 | SlotProps |
|
||||
|------|------|------|
|
||||
| default | 在列表下方插入内容 | - |
|
||||
| top | 在顶部插入内容 | - |
|
||||
| item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 |
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
|
||||
.van-address-item {
|
||||
padding: @address-list-item-padding;
|
||||
background-color: @white;
|
||||
border-radius: @border-radius-lg;
|
||||
|
||||
&:not(:last-child) {
|
||||
@ -79,6 +80,10 @@
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.van-radio__label {
|
||||
margin-left: @padding-sm;
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ export type AddressListProps = {
|
||||
|
||||
export type AddressListSlots = DefaultSlots & {
|
||||
top?: ScopedSlot;
|
||||
'item-bottom'?: ScopedSlot;
|
||||
};
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('address-list');
|
||||
@ -45,6 +46,9 @@ function AddressList(
|
||||
disabled={disabled}
|
||||
switchable={props.switchable}
|
||||
defaultTagText={props.defaultTagText}
|
||||
scopedSlots={{
|
||||
bottom: slots['item-bottom'],
|
||||
}}
|
||||
onSelect={() => {
|
||||
emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
|
||||
|
||||
|
||||
@ -5,34 +5,40 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-address-list">
|
||||
<div role="radiogroup" class="van-radio-group">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 18px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
|
||||
<div class="van-address-item">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 18px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
|
||||
</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
|
||||
</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<div class="van-address-item">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
|
||||
<div class="van-radio__icon van-radio__icon--round" style="font-size: 18px;"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">李四 1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span>
|
||||
</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
|
||||
<div class="van-cell van-cell--borderless van-address-item van-address-item--disabled">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">王五 1320000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<div class="van-address-item van-address-item--disabled">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">王五 1320000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
|
||||
</div>
|
||||
|
||||
@ -3,19 +3,23 @@
|
||||
exports[`unswitchable 1`] = `
|
||||
<div class="van-address-list">
|
||||
<div role="radiogroup" class="van-radio-group">
|
||||
<div class="van-cell van-cell--borderless van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">张三 13000000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<div class="van-address-item">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">张三 13000000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--borderless van-address-item">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">李四 1310000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
<div class="van-address-item">
|
||||
<div class="van-cell van-cell--borderless">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">李四 1310000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
|
||||
</div><i class="van-icon van-icon-edit van-address-item__edit">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
|
||||
|
||||
@ -79,6 +79,14 @@ Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
| cancel | triggers when clicking the cancel button | - |
|
||||
| change | Triggered when current option changed | Picker instance, current values，column index |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| title `v2.5.3` | Custom title |
|
||||
| columns-top `v2.5.3` | Custom content above columns |
|
||||
| columns-bottom `v2.5.3` | Custom content below columns |
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
省市区三级联动选择，通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
省市区三级联动选择，通常与[弹出层](#/zh-CN/popup)组件配合使用
|
||||
|
||||
### 引入
|
||||
|
||||
@ -78,9 +78,17 @@ Vue.use(Area);
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| title `v2.5.3` | 自定义标题内容 |
|
||||
| columns-top `v2.5.3` | 自定义选项上方内容 |
|
||||
| columns-bottom `v2.5.3` | 自定义选项下方内容 |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Area 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
||||
@ -1880,10 +1880,11 @@ export default {
|
||||
370113: '长清区',
|
||||
370114: '章丘区',
|
||||
370115: '济阳区',
|
||||
370116: '莱芜区',
|
||||
370117: '钢城区',
|
||||
370124: '平阴县',
|
||||
370126: '商河县',
|
||||
370190: '高新区',
|
||||
370191: '莱芜区',
|
||||
370202: '市南区',
|
||||
370203: '市北区',
|
||||
370211: '黄岛区',
|
||||
|
||||
@ -10,6 +10,21 @@ function isOverseaCode(code) {
|
||||
return code[0] === '9';
|
||||
}
|
||||
|
||||
function pickSlots(instance, keys) {
|
||||
const { $slots, $scopedSlots } = instance;
|
||||
const scopedSlots = {};
|
||||
|
||||
keys.forEach(key => {
|
||||
if ($scopedSlots[key]) {
|
||||
scopedSlots[key] = $scopedSlots[key];
|
||||
} else if ($slots[key]) {
|
||||
scopedSlots[key] = () => $slots[key];
|
||||
}
|
||||
});
|
||||
|
||||
return scopedSlots;
|
||||
}
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
...pickerProps,
|
||||
@ -290,6 +305,11 @@ export default createComponent({
|
||||
visibleItemCount={this.visibleItemCount}
|
||||
cancelButtonText={this.cancelButtonText}
|
||||
confirmButtonText={this.confirmButtonText}
|
||||
scopedSlots={pickSlots(this, [
|
||||
'title',
|
||||
'columns-top',
|
||||
'columns-bottom',
|
||||
])}
|
||||
{...{ on }}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -114,6 +114,26 @@ exports[`columns-num prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`columns-top、columns-bottom slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->Top<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>Bottom
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reset method 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
@ -173,6 +193,27 @@ exports[`reset method 2`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`title slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom Title<button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
|
||||
@ -128,3 +128,26 @@ test('columns-num prop', async () => {
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('title slot', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
scopedSlots: {
|
||||
title: () => 'Custom Title',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('columns-top、columns-bottom slot', async () => {
|
||||
const wrapper = mount(Area, {
|
||||
slots: {
|
||||
'columns-top': 'Top',
|
||||
'columns-bottom': 'Bottom',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -106,6 +106,7 @@ Vue.use(Button);
|
||||
| text | Text | *string* | - |
|
||||
| color `v2.1.8` | Color, support linear-gradient | *string* | - |
|
||||
| icon | Left Icon | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| tag | HTML Tag | *string* | `button` |
|
||||
| native-type | Native Type Attribute | *string* | `''` |
|
||||
| plain | Whether to be plain button | *boolean* | `false` |
|
||||
@ -125,5 +126,5 @@ Vue.use(Button);
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click button and not disabled or loading | event: Event |
|
||||
| touchstart | Triggered when touch start | event: TouchEvent |
|
||||
| click | Triggered when click button and not disabled or loading | *event: Event* |
|
||||
| touchstart | Triggered when touch start | *event: TouchEvent* |
|
||||
|
||||
@ -127,9 +127,10 @@ Vue.use(Button);
|
||||
| size | 尺寸，可选值为 `large` `small` `mini` | *string* | `normal` |
|
||||
| text | 按钮文字 | *string* | - |
|
||||
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - |
|
||||
| icon | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| tag | HTML 标签 | *string* | `button` |
|
||||
| native-type | 原生 button 标签 type 属性 | *string* | - |
|
||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| tag | 根节点的 HTML 标签 | *string* | `button` |
|
||||
| native-type | 原生 button 标签的 type 属性 | *string* | - |
|
||||
| block | 是否为块级元素 | *boolean* | `false` |
|
||||
| plain | 是否为朴素按钮 | *boolean* | `false` |
|
||||
| square | 是否为方形按钮 | *boolean* | `false` |
|
||||
@ -148,5 +149,5 @@ Vue.use(Button);
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: Event |
|
||||
| touchstart | 开始触摸按钮时触发 | event: TouchEvent |
|
||||
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | *event: Event* |
|
||||
| touchstart | 开始触摸按钮时触发 | *event: TouchEvent* |
|
||||
|
||||
@ -31,6 +31,7 @@ export type ButtonProps = RouteProps & {
|
||||
hairline?: boolean;
|
||||
disabled?: boolean;
|
||||
nativeType?: string;
|
||||
iconPrefix?: string;
|
||||
loadingSize: string;
|
||||
loadingType?: LoadingType;
|
||||
loadingText?: string;
|
||||
@ -119,7 +120,9 @@ function Button(
|
||||
/>
|
||||
);
|
||||
} else if (icon) {
|
||||
content.push(<Icon name={icon} class={bem('icon')} />);
|
||||
content.push(
|
||||
<Icon name={icon} class={bem('icon')} classPrefix={props.iconPrefix} />
|
||||
);
|
||||
}
|
||||
|
||||
let text;
|
||||
|
||||
@ -249,8 +249,12 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| select | Triggered when select date | value: Date \| Date[] |
|
||||
| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | value: Date \| Date[] |
|
||||
| select | Triggered when select date | *value: Date \| Date[]* |
|
||||
| confirm | Triggered after date selection is complete，if `show-confirm` is` true`, it is triggered after clicking the confirm button | *value: Date \| Date[]* |
|
||||
| open `v2.5.2` | Triggered when open Popup | - |
|
||||
| close `v2.5.2` | Triggered when close Popup | - |
|
||||
| opened `v2.5.2` | Triggered when opened Popup | - |
|
||||
| closed `v2.5.2` | Triggered when closed Popup | - |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -227,7 +227,7 @@ export default {
|
||||
| show-confirm | 是否展示确认按钮 | *boolean* | `true` |
|
||||
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | *boolean* | `false` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否开启 [底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` |
|
||||
| confirm-text | 确认按钮的文字 | *string* | `确定` |
|
||||
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | *string* | `确定` |
|
||||
| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | *number \| string* | - |
|
||||
@ -251,8 +251,12 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| select | 点击任意日期时触发 | value: Date \| Date[] |
|
||||
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | value: Date \| Date[] |
|
||||
| select | 点击任意日期时触发 | *value: Date \| Date[]* |
|
||||
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | *value: Date \| Date[]* |
|
||||
| open `v2.5.2` | 打开弹出层时触发 | - |
|
||||
| close `v2.5.2` | 关闭弹出层时触发 | - |
|
||||
| opened `v2.5.2` | 打开弹出层且动画结束后触发 | - |
|
||||
| closed `v2.5.2` | 关闭弹出层且动画结束后触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
@ -263,7 +267,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
||||
@ -170,7 +170,7 @@ export default createComponent({
|
||||
genDays() {
|
||||
if (this.visible) {
|
||||
return (
|
||||
<div ref="days" class={bem('days')}>
|
||||
<div ref="days" role="grid" class={bem('days')}>
|
||||
{this.genMark()}
|
||||
{this.days.map(this.genDay)}
|
||||
</div>
|
||||
@ -183,9 +183,10 @@ export default createComponent({
|
||||
genDay(item, index) {
|
||||
const { type, topInfo, bottomInfo } = item;
|
||||
const style = this.getDayStyle(type, index);
|
||||
const disabled = type === 'disabled';
|
||||
|
||||
const onClick = () => {
|
||||
if (type !== 'disabled') {
|
||||
if (!disabled) {
|
||||
this.$emit('click', item);
|
||||
}
|
||||
};
|
||||
@ -198,7 +199,13 @@ export default createComponent({
|
||||
|
||||
if (type === 'selected') {
|
||||
return (
|
||||
<div style={style} class={bem('day')} onClick={onClick}>
|
||||
<div
|
||||
role="gridcell"
|
||||
style={style}
|
||||
class={[bem('day'), item.className]}
|
||||
tabindex={disabled ? null : -1}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div class={bem('selected-day')} style={{ background: this.color }}>
|
||||
{TopInfo}
|
||||
{item.text}
|
||||
@ -210,8 +217,10 @@ export default createComponent({
|
||||
|
||||
return (
|
||||
<div
|
||||
role="gridcell"
|
||||
style={style}
|
||||
class={[bem('day', [type]), item.className]}
|
||||
class={[bem('day', type), item.className]}
|
||||
tabindex={disabled ? null : -1}
|
||||
onClick={onClick}
|
||||
>
|
||||
{TopInfo}
|
||||
|
||||
@ -133,6 +133,7 @@ export default createComponent({
|
||||
|
||||
defaultDate(val) {
|
||||
this.currentDate = val;
|
||||
this.scrollIntoView();
|
||||
},
|
||||
},
|
||||
|
||||
@ -146,11 +147,16 @@ export default createComponent({
|
||||
// @exposed-api
|
||||
reset() {
|
||||
this.currentDate = this.getInitialDate();
|
||||
this.scrollIntoView();
|
||||
},
|
||||
|
||||
initRect() {
|
||||
this.$nextTick(() => {
|
||||
this.bodyHeight = this.$refs.body.getBoundingClientRect().height;
|
||||
// add Math.floor to avoid decimal height issues
|
||||
// https://github.com/youzan/vant/issues/5640
|
||||
this.bodyHeight = Math.floor(
|
||||
this.$refs.body.getBoundingClientRect().height
|
||||
);
|
||||
this.onScroll();
|
||||
});
|
||||
},
|
||||
@ -160,9 +166,10 @@ export default createComponent({
|
||||
this.$nextTick(() => {
|
||||
const { currentDate } = this;
|
||||
const targetDate = this.range ? currentDate[0] : currentDate;
|
||||
const displayed = this.value || !this.poppable;
|
||||
|
||||
/* istanbul ignore if */
|
||||
if (!targetDate) {
|
||||
if (!targetDate || !displayed) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -204,13 +211,13 @@ export default createComponent({
|
||||
}
|
||||
|
||||
let height = 0;
|
||||
let firstMonth;
|
||||
let currentMonth;
|
||||
|
||||
for (let i = 0; i < months.length; i++) {
|
||||
const visible = height <= bottom && height + heights[i] >= top;
|
||||
|
||||
if (visible && !firstMonth) {
|
||||
firstMonth = months[i];
|
||||
if (visible && !currentMonth) {
|
||||
currentMonth = months[i];
|
||||
}
|
||||
|
||||
months[i].visible = visible;
|
||||
@ -218,8 +225,8 @@ export default createComponent({
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (firstMonth) {
|
||||
this.monthTitle = firstMonth.title;
|
||||
if (currentMonth) {
|
||||
this.monthTitle = currentMonth.title;
|
||||
}
|
||||
},
|
||||
|
||||
@ -278,9 +285,11 @@ export default createComponent({
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
if (this.checkRange()) {
|
||||
this.$emit('confirm', this.currentDate);
|
||||
if (this.range && !this.checkRange()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('confirm', this.currentDate);
|
||||
},
|
||||
|
||||
genMonth(date, index) {
|
||||
@ -323,6 +332,7 @@ export default createComponent({
|
||||
color={this.color}
|
||||
class={bem('confirm')}
|
||||
disabled={this.buttonDisabled}
|
||||
nativeType="text"
|
||||
onClick={this.onConfirm}
|
||||
>
|
||||
{text || t('confirm')}
|
||||
@ -364,6 +374,8 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
if (this.poppable) {
|
||||
const createListener = name => () => this.$emit(name);
|
||||
|
||||
return (
|
||||
<Popup
|
||||
round
|
||||
@ -376,6 +388,10 @@ export default createComponent({
|
||||
closeOnPopstate={this.closeOnPopstate}
|
||||
closeOnClickOverlay={this.closeOnClickOverlay}
|
||||
onInput={this.togglePopup}
|
||||
onOpen={createListener('open')}
|
||||
onOpened={createListener('opened')}
|
||||
onClose={createListener('close')}
|
||||
onClosed={createListener('closed')}
|
||||
>
|
||||
{this.genCalendar()}
|
||||
</Popup>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
.van-popup__close-icon {
|
||||
top: 13px;
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -57,113 +57,113 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 0%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day">21</div>
|
||||
<div class="van-calendar__day van-calendar__day">22</div>
|
||||
<div class="van-calendar__day van-calendar__day">23</div>
|
||||
<div class="van-calendar__day van-calendar__day">24</div>
|
||||
<div class="van-calendar__day van-calendar__day">25</div>
|
||||
<div class="van-calendar__day van-calendar__day">26</div>
|
||||
<div class="van-calendar__day van-calendar__day">27</div>
|
||||
<div class="van-calendar__day van-calendar__day">28</div>
|
||||
<div class="van-calendar__day van-calendar__day">29</div>
|
||||
<div class="van-calendar__day van-calendar__day">30</div>
|
||||
<div class="van-calendar__day van-calendar__day">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">21</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">22</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">23</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">24</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">25</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">26</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">27</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">28</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">30</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">31</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__month-title">2012年2月</div>
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">2</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day">2</div>
|
||||
<div class="van-calendar__day van-calendar__day">3</div>
|
||||
<div class="van-calendar__day van-calendar__day">4</div>
|
||||
<div class="van-calendar__day van-calendar__day">5</div>
|
||||
<div class="van-calendar__day van-calendar__day">6</div>
|
||||
<div class="van-calendar__day van-calendar__day">7</div>
|
||||
<div class="van-calendar__day van-calendar__day">8</div>
|
||||
<div class="van-calendar__day van-calendar__day">9</div>
|
||||
<div class="van-calendar__day van-calendar__day">10</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day">21</div>
|
||||
<div class="van-calendar__day van-calendar__day">22</div>
|
||||
<div class="van-calendar__day van-calendar__day">23</div>
|
||||
<div class="van-calendar__day van-calendar__day">24</div>
|
||||
<div class="van-calendar__day van-calendar__day">25</div>
|
||||
<div class="van-calendar__day van-calendar__day">26</div>
|
||||
<div class="van-calendar__day van-calendar__day">27</div>
|
||||
<div class="van-calendar__day van-calendar__day">28</div>
|
||||
<div class="van-calendar__day van-calendar__day">29</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 42.857142857142854%;">1</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">21</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">22</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">23</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">24</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">25</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">26</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">27</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">28</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">29</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__month" style="padding-bottom: 320px;">
|
||||
<div class="van-calendar__month-title">2012年3月</div>
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">3</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day">2</div>
|
||||
<div class="van-calendar__day van-calendar__day">3</div>
|
||||
<div class="van-calendar__day van-calendar__day">4</div>
|
||||
<div class="van-calendar__day van-calendar__day">5</div>
|
||||
<div class="van-calendar__day van-calendar__day">6</div>
|
||||
<div class="van-calendar__day van-calendar__day">7</div>
|
||||
<div class="van-calendar__day van-calendar__day">8</div>
|
||||
<div class="van-calendar__day van-calendar__day">9</div>
|
||||
<div class="van-calendar__day van-calendar__day">10</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,45 +9,45 @@ exports[`color prop when type is range 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--start" style="background: blue;">10<div class="van-calendar__bottom-info">开始</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">11</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">12</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">13</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">14</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">15</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">16</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">17</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">18</div>
|
||||
<div class="van-calendar__day van-calendar__day--middle" style="color: blue;">19</div>
|
||||
<div class="van-calendar__day van-calendar__day--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--middle" style="color: blue;">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day van-calendar__day--end" style="background: blue;">20<div class="van-calendar__bottom-info">结束</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -60,45 +60,45 @@ exports[`color prop when type is single 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day" style="background: blue;">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -111,48 +111,48 @@ exports[`formatter prop 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__top-info">Top Info</div>11
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">12<div class="van-calendar__bottom-info">Bottom Info</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12<div class="van-calendar__bottom-info">Bottom Info</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">Text</div>
|
||||
<div class="van-calendar__day van-calendar__day test">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">Text</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day test">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -168,45 +168,45 @@ exports[`popup wrapper 2`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
|
||||
<!----></i>
|
||||
</div>
|
||||
@ -221,45 +221,45 @@ exports[`row-height prop 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 300px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%; height: 50px;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
|
||||
<div class="van-calendar__day" style="height: 50px;">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%; height: 50px;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">11</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">12</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">13</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">14</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">15</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">16</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">17</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">18</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">19</div>
|
||||
<div class="van-calendar__day van-calendar__day" style="height: 50px;">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day" style="height: 50px;">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="height: 50px;">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="text" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -272,41 +272,41 @@ exports[`title & footer slot 1`] = `
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month" style="padding-bottom: 384px;">
|
||||
<div class="van-calendar__days">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div class="van-calendar__day">
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">10</div>
|
||||
</div>
|
||||
<div class="van-calendar__day van-calendar__day">11</div>
|
||||
<div class="van-calendar__day van-calendar__day">12</div>
|
||||
<div class="van-calendar__day van-calendar__day">13</div>
|
||||
<div class="van-calendar__day van-calendar__day">14</div>
|
||||
<div class="van-calendar__day van-calendar__day">15</div>
|
||||
<div class="van-calendar__day van-calendar__day">16</div>
|
||||
<div class="van-calendar__day van-calendar__day">17</div>
|
||||
<div class="van-calendar__day van-calendar__day">18</div>
|
||||
<div class="van-calendar__day van-calendar__day">19</div>
|
||||
<div class="van-calendar__day van-calendar__day">20</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -450,3 +450,14 @@ test('max-range prop', async () => {
|
||||
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('close event', () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.setProps({ value: false });
|
||||
expect(wrapper.emitted('close')).toBeTruthy();
|
||||
});
|
||||
|
||||
@ -82,8 +82,8 @@ Use slot to custom content.
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when clicked | event: Event |
|
||||
| click-thumb | Triggered when thumb clicked | event: Event |
|
||||
| click | Triggered when clicked | *event: Event* |
|
||||
| click-thumb | Triggered when thumb clicked | *event: Event* |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -84,8 +84,8 @@ Vue.use(Card);
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click-thumb | 点击自定义图片时触发 | event: Event |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
| click-thumb | 点击自定义图片时触发 | *event: Event* |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -114,11 +114,12 @@ Vue.use(CellGroup);
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| icon | Left Icon | *string* | - |
|
||||
| title | Title | *number \| string* | - |
|
||||
| value | Right text | *number \| string* | - |
|
||||
| label | Description below the title | *string* | - |
|
||||
| size | Size，can be set to `large` | *string* | - |
|
||||
| icon | Left Icon | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| border | Whether to show inner border | *boolean* | `true` |
|
||||
| center | Whether to center content vertically | *boolean* | `true` |
|
||||
| url | Link URL | *string* | - |
|
||||
@ -137,7 +138,7 @@ Vue.use(CellGroup);
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click cell | event: Event |
|
||||
| click | Triggered when click cell | *event: Event* |
|
||||
|
||||
### CellGroup Slots
|
||||
|
||||
|
||||
@ -125,11 +125,12 @@ Vue.use(CellGroup);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| icon | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| title | 左侧标题 | *number \| string* | - |
|
||||
| value | 右侧内容 | *number \| string* | - |
|
||||
| label | 标题下方的描述信息 | *string* | - |
|
||||
| size | 单元格大小，可选值为 `large` | *string* | - |
|
||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| url | 点击后跳转的链接地址 | *string* | - |
|
||||
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
|
||||
| border | 是否显示内边框 | *boolean* | `true` |
|
||||
@ -148,7 +149,7 @@ Vue.use(CellGroup);
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击单元格时触发 | event: Event |
|
||||
| click | 点击单元格时触发 | *event: Event* |
|
||||
|
||||
### CellGroup Slots
|
||||
|
||||
|
||||
@ -78,7 +78,13 @@ function Cell(
|
||||
}
|
||||
|
||||
if (icon) {
|
||||
return <Icon class={bem('left-icon')} name={icon} />;
|
||||
return (
|
||||
<Icon
|
||||
class={bem('left-icon')}
|
||||
name={icon}
|
||||
classPrefix={props.iconPrefix}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ export type SharedCellProps = {
|
||||
isLink?: boolean;
|
||||
required?: boolean;
|
||||
clickable?: boolean;
|
||||
iconPrefix?: string;
|
||||
titleStyle?: any;
|
||||
titleClass?: any;
|
||||
valueClass?: any;
|
||||
@ -23,6 +24,7 @@ export const cellProps = {
|
||||
isLink: Boolean,
|
||||
required: Boolean,
|
||||
clickable: Boolean,
|
||||
iconPrefix: String,
|
||||
titleStyle: null as any,
|
||||
titleClass: null as any,
|
||||
valueClass: null as any,
|
||||
|
||||
@ -12,6 +12,11 @@ exports[`arrow direction 1`] = `
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
exports[`icon-prefix prop 1`] = `
|
||||
<div class="van-cell"><i class="my-icon my-icon-success van-cell__left-icon">
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
exports[`render slot 1`] = `
|
||||
<div class="van-cell">Custom Icon<div class="van-cell__title">Custom Title<div class="van-cell__label">Custom Label</div>
|
||||
</div>Custom Extra</div>
|
||||
|
||||
@ -67,3 +67,14 @@ test('CellGroup title slot', () => {
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('icon-prefix prop', () => {
|
||||
const wrapper = mount(Cell, {
|
||||
propsData: {
|
||||
iconPrefix: 'my-icon',
|
||||
icon: 'success',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { FieldMixin } from '../mixins/field';
|
||||
import { ParentMixin } from '../mixins/relation';
|
||||
|
||||
const [createComponent, bem] = createNamespace('checkbox-group');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [ParentMixin('vanCheckbox')],
|
||||
mixins: [ParentMixin('vanCheckbox'), FieldMixin],
|
||||
|
||||
props: {
|
||||
max: [Number, String],
|
||||
disabled: Boolean,
|
||||
direction: String,
|
||||
iconSize: [Number, String],
|
||||
checkedColor: String,
|
||||
value: {
|
||||
@ -42,6 +44,6 @@ export default createComponent({
|
||||
},
|
||||
|
||||
render() {
|
||||
return <div class={bem()}>{this.slots()}</div>;
|
||||
return <div class={bem([this.direction])}>{this.slots()}</div>;
|
||||
},
|
||||
});
|
||||
|
||||
8
src/checkbox-group/index.less
Normal file
8
src/checkbox-group/index.less
Normal file
@ -0,0 +1,8 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-checkbox-group {
|
||||
&--horizontal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
@ -34,12 +34,6 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Disabled Label Click
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Custom Shape
|
||||
|
||||
```html
|
||||
@ -85,6 +79,12 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Disable Label Click
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
|
||||
```
|
||||
|
||||
### Checkbox Group
|
||||
|
||||
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
|
||||
@ -137,7 +137,6 @@ export default {
|
||||
result: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkAll() {
|
||||
this.$refs.checkboxGroup.toggleAll(true);
|
||||
@ -161,11 +160,7 @@ export default {
|
||||
:title="`Checkbox ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
ref="checkboxes"
|
||||
slot="right-icon"
|
||||
/>
|
||||
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@ -173,6 +168,12 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b']
|
||||
result: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
@ -187,9 +188,9 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model (value) | Check status | *boolean* | `false` |
|
||||
| name | Checkbox name | *any* | - |
|
||||
| shape | Can be set to `square` | *string* | `round` |
|
||||
| v-model | Check status | *boolean* | `false` |
|
||||
| disabled | Disable checkbox | *boolean* | `false` |
|
||||
| label-disabled | Whether to disable label click | *boolean* | `false` |
|
||||
| label-position | Can be set to `left` | *string* | `right` |
|
||||
@ -201,9 +202,10 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | Names of all checked checkboxes | *any[]* | - |
|
||||
| v-model (value) | Names of all checked checkboxes | *any[]* | - |
|
||||
| disabled | Whether to disable all checkboxes | *boolean* | `false` |
|
||||
| max | Maximum amount of checked options | *number \| string* | `0`(Unlimited) |
|
||||
| disabled | Disable all checkboxes | *boolean* | `false` |
|
||||
| direction `v2.5.0` | Direction, can be set to `horizontal` | *string* | `vertical` |
|
||||
| icon-size `v2.2.3` | Icon size of all checkboxes | *number \| string* | `20px` |
|
||||
| checked-color `v2.2.3` | Checked color of all checkboxes | *string* | `#1989fa` | - |
|
||||
|
||||
@ -211,21 +213,21 @@ export default {
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| change | Triggered when value changed | current value |
|
||||
| click | Triggered when click checkbox | event: Event |
|
||||
| change | Triggered when value changed | *checked: boolean* |
|
||||
| click | Triggered when click checkbox | *event: Event* |
|
||||
|
||||
### CheckboxGroup Events
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| change | Triggered when value changed | current value |
|
||||
| change | Triggered when value changed | *names: any[]* |
|
||||
|
||||
### Checkbox Slots
|
||||
|
||||
| Name | Description | SlotProps |
|
||||
|------|------|------|
|
||||
| default | Custom label | - |
|
||||
| icon | Custom icon | checked: whether to be checked |
|
||||
| icon | Custom icon | *checked: boolean* |
|
||||
|
||||
### CheckboxGroup Methods
|
||||
|
||||
@ -233,7 +235,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| toggleAll | Toggle check status of all checkboxes | checked?: boolean | - |
|
||||
| toggleAll | Toggle check status of all checkboxes | *checked?: boolean* | - |
|
||||
|
||||
### Checkbox Methods
|
||||
|
||||
@ -241,4 +243,4 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call insta
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| toggle | Toggle check status | checked?: boolean | - |
|
||||
| toggle | Toggle check status | *checked?: boolean* | - |
|
||||
|
||||
@ -38,14 +38,6 @@ export default {
|
||||
<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
设置`label-disabled`属性后，点击复选框图标以外的内容不会触发切换
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" icon-disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 自定义形状
|
||||
|
||||
将`shape`属性设置为`square`，复选框的形状会变成方形
|
||||
@ -95,9 +87,17 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
### 禁用文本点击
|
||||
|
||||
设置`label-disabled`属性后，点击图标以外的内容不会触发复选框切换
|
||||
|
||||
```html
|
||||
<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
|
||||
```
|
||||
|
||||
### 复选框组
|
||||
|
||||
复选框可以与复选框组一起使用，选中值是一个数组，通过`v-model`绑定在`CheckboxGroup`上，数组中的值为选中的复选框的`name`
|
||||
复选框可以与复选框组一起使用，复选框组通过`v-model`数组绑定复选框的勾选状态
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
@ -117,9 +117,9 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 设置最大可选数
|
||||
### 限制最大可选数
|
||||
|
||||
通过`max`属性可以限制最大可选数
|
||||
通过`max`属性可以限制复选框组的最大可选数
|
||||
|
||||
```html
|
||||
<van-checkbox-group v-model="result" :max="2">
|
||||
@ -151,7 +151,6 @@ export default {
|
||||
result: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
checkAll() {
|
||||
this.$refs.checkboxGroup.toggleAll(true);
|
||||
@ -177,11 +176,7 @@ export default {
|
||||
:title="`复选框 ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<van-checkbox
|
||||
:name="item"
|
||||
ref="checkboxes"
|
||||
slot="right-icon"
|
||||
/>
|
||||
<van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
@ -189,6 +184,12 @@ export default {
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b']
|
||||
result: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggle(index) {
|
||||
this.$refs.checkboxes[index].toggle();
|
||||
@ -203,9 +204,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| v-model (value) | 是否为选中状态 | *boolean* | `false` |
|
||||
| name | 标识符 | *any* | - |
|
||||
| shape | 形状，可选值为 `square` | *string* | `round` |
|
||||
| v-model | 是否为选中状态 | *boolean* | `false` |
|
||||
| disabled | 是否禁用复选框 | *boolean* | `false` |
|
||||
| label-disabled | 是否禁用复选框文本点击 | *boolean* | `false` |
|
||||
| label-position | 文本位置，可选值为 `left` | *string* | `right` |
|
||||
@ -217,9 +218,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| v-model | 所有选中项的标识符 | *any[]* | - |
|
||||
| v-model (value) | 所有选中项的标识符 | *any[]* | - |
|
||||
| disabled | 是否禁用所有复选框 | *boolean* | `false` |
|
||||
| max | 最大可选数，0 为无限制 | *number \| string* | `0` |
|
||||
| max | 最大可选数，`0`为无限制 | *number \| string* | `0` |
|
||||
| direction `v2.5.0` | 排列方向，可选值为`horizontal` | *string* | `vertical` |
|
||||
| icon-size `v2.2.3` | 所有复选框的图标大小，默认单位为`px` | *number \| string* | `20px` |
|
||||
| checked-color `v2.2.3` | 所有复选框的选中状态颜色 | *string* | `#1989fa` |
|
||||
|
||||
@ -227,34 +229,34 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
| click | 点击复选框时触发 | event: Event |
|
||||
| change | 当绑定值变化时触发的事件 | *checked: boolean* |
|
||||
| click | 点击复选框时触发 | *event: Event* |
|
||||
|
||||
### CheckboxGroup Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| change | 当绑定值变化时触发的事件 | 当前组件的值 |
|
||||
| change | 当绑定值变化时触发的事件 | *names: any[]* |
|
||||
|
||||
### Checkbox Slots
|
||||
|
||||
| 名称 | 说明 | SlotProps |
|
||||
|------|------|------|
|
||||
| default | 自定义文本 | - |
|
||||
| icon | 自定义图标 | checked: 是否为选中状态 |
|
||||
| icon | 自定义图标 | *checked: boolean* |
|
||||
|
||||
### CheckboxGroup 方法
|
||||
|
||||
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | checked?: boolean | - |
|
||||
| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | *checked?: boolean* | - |
|
||||
|
||||
### Checkbox 方法
|
||||
|
||||
通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | checked?: boolean | - |
|
||||
| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | *checked?: boolean* | - |
|
||||
|
||||
@ -13,12 +13,6 @@
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabledLabelClick')">
|
||||
<van-checkbox v-model="checkboxLabel" label-disabled>
|
||||
{{ $t('checkbox') }}
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customShape')">
|
||||
<van-checkbox v-model="checkboxShape" shape="square">
|
||||
{{ $t('customColor') }}
|
||||
@ -46,11 +40,23 @@
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disableLabel')">
|
||||
<van-checkbox v-model="checkboxLabel" label-disabled>
|
||||
{{ $t('checkbox') }}
|
||||
</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
|
||||
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
|
||||
<van-checkbox name="c">{{ $t('checkbox') }} c</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('horizontal')">
|
||||
<van-checkbox-group v-model="horizontalResult" direction="horizontal">
|
||||
<van-checkbox name="a">{{ $t('checkbox') }} a</van-checkbox>
|
||||
<van-checkbox name="b">{{ $t('checkbox') }} b</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
@ -86,7 +92,7 @@
|
||||
v-for="(item, index) in list"
|
||||
clickable
|
||||
:key="index"
|
||||
:title="$t('checkbox') + item"
|
||||
:title="`${$t('checkbox')} ${item}`"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
<template #right-icon>
|
||||
@ -109,12 +115,13 @@ export default {
|
||||
customColor: '自定义颜色',
|
||||
customShape: '自定义形状',
|
||||
title3: '复选框组',
|
||||
title4: '设置最大可选数',
|
||||
title4: '限制最大可选数',
|
||||
title5: '搭配单元格组件使用',
|
||||
toggleAll: '全选与反选',
|
||||
checkAll: '全选',
|
||||
inverse: '反选',
|
||||
disabledLabelClick: '禁用文本点击',
|
||||
horizontal: '水平排列',
|
||||
disableLabel: '禁用文本点击',
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
@ -128,7 +135,8 @@ export default {
|
||||
toggleAll: 'Toggle All',
|
||||
checkAll: 'Check All',
|
||||
inverse: 'Inverse',
|
||||
disabledLabelClick: 'Disable the click event of label',
|
||||
horizontal: 'Horizontal',
|
||||
disableLabel: 'Disable label click',
|
||||
},
|
||||
},
|
||||
|
||||
@ -140,11 +148,12 @@ export default {
|
||||
checkboxShape: true,
|
||||
checkboxLabel: true,
|
||||
checboxIcon: true,
|
||||
list: ['a', 'b', 'c'],
|
||||
list: ['a', 'b'],
|
||||
result: ['a', 'b'],
|
||||
result2: [],
|
||||
result3: [],
|
||||
checkAllResult: [],
|
||||
horizontalResult: [],
|
||||
activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
|
||||
inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
|
||||
};
|
||||
@ -173,7 +182,7 @@ export default {
|
||||
background: @white;
|
||||
|
||||
.van-checkbox {
|
||||
margin: 10px 0 0 20px;
|
||||
margin: 0 0 8px 20px;
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
@ -193,5 +202,9 @@ export default {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,6 +15,10 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
margin-right: @padding-sm;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: none;
|
||||
height: 1em;
|
||||
|
||||
@ -22,14 +22,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
@ -61,6 +53,14 @@ exports[`renders demo correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-checkbox--label-disabled">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox-group">
|
||||
<div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
|
||||
@ -71,9 +71,17 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
|
||||
</div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox-group van-checkbox-group--horizontal">
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 a</span>
|
||||
</div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 b</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,21 +126,14 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-checkbox-group">
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>复选框a</span></div>
|
||||
<div class="van-cell__title"><span>复选框 a</span></div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>复选框b</span></div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>复选框c</span></div>
|
||||
<div class="van-cell__title"><span>复选框 b</span></div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
|
||||
@ -112,10 +112,10 @@ Setting `type` to `flex` to enable flex layout
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click row | event: Event |
|
||||
| click | Triggered when click row | *event: Event* |
|
||||
|
||||
### Col Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click col | event: Event |
|
||||
| click | Triggered when click col | *event: Event* |
|
||||
|
||||
@ -115,10 +115,10 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
|
||||
### Col Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
|
||||
@ -101,7 +101,7 @@ export default {
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| name | 唯一标识符，默认为索引值 | *number \| string* | `index` |
|
||||
| icon | 标题栏左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| icon | 标题栏左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| size | 标题栏大小，可选值为 `large` | *string* | - |
|
||||
| title | 标题栏左侧内容 | *number \| string* | - |
|
||||
| value | 标题栏右侧内容 | *number \| string* | - |
|
||||
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when clicked | event: Event |
|
||||
| click | Triggered when clicked | *event: Event* |
|
||||
|
||||
### ContactList Props
|
||||
|
||||
|
||||
@ -149,7 +149,7 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
|
||||
### ContactList Props
|
||||
|
||||
|
||||
@ -28,13 +28,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-contact-edit__fields">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>张三</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请填写姓名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>电话</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -130,15 +130,15 @@ export default {
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| finish | Triggered when count down finished | - |
|
||||
| change `v2.4.4` | Triggered when count down changed | timeData |
|
||||
| change `v2.4.4` | Triggered when count down changed | *timeData: TimeData* |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description | SlotProps |
|
||||
|------|------|------|
|
||||
| default | Custom Content | timeData |
|
||||
| default | Custom Content | *timeData: TimeData* |
|
||||
|
||||
### timeData Structure
|
||||
### TimeData Structure
|
||||
|
||||
| Name | Description | Type |
|
||||
|------|------|------|
|
||||
|
||||
@ -140,15 +140,15 @@ export default {
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| finish | 倒计时结束时触发 | - |
|
||||
| change `v2.4.4` | 倒计时变化时触发 | timeData |
|
||||
| change `v2.4.4` | 倒计时变化时触发 | *timeData: TimeData* |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 | SlotProps |
|
||||
|------|------|------|
|
||||
| default | 自定义内容 | timeData |
|
||||
| default | 自定义内容 | *timeData: TimeData* |
|
||||
|
||||
### timeData 格式
|
||||
### TimeData 格式
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
|------|------|------|
|
||||
@ -160,7 +160,7 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 CountDown 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
|
||||
@ -4,7 +4,7 @@ exports[`empty-image prop 1`] = `
|
||||
<div class="van-coupon-list">
|
||||
<div class="van-coupon-list__exchange-bar">
|
||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
@ -54,7 +54,7 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-coupon-list">
|
||||
<div class="van-coupon-list__exchange-bar">
|
||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
@ -200,7 +200,7 @@ exports[`render empty coupon list 1`] = `
|
||||
<div class="van-coupon-list">
|
||||
<div class="van-coupon-list__exchange-bar">
|
||||
<div class="van-cell van-cell--borderless van-field van-coupon-list__field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
|
||||
@ -82,7 +82,6 @@ export default {
|
||||
currentDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
@ -134,7 +133,6 @@ export default {
|
||||
currentTime: '12:00'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
@ -199,4 +197,4 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| getPicker `v2.4.0` | get Picker instance | - | - |
|
||||
| getPicker `v2.5.3` | get Picker instance | - | - |
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
时间选择器，支持日期、年月、时分等维度，通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
时间选择器，支持日期、年月、时分等维度，通常与[弹出层](#/zh-CN/popup)组件配合使用
|
||||
|
||||
### 引入
|
||||
|
||||
@ -84,7 +84,6 @@ export default {
|
||||
currentDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'year') {
|
||||
@ -138,7 +137,6 @@ export default {
|
||||
currentTime: '12:00'
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
filter(type, options) {
|
||||
if (type === 'minute') {
|
||||
@ -199,11 +197,11 @@ export default {
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| getPicker `v2.4.0` | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - |
|
||||
| getPicker `v2.5.3` | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@ -10,11 +10,19 @@ export default createComponent({
|
||||
...DatePicker.props,
|
||||
},
|
||||
|
||||
methods: {
|
||||
// @exposed-api
|
||||
getPicker() {
|
||||
return this.$refs.root.getPicker();
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const Component = this.type === 'time' ? TimePicker : DatePicker;
|
||||
|
||||
return (
|
||||
<Component
|
||||
ref="root"
|
||||
class={bem()}
|
||||
{...{
|
||||
props: this.$props,
|
||||
|
||||
@ -30,3 +30,8 @@ test('time type', () => {
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('getPicker method', () => {
|
||||
const wrapper = mount(DatetimePicker);
|
||||
expect(wrapper.vm.getPicker()).toBeTruthy();
|
||||
});
|
||||
|
||||
@ -168,8 +168,8 @@ export default {
|
||||
| confirm | Triggered when click confirm button | - |
|
||||
| cancel | Triggered when click cancel button | - |
|
||||
| open | Triggered when open Dialog | - |
|
||||
| opened | Triggered when opened Dialog | - |
|
||||
| close | Triggered when close Dialog | - |
|
||||
| opened | Triggered when opened Dialog | - |
|
||||
| closed | Triggered when closed Dialog | - |
|
||||
|
||||
### Slots
|
||||
|
||||
@ -201,8 +201,8 @@ export default {
|
||||
| confirm | 点击确认按钮时触发 | - |
|
||||
| cancel | 点击取消按钮时触发 | - |
|
||||
| open | 打开弹窗时触发 | - |
|
||||
| opened | 打开弹窗且动画结束后触发 | - |
|
||||
| close | 关闭弹窗时触发 | - |
|
||||
| opened | 打开弹窗且动画结束后触发 | - |
|
||||
| closed | 关闭弹窗且动画结束后触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
@ -137,8 +137,8 @@ Use `active-color` prop to custom active color of the title and options
|
||||
|------|------|------|
|
||||
| change | Triggered select option and value changed | value |
|
||||
| open | Triggered when open menu | - |
|
||||
| opened | Triggered when menu opened | - |
|
||||
| close | Triggered when close menu | - |
|
||||
| opened | Triggered when menu opened | - |
|
||||
| closed | Triggered when menu closed | - |
|
||||
|
||||
### DropdownItem Slots
|
||||
|
||||
@ -141,9 +141,9 @@ export default {
|
||||
|------|------|------|
|
||||
| change | 点击选项导致 value 变化时触发 | value |
|
||||
| open | 打开菜单栏时触发 | - |
|
||||
| opened | 打开菜单栏且动画结束后触发 | - |
|
||||
| close | 关闭菜单栏时触发 | - |
|
||||
| opened | 关闭菜单栏且动画结束后触发 | - |
|
||||
| opened | 打开菜单栏且动画结束后触发 | - |
|
||||
| closed | 关闭菜单栏且动画结束后触发 | - |
|
||||
|
||||
### DropdownItem Slots
|
||||
|
||||
@ -154,7 +154,7 @@ export default {
|
||||
|
||||
### DropdownItem 方法
|
||||
|
||||
通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
@ -166,4 +166,4 @@ export default {
|
||||
|------|------|------|
|
||||
| text | 文字 | *string* |
|
||||
| value | 标识符 | *number \| string* |
|
||||
| icon | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* |
|
||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* |
|
||||
|
||||
@ -214,8 +214,9 @@ Use `input-align` prop to align the input value
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| value | Field value | *number \| string* | - |
|
||||
| v-model (value) | Field value | *number \| string* | - |
|
||||
| label | Field label | *string* | - |
|
||||
| name `v2.5.0` | Name | *string* | - |
|
||||
| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | *string* | `text` |
|
||||
| size | Size，can be set to `large` | *string* | - |
|
||||
| maxlength | Max length of value | *number \| string* | - |
|
||||
@ -230,17 +231,19 @@ Use `input-align` prop to align the input value
|
||||
| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` |
|
||||
| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` |
|
||||
| error | Whether to show error info | *boolean* | `false` |
|
||||
| error-message | Error message | *string* | - |
|
||||
| formatter `v2.4.2` | Input value formatter | *Function* | - |
|
||||
| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | *string* | `right` |
|
||||
| error-message | Error message | *string* | `''` |
|
||||
| label-class | Label className | *any* | - |
|
||||
| label-width | Label width | *number \| string* | `90px` |
|
||||
| label-align | Label text align, can be set to `center` `right` | *string* | `left` |
|
||||
| input-align | Input text align, can be set to `center` `right` | *string* | `left` |
|
||||
| error-message-align | Error message text align, can be set to `center` `right` | *string* | `left` |
|
||||
| label-align | Label align, can be set to `center` `right` | *string* | `left` |
|
||||
| input-align | Input align, can be set to `center` `right` | *string* | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
|
||||
| autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | *boolean \| object* | `false` |
|
||||
| left-icon | Left side icon name | *string* | - |
|
||||
| right-icon | Right side icon name | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| rules `v2.5.0` | Form validation rules | *Rule[]* | - |
|
||||
|
||||
### Events
|
||||
|
||||
@ -248,13 +251,13 @@ Field support all native events of input tag
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| input | Triggered when input value changed | value: current value |
|
||||
| focus | Triggered when input gets focus | event: Event |
|
||||
| blur | Triggered when input loses focus | event: Event |
|
||||
| clear | Triggered when click clear icon | event: Event |
|
||||
| click | Triggered when click Field | event: Event |
|
||||
| click-left-icon | Triggered when click the left icon of Field | event: Event |
|
||||
| click-right-icon | Triggered when click the right icon of Field | event: Event |
|
||||
| input | Triggered when input value changed | *value: string* |
|
||||
| focus | Triggered when input gets focus | *event: Event* |
|
||||
| blur | Triggered when input loses focus | *event: Event* |
|
||||
| clear | Triggered when click clear icon | *event: Event* |
|
||||
| click | Triggered when click Field | *event: Event* |
|
||||
| click-left-icon | Triggered when click the left icon of Field | *event: Event* |
|
||||
| click-right-icon | Triggered when click the right icon of Field | *event: Event* |
|
||||
|
||||
### Methods
|
||||
|
||||
|
||||
@ -233,8 +233,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| v-model (value) | 当前输入的值 | *number \| string* | - |
|
||||
| label | 输入框左侧文本 | *string* | - |
|
||||
| value | 当前输入的值 | *number \| string* | - |
|
||||
| name `v2.5.0` | 名称，提交表单的标识符 | *string* | - |
|
||||
| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | *string* | `text` |
|
||||
| size | 大小，可选值为 `large` | *string* | - |
|
||||
| maxlength | 输入的最大字符数 | *number \| string* | - |
|
||||
@ -249,17 +250,19 @@ export default {
|
||||
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` |
|
||||
| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` |
|
||||
| error | 是否将输入内容标红 | *boolean* | `false` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | *string* | - |
|
||||
| formatter `v2.4.2` | 输入内容格式化函数 | *Function* | - |
|
||||
| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | *string* | `''` |
|
||||
| label-class | 左侧文本额外类名 | *any* | - |
|
||||
| label-width | 左侧文本宽度，默认单位为`px` | *number \| string* | `90px` |
|
||||
| label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | *boolean \| object* | `false` |
|
||||
| left-icon | 左侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| right-icon | 右侧 [图标名称](#/zh-CN/icon) 或图片链接 | *string* | - |
|
||||
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | *Rule[]* | - |
|
||||
|
||||
### Events
|
||||
|
||||
@ -267,17 +270,17 @@ export default {
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| input | 输入框内容变化时触发 | value: 输入框当前值 |
|
||||
| focus | 输入框获得焦点时触发 | event: Event |
|
||||
| blur | 输入框失去焦点时触发 | event: Event |
|
||||
| clear | 点击清除按钮时触发 | event: Event |
|
||||
| click | 点击时触发 | event: Event |
|
||||
| click-left-icon | 点击左侧图标时触发 | event: Event |
|
||||
| click-right-icon | 点击右侧图标时触发 | event: Event |
|
||||
| input | 输入框内容变化时触发 | *value: string (当前输入的值)* |
|
||||
| focus | 输入框获得焦点时触发 | *event: Event* |
|
||||
| blur | 输入框失去焦点时触发 | *event: Event* |
|
||||
| clear | 点击清除按钮时触发 | *event: Event* |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
| click-left-icon | 点击左侧图标时触发 | *event: Event* |
|
||||
| click-right-icon | 点击右侧图标时触发 | *event: Event* |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Field 实例并调用实例方法，详见 [组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
@ -293,3 +296,9 @@ export default {
|
||||
| left-icon | 自定义输入框头部图标 |
|
||||
| right-icon | 自定义输入框尾部图标 |
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端点击清除按钮无效？
|
||||
|
||||
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
error
|
||||
required
|
||||
:label="$t('username')"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
error
|
||||
/>
|
||||
<van-field
|
||||
v-model="phone"
|
||||
|
||||
@ -3,7 +3,14 @@ import { formatNumber } from './utils';
|
||||
import { isIOS } from '../utils/validate/system';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { resetScroll } from '../utils/dom/reset-scroll';
|
||||
import { createNamespace, isObject, isDef, addUnit } from '../utils';
|
||||
import {
|
||||
createNamespace,
|
||||
isObject,
|
||||
isDef,
|
||||
addUnit,
|
||||
isPromise,
|
||||
isFunction,
|
||||
} from '../utils';
|
||||
|
||||
// Components
|
||||
import Icon from '../icon';
|
||||
@ -15,8 +22,22 @@ const [createComponent, bem] = createNamespace('field');
|
||||
export default createComponent({
|
||||
inheritAttrs: false,
|
||||
|
||||
provide() {
|
||||
return {
|
||||
vanField: this,
|
||||
};
|
||||
},
|
||||
|
||||
inject: {
|
||||
vanForm: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
...cellProps,
|
||||
name: String,
|
||||
rules: Array,
|
||||
error: Boolean,
|
||||
disabled: Boolean,
|
||||
readonly: Boolean,
|
||||
@ -43,11 +64,14 @@ export default createComponent({
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
validateMessage: '',
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.resetValidation();
|
||||
this.validateWithTrigger('onChange');
|
||||
this.$nextTick(this.adjustSize);
|
||||
},
|
||||
},
|
||||
@ -55,6 +79,16 @@ export default createComponent({
|
||||
mounted() {
|
||||
this.format();
|
||||
this.$nextTick(this.adjustSize);
|
||||
|
||||
if (this.vanForm) {
|
||||
this.vanForm.fields.push(this);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
if (this.vanForm) {
|
||||
this.vanForm.fields = this.vanForm.fields.filter(item => item !== this);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -83,11 +117,16 @@ export default createComponent({
|
||||
},
|
||||
|
||||
labelStyle() {
|
||||
const { labelWidth } = this;
|
||||
const labelWidth = this.getProp('labelWidth');
|
||||
|
||||
if (labelWidth) {
|
||||
return { width: addUnit(labelWidth) };
|
||||
}
|
||||
},
|
||||
|
||||
formValue() {
|
||||
return this.children ? this.children.value : this.value;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -105,6 +144,117 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
runValidator(value, rule) {
|
||||
return new Promise(resolve => {
|
||||
const returnVal = rule.validator(value, rule);
|
||||
|
||||
if (isPromise(returnVal)) {
|
||||
return returnVal.then(resolve);
|
||||
}
|
||||
|
||||
resolve(returnVal);
|
||||
});
|
||||
},
|
||||
|
||||
isEmptyValue(value) {
|
||||
if (Array.isArray(value)) {
|
||||
return !value.length;
|
||||
}
|
||||
|
||||
return !value;
|
||||
},
|
||||
|
||||
runSyncRule(value, rule) {
|
||||
if (rule.required && this.isEmptyValue(value)) {
|
||||
return false;
|
||||
}
|
||||
if (rule.pattern && !rule.pattern.test(value)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
getRuleMessage(value, rule) {
|
||||
const { message } = rule;
|
||||
|
||||
if (isFunction(message)) {
|
||||
return message(value, rule);
|
||||
}
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
runRules(rules) {
|
||||
return rules.reduce(
|
||||
(promise, rule) =>
|
||||
promise.then(() => {
|
||||
if (this.validateMessage) {
|
||||
return;
|
||||
}
|
||||
|
||||
let value = this.formValue;
|
||||
|
||||
if (rule.formatter) {
|
||||
value = rule.formatter(value, rule);
|
||||
}
|
||||
|
||||
if (!this.runSyncRule(value, rule)) {
|
||||
this.validateMessage = this.getRuleMessage(value, rule);
|
||||
return;
|
||||
}
|
||||
|
||||
if (rule.validator) {
|
||||
return this.runValidator(value, rule).then(result => {
|
||||
if (result === false) {
|
||||
this.validateMessage = this.getRuleMessage(value, rule);
|
||||
}
|
||||
});
|
||||
}
|
||||
}),
|
||||
Promise.resolve()
|
||||
);
|
||||
},
|
||||
|
||||
validate(rules = this.rules) {
|
||||
return new Promise(resolve => {
|
||||
if (!rules) {
|
||||
resolve();
|
||||
}
|
||||
|
||||
this.runRules(rules).then(() => {
|
||||
if (this.validateMessage) {
|
||||
resolve({
|
||||
name: this.name,
|
||||
message: this.validateMessage,
|
||||
});
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
validateWithTrigger(trigger) {
|
||||
if (this.vanForm && this.rules) {
|
||||
const defaultTrigger = this.vanForm.validateTrigger === trigger;
|
||||
const rules = this.rules.filter(rule => {
|
||||
if (rule.trigger) {
|
||||
return rule.trigger === trigger;
|
||||
}
|
||||
|
||||
return defaultTrigger;
|
||||
});
|
||||
|
||||
this.validate(rules);
|
||||
}
|
||||
},
|
||||
|
||||
resetValidation() {
|
||||
if (this.validateMessage) {
|
||||
this.validateMessage = '';
|
||||
}
|
||||
},
|
||||
|
||||
format(target = this.$refs.input) {
|
||||
if (!target) {
|
||||
return;
|
||||
@ -166,6 +316,7 @@ export default createComponent({
|
||||
onBlur(event) {
|
||||
this.focused = false;
|
||||
this.$emit('blur', event);
|
||||
this.validateWithTrigger('onBlur');
|
||||
resetScroll();
|
||||
},
|
||||
|
||||
@ -224,19 +375,23 @@ export default createComponent({
|
||||
genInput() {
|
||||
const { type } = this;
|
||||
const inputSlot = this.slots('input');
|
||||
const inputAlign = this.getProp('inputAlign');
|
||||
|
||||
if (inputSlot) {
|
||||
return <div class={bem('control', this.inputAlign)}>{inputSlot}</div>;
|
||||
return (
|
||||
<div class={bem('control', [inputAlign, 'custom'])}>{inputSlot}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const inputProps = {
|
||||
ref: 'input',
|
||||
class: bem('control', this.inputAlign),
|
||||
class: bem('control', inputAlign),
|
||||
domProps: {
|
||||
value: this.value,
|
||||
},
|
||||
attrs: {
|
||||
...this.$attrs,
|
||||
name: this.name,
|
||||
disabled: this.disabled,
|
||||
readonly: this.readonly,
|
||||
placeholder: this.placeholder,
|
||||
@ -282,7 +437,9 @@ export default createComponent({
|
||||
if (showLeftIcon) {
|
||||
return (
|
||||
<div class={bem('left-icon')} onClick={this.onClickLeftIcon}>
|
||||
{this.slots('left-icon') || <Icon name={this.leftIcon} />}
|
||||
{this.slots('left-icon') || (
|
||||
<Icon name={this.leftIcon} classPrefix={this.iconPrefix} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -295,7 +452,9 @@ export default createComponent({
|
||||
if (showRightIcon) {
|
||||
return (
|
||||
<div class={bem('right-icon')} onClick={this.onClickRightIcon}>
|
||||
{slots('right-icon') || <Icon name={this.rightIcon} />}
|
||||
{slots('right-icon') || (
|
||||
<Icon name={this.rightIcon} classPrefix={this.iconPrefix} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -314,38 +473,74 @@ export default createComponent({
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
genMessage() {
|
||||
const message = this.errorMessage || this.validateMessage;
|
||||
|
||||
if (message) {
|
||||
const errorMessageAlign = this.getProp('errorMessageAlign');
|
||||
|
||||
return (
|
||||
<div class={bem('error-message', errorMessageAlign)}>{message}</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
getProp(key) {
|
||||
if (isDef(this[key])) {
|
||||
return this[key];
|
||||
}
|
||||
|
||||
if (this.vanForm && isDef(this.vanForm[key])) {
|
||||
return this.vanForm[key];
|
||||
}
|
||||
},
|
||||
|
||||
genLabel() {
|
||||
const colon = this.getProp('colon') ? ':' : '';
|
||||
|
||||
if (this.slots('label')) {
|
||||
return [this.slots('label'), colon];
|
||||
}
|
||||
|
||||
if (this.label) {
|
||||
return <span>{this.label + colon}</span>;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { slots, labelAlign } = this;
|
||||
const { slots } = this;
|
||||
const labelAlign = this.getProp('labelAlign');
|
||||
|
||||
const scopedSlots = {
|
||||
icon: this.genLeftIcon,
|
||||
};
|
||||
|
||||
if (slots('label')) {
|
||||
scopedSlots.title = () => slots('label');
|
||||
const Label = this.genLabel();
|
||||
if (Label) {
|
||||
scopedSlots.title = () => Label;
|
||||
}
|
||||
|
||||
return (
|
||||
<Cell
|
||||
icon={this.leftIcon}
|
||||
size={this.size}
|
||||
title={this.label}
|
||||
center={this.center}
|
||||
border={this.border}
|
||||
isLink={this.isLink}
|
||||
required={this.required}
|
||||
clickable={this.clickable}
|
||||
titleStyle={this.labelStyle}
|
||||
valueClass={bem('value')}
|
||||
titleClass={[bem('label', labelAlign), this.labelClass]}
|
||||
scopedSlots={scopedSlots}
|
||||
arrowDirection={this.arrowDirection}
|
||||
class={bem({
|
||||
error: this.error,
|
||||
error: this.error || this.validateMessage,
|
||||
[`label-${labelAlign}`]: labelAlign,
|
||||
'min-height': this.type === 'textarea' && !this.autosize,
|
||||
})}
|
||||
scopedSlots={scopedSlots}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
<div class={bem('body')}>
|
||||
@ -363,11 +558,7 @@ export default createComponent({
|
||||
)}
|
||||
</div>
|
||||
{this.genWordLimit()}
|
||||
{this.errorMessage && (
|
||||
<div class={bem('error-message', this.errorMessageAlign)}>
|
||||
{this.errorMessage}
|
||||
</div>
|
||||
)}
|
||||
{this.genMessage()}
|
||||
</Cell>
|
||||
);
|
||||
},
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
.van-field {
|
||||
&__label {
|
||||
flex: none;
|
||||
box-sizing: border-box;
|
||||
width: @field-label-width;
|
||||
|
||||
&--center {
|
||||
@ -10,10 +11,15 @@
|
||||
}
|
||||
|
||||
&--right {
|
||||
padding-right: @padding-md;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&__value {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -27,6 +33,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @field-input-text-color;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@ -38,10 +45,10 @@
|
||||
|
||||
&:disabled {
|
||||
color: @field-input-disabled-text-color;
|
||||
-webkit-text-fill-color: @field-input-disabled-text-color; // fix disabled color in iOS
|
||||
background-color: transparent;
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: currentColor; // fix disabled color in iOS
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
@ -49,13 +56,21 @@
|
||||
}
|
||||
|
||||
&--center {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--right {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: @cell-line-height;
|
||||
}
|
||||
|
||||
// for ios wechat
|
||||
&[type='date'],
|
||||
&[type='time'],
|
||||
@ -142,7 +157,7 @@
|
||||
&,
|
||||
&::placeholder {
|
||||
color: @field-input-error-text-color;
|
||||
-webkit-text-fill-color: @field-input-error-text-color;
|
||||
-webkit-text-fill-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -15,31 +15,31 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>手机号</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请输入手机号" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>整数</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="tel" placeholder="请输入整数" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>数字</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入数字（支持小数）" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>密码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -49,13 +49,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" disabled="disabled" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,7 +67,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-smile-o">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="显示图标" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-warning-o">
|
||||
<!----></i></div>
|
||||
@ -78,7 +78,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-music-o">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="显示清除图标" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -88,13 +88,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-cell--required van-field van-field--error">
|
||||
<div class="van-cell__title van-field__label"><span>用户名</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--required van-field">
|
||||
<div class="van-cell__title van-field__label"><span>手机号</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入手机号" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">手机号格式错误</div>
|
||||
</div>
|
||||
@ -105,7 +105,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-cell--center van-field">
|
||||
<div class="van-cell__title van-field__label"><span>短信验证码</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
|
||||
<div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
|
||||
发送验证码
|
||||
@ -119,7 +119,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="格式化输入内容" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>留言</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="1" placeholder="请输入留言" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -139,9 +139,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>留言</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><textarea rows="2" placeholder="请输入留言" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
<div class="van-field__word-limit">0/50</div>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num">0</span>/50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -150,7 +150,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="输入框内容右对齐" class="van-field__control van-field__control--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`arrow-direction prop 1`] = `
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div><i class="van-icon van-icon-arrow-up van-cell__right-icon">
|
||||
<!----></i>
|
||||
@ -11,7 +11,7 @@ exports[`arrow-direction prop 1`] = `
|
||||
|
||||
exports[`clearable 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,7 +19,7 @@ exports[`clearable 1`] = `
|
||||
|
||||
exports[`clearable 2`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"><i class="van-icon van-icon-clear van-field__clear">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
@ -29,7 +29,7 @@ exports[`clearable 2`] = `
|
||||
exports[`label-class prop 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label custom-label-class"><span>Label</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,7 +38,7 @@ exports[`label-class prop 1`] = `
|
||||
exports[`label-width prop with unit 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label" style="width: 10rem;"><span>Label</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -47,15 +47,23 @@ exports[`label-width prop with unit 1`] = `
|
||||
exports[`label-width prop without unit 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label" style="width: 100px;"><span>Label</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`name prop 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="foo" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reach max word-limit 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num van-field__word-num--full">3</span>/3</div>
|
||||
</div>
|
||||
@ -64,9 +72,9 @@ exports[`reach max word-limit 1`] = `
|
||||
|
||||
exports[`render input slot 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control">Custom Input</div>
|
||||
<div class="van-field__control van-field__control--custom">Custom Input</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -75,7 +83,7 @@ exports[`render input slot 1`] = `
|
||||
exports[`render label slot 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label">Custom Label</div>
|
||||
<div class="van-cell__value">
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -83,7 +91,7 @@ exports[`render label slot 1`] = `
|
||||
|
||||
exports[`render textarea 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><textarea class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -91,7 +99,7 @@ exports[`render textarea 1`] = `
|
||||
|
||||
exports[`size prop 1`] = `
|
||||
<div class="van-cell van-cell--large van-field">
|
||||
<div class="van-cell__value van-cell__value--alone">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -291,3 +291,26 @@ test('reach max word-limit', () => {
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('name prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
name: 'foo',
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('call focus method before mounted', done => {
|
||||
mount(Field, {
|
||||
created() {
|
||||
this.focus();
|
||||
this.blur();
|
||||
done();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('destroy field', () => {
|
||||
mount(Field).destroy();
|
||||
});
|
||||
|
||||
469
src/form/README.md
Normal file
469
src/form/README.md
Normal file
@ -0,0 +1,469 @@
|
||||
# Form
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Form } from 'vant';
|
||||
|
||||
Vue.use(Form);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="Username"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
:rules="[{ required: true, message: 'Username is required' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="Password"
|
||||
label="Password"
|
||||
placeholder="Password"
|
||||
:rules="[{ required: true, message: 'Password is required' }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
Submit
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Validate Rules
|
||||
|
||||
```html
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
placeholder="USe pattern"
|
||||
:rules="[{ pattern, message: 'Error message }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
placeholder="Use validator"
|
||||
:rules="[{ validator, message: 'Error message }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="asyncValidator"
|
||||
placeholder="Use async validator"
|
||||
:rules="[{ validator: asyncValidator, message: 'Error message }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
Submit
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pattern: /\d{6}/,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
validator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
asyncValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
Toast.loading('Validating...');
|
||||
|
||||
setTimeout(() => {
|
||||
Toast.clear();
|
||||
resolve(/\d{6}/.test(val));
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Switch
|
||||
|
||||
```html
|
||||
<van-field name="switch" label="Switch">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchChecked: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Checkbox
|
||||
|
||||
```html
|
||||
<van-field name="checkbox" label="Checkbox">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="checkboxGroup" label="CheckboxGroup">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">Checkbox 1</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">Checkbox 2</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Radio
|
||||
|
||||
```html
|
||||
<van-field name="radio" label="Radio">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">Radio 1</van-radio>
|
||||
<van-radio name="2">Radio 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Stepper
|
||||
|
||||
```html
|
||||
<van-field name="stepper" label="Stepper">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper"/>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepper: 1,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Rate
|
||||
|
||||
```html
|
||||
<van-field name="rate" label="Rate">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Slider
|
||||
|
||||
```html
|
||||
<van-field name="slider" label="Slider">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: 50,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Uploader
|
||||
|
||||
```html
|
||||
<van-field name="uploader" label="Uploader">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Picker
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
label="Picker"
|
||||
placeholder="Select city"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - DatetimePicker
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
label="Datetime Picker"
|
||||
placeholder="Select time"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(time) {
|
||||
this.value = time;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Area
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
label="Area Picker"
|
||||
placeholder="Select area"
|
||||
@click="showArea = true"
|
||||
/>
|
||||
<van-popup v-model="showArea" position="bottom">
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showArea = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showArea: false,
|
||||
areaList: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(values) {
|
||||
this.value = values.map(item => item.name).join('/');
|
||||
this.showArea = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Field Type - Calendar
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
label="Calendar"
|
||||
placeholder="Select date"
|
||||
@click="showCalendar = true"
|
||||
/>
|
||||
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(date) {
|
||||
this.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
this.showCalendar = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| label-width | Field label width | *number \| string* | `90px` |
|
||||
| label-align | Field label align, can be set to `center` `right` | *string* | `left` |
|
||||
| input-align | Field input align, can be set to `center` `right` | *string* | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
|
||||
| validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | *string* | `onBlur` |
|
||||
| colon | Whether to display `:` after label | *boolean* | `false` |
|
||||
| validate-first | Whether to stop the validation when a rule fails | *boolean* | `false` |
|
||||
| scroll-to-error `v2.5.2` | Whether to scroll to the error field when submit failed | *boolean* | `false` |
|
||||
|
||||
### Data Structure of Rule
|
||||
|
||||
| Key | Description | Type |
|
||||
|------|------|------|
|
||||
| required | Whether to be a required field | *boolean* |
|
||||
| message `v2.5.3` | Error message | *string \| (value, rule) => string* |
|
||||
| validator `v2.5.3` | Custom validator | *(value, rule) => boolean \| Promise* |
|
||||
| pattern `v2.5.3` | Regex pattern | *RegExp* |
|
||||
| trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onBlur` | *string* |
|
||||
| formatter `v2.5.3` | Format value before validate | *(value, rule) => any* |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| submit | Triggered after submitting the form and validation passed | *values: object* |
|
||||
| failed | Triggered after submitting the form and validation failed | *errorInfo: { values: object, errors: object[] }* |
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| submit | Submit form | - | - |
|
||||
| validate | Validate form | *name?: string* | *Promise* |
|
||||
| resetValidation | Reset validation | *name?: string* | - |
|
||||
| scrollToField `v2.5.2` | Scroll to field | *name: string* | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| default | Form content |
|
||||
508
src/form/README.zh-CN.md
Normal file
508
src/form/README.zh-CN.md
Normal file
@ -0,0 +1,508 @@
|
||||
# Form 表单
|
||||
|
||||
### 介绍
|
||||
|
||||
用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，2.5 版本开始支持此组件
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Form } from 'vant';
|
||||
|
||||
Vue.use(Form);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
在表单中，每个 [Field 组件](#/zh-CN/field) 代表一个表单项，使用 Field 的`rules`属性定义校验规则
|
||||
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="用户名"
|
||||
label="用户名"
|
||||
placeholder="用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="密码"
|
||||
label="密码"
|
||||
placeholder="密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 校验规则
|
||||
|
||||
通过`rules`定义表单校验规则，可用字段见[下方表格](#/zh-CN/form#rule-shu-ju-jie-gou)
|
||||
|
||||
```html
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<!-- 通过 pattern 进行正则校验 -->
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
placeholder="正则校验"
|
||||
:rules="[{ pattern, message: '请输入正确内容 }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行函数校验 -->
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
placeholder="函数校验"
|
||||
:rules="[{ validator, message: '请输入正确内容 }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行异步函数校验 -->
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="asyncValidator"
|
||||
placeholder="异步函数校验"
|
||||
:rules="[{ validator: asyncValidator, message: '请输入正确内容 }]"
|
||||
/>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
```
|
||||
|
||||
```js
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pattern: /\d{6}/,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 校验函数返回 true 表示校验通过，false 表示不通过
|
||||
validator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
// 异步校验函数返回 Promise
|
||||
asyncValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
Toast.loading('验证中...');
|
||||
|
||||
setTimeout(() => {
|
||||
Toast.clear();
|
||||
resolve(/\d{6}/.test(val));
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 开关
|
||||
|
||||
在表单中使用 [Switch 组件](#/zh-CN/switch)
|
||||
|
||||
```html
|
||||
<van-field name="switch" label="开关">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchChecked: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 复选框
|
||||
|
||||
在表单中使用 [Checkbox 组件](#/zh-CN/checkbox)
|
||||
|
||||
```html
|
||||
<van-field name="checkbox" label="复选框">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="checkboxGroup" label="复选框组">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">复选框 1</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">复选框 2</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 单选框
|
||||
|
||||
在表单中使用 [Radio 组件](#/zh-CN/radio)
|
||||
|
||||
```html
|
||||
<van-field name="radio" label="单选框">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">单选框 1</van-radio>
|
||||
<van-radio name="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 步进器
|
||||
|
||||
在表单中使用 [Stepper 组件](#/zh-CN/stepper)
|
||||
|
||||
```html
|
||||
<van-field name="stepper" label="步进器">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepper: 1,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 评分
|
||||
|
||||
在表单中使用 [Rate 组件](#/zh-CN/rate)
|
||||
|
||||
```html
|
||||
<van-field name="rate" label="评分">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 滑块
|
||||
|
||||
在表单中使用 [Slider 组件](#/zh-CN/slider)
|
||||
|
||||
```html
|
||||
<van-field name="slider" label="滑块">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: 50,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 文件上传
|
||||
|
||||
在表单中使用 [Uploader 组件](#/zh-CN/uploader)
|
||||
|
||||
```html
|
||||
<van-field name="uploader" label="文件上传">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 选择器
|
||||
|
||||
在表单中使用 [Picker 组件](#/zh-CN/picker)
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
label="选择器"
|
||||
placeholder="点击选择城市"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 时间选择器
|
||||
|
||||
在表单中使用 [DatetimePicker 组件](#/zh-CN/datetime-picker)
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
label="时间选择"
|
||||
placeholder="点击选择时间"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(time) {
|
||||
this.value = time;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 省市区选择器
|
||||
|
||||
在表单中使用 [Area 组件](#/zh-CN/area)
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
label="地区选择"
|
||||
placeholder="点击选择省市区"
|
||||
@click="showArea = true"
|
||||
/>
|
||||
<van-popup v-model="showArea" position="bottom">
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showArea = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showArea: false,
|
||||
areaList: {}, // 数据格式见 Area 组件文档
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(values) {
|
||||
this.value = values.map(item => item.name).join('/');
|
||||
this.showArea = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 表单项类型 - 日历
|
||||
|
||||
在表单中使用 [Calendar 组件](#/zh-CN/calendar)
|
||||
|
||||
```html
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
label="日历"
|
||||
placeholder="点击选择日期"
|
||||
@click="showCalendar = true"
|
||||
/>
|
||||
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(date) {
|
||||
this.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
this.showCalendar = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| label-width | 表单项 label 宽度，默认单位为`px` | *number \| string* | `90px` |
|
||||
| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| validate-trigger `v2.5.2` | 表单校验触发时机，可选值为`onChange` | *string* | `onBlur` |
|
||||
| colon | 是否在 label 后面添加冒号 | *boolean* | `false` |
|
||||
| validate-first | 是否在某一项校验不通过时停止校验 | *boolean* | `false` |
|
||||
| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | *boolean* | `false` |
|
||||
|
||||
> 表单项的 API 参见：[Field 组件](#/zh-CN/field#api)
|
||||
|
||||
### Rule 数据结构
|
||||
|
||||
使用 Field 的`rules`属性可以定义校验规则，可选属性如下:
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
|------|------|------|
|
||||
| required | 是否为必选字段 | *boolean* |
|
||||
| message `v2.5.3` | 错误提示文案 | *string \| (value, rule) => string* |
|
||||
| validator `v2.5.3` | 通过函数进行校验 | *(value, rule) => boolean \| Promise* |
|
||||
| pattern `v2.5.3` | 通过正则表达式进行校验 | *RegExp* |
|
||||
| trigger `v2.5.2` | 本项规则的触发时机，可选值为`onChange`、`onBlur` | *string* |
|
||||
| formatter `v2.5.3` | 格式化函数，将表单项的值转换后进行校验 | *(value, rule) => any* |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| submit | 提交表单且验证通过后触发 | *values: object* |
|
||||
| failed | 提交表单且验证不通过后触发 | *errorInfo: { values: object, errors: object[] }* |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| submit | 提交表单，与点击提交按钮的效果等价 | - | - |
|
||||
| validate | 验证表单，支持传入`name`来验证单个表单项 | *name?: string* | *Promise* |
|
||||
| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | *name?: string* | - |
|
||||
| scrollToField `v2.5.2` | 滚动到对应表单项的位置 | *name: string* | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 表单内容 |
|
||||
63
src/form/demo/BasicUsage.vue
Normal file
63
src/form/demo/BasicUsage.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
:label="$t('username')"
|
||||
:rules="[{ required: true, message: $t('requireUsername') }]"
|
||||
:placeholder="$t('username')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
:label="$t('password')"
|
||||
:rules="[{ required: true, message: $t('requirePassword') }]"
|
||||
:placeholder="$t('password')"
|
||||
/>
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
submit: '提交',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
requireUsername: '请填写用户名',
|
||||
requirePassword: '请填写密码',
|
||||
},
|
||||
'en-US': {
|
||||
submit: 'Submit',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
requireUsername: 'Username is required',
|
||||
requirePassword: 'Password is required',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
140
src/form/demo/FieldType.vue
Normal file
140
src/form/demo/FieldType.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<demo-block :title="$t('fieldType')">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field name="switch" :label="$t('switch')">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkbox" :label="$t('checkbox')">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkboxGroup" :label="$t('checkboxGroup')">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">
|
||||
{{ $t('checkbox') }} 1
|
||||
</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">
|
||||
{{ $t('checkbox') }} 2
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="radio" :label="$t('radio')">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="stepper" :label="$t('stepper')">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="rate" :label="$t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="slider" :label="$t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="uploader" :label="$t('uploader')">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" max-count="2" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<field-type-picker />
|
||||
<field-type-datetime-picker />
|
||||
<field-type-area />
|
||||
<field-type-calendar />
|
||||
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FieldTypeArea from './FieldTypeArea';
|
||||
import FieldTypePicker from './FieldTypePicker';
|
||||
import FieldTypeCalendar from './FieldTypeCalendar';
|
||||
import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
rate: '评分',
|
||||
radio: '单选框',
|
||||
submit: '提交',
|
||||
switch: '开关',
|
||||
slider: '滑块',
|
||||
picker: '选择器',
|
||||
stepper: '步进器',
|
||||
checkbox: '复选框',
|
||||
uploader: '文件上传',
|
||||
fieldType: '表单项类型',
|
||||
checkboxGroup: '复选框组',
|
||||
requireCheckbox: '请勾选复选框',
|
||||
},
|
||||
'en-US': {
|
||||
rate: 'Rate',
|
||||
radio: 'Radio',
|
||||
submit: 'Submit',
|
||||
switch: 'Switch',
|
||||
slider: 'Slider',
|
||||
picker: 'Picker',
|
||||
stepper: 'Stepper',
|
||||
checkbox: 'Checkbox',
|
||||
uploader: 'Uploader',
|
||||
fieldType: 'Field Type',
|
||||
checkboxGroup: 'Checkbox Group',
|
||||
requireCheckbox: 'Checkbox is required',
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
FieldTypeArea,
|
||||
FieldTypePicker,
|
||||
FieldTypeCalendar,
|
||||
FieldTypeDatetimePicker,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
radio: '1',
|
||||
slider: 50,
|
||||
stepper: 1,
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
switchChecked: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
console.log(values);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
58
src/form/demo/FieldTypeArea.vue
Normal file
58
src/form/demo/FieldTypeArea.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
:label="$t('picker')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showArea = true"
|
||||
/>
|
||||
<van-popup v-model="showArea" position="bottom">
|
||||
<van-area
|
||||
:area-list="$t('areaList')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaList from '../../area/demo/area';
|
||||
import AreaListEn from '../../area/demo/area-en';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
picker: '地区选择',
|
||||
areaList: AreaList,
|
||||
placeholder: '点击选择省市区',
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Area Picker',
|
||||
areaList: AreaListEn,
|
||||
placeholder: 'Select area',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showArea: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(values) {
|
||||
this.value = values.map(item => item.name).join('/');
|
||||
this.showArea = false;
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.showArea = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
47
src/form/demo/FieldTypeCalendar.vue
Normal file
47
src/form/demo/FieldTypeCalendar.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
:label="$t('calendar')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showCalendar = true"
|
||||
/>
|
||||
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
calendar: '日历',
|
||||
placeholder: '点击选择日期',
|
||||
},
|
||||
'en-US': {
|
||||
calendar: 'Calendar',
|
||||
placeholder: 'Select date',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
},
|
||||
|
||||
onConfirm(date) {
|
||||
this.value = this.formatDate(date);
|
||||
this.showCalendar = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
53
src/form/demo/FieldTypeDatetimePicker.vue
Normal file
53
src/form/demo/FieldTypeDatetimePicker.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
:label="$t('label')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
label: '时间选择',
|
||||
placeholder: '点击选择时间',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Datetime Picker',
|
||||
placeholder: 'Select time',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(time) {
|
||||
console.log('time', time);
|
||||
this.value = time;
|
||||
this.showPicker = false;
|
||||
},
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
56
src/form/demo/FieldTypePicker.vue
Normal file
56
src/form/demo/FieldTypePicker.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
:label="$t('picker')"
|
||||
:placeholder="$t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="$t('textColumns')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
picker: '选择器',
|
||||
placeholder: '点击选择城市',
|
||||
textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Picker',
|
||||
placeholder: 'Select city',
|
||||
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
93
src/form/demo/ValidateRules.vue
Normal file
93
src/form/demo/ValidateRules.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<demo-block :title="$t('title')">
|
||||
<van-form validate-first @sumbit="onSubmit" @failed="onFailed">
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
:label="$t('label')"
|
||||
:rules="[{ pattern, message: $t('message') }]"
|
||||
:placeholder="$t('pattern')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
:label="$t('label')"
|
||||
:rules="[{ validator, message: $t('message') }]"
|
||||
:placeholder="$t('validator')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="asyncValidator"
|
||||
:label="$t('label')"
|
||||
:rules="[{ validator: asyncValidator, message: $t('message') }]"
|
||||
:placeholder="$t('asyncValidator')"
|
||||
/>
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<van-button round block type="info" native-type="submit">
|
||||
{{ $t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
label: '文本',
|
||||
title: '校验规则',
|
||||
submit: '提交',
|
||||
message: '请输入正确内容',
|
||||
pattern: '正则校验',
|
||||
validator: '函数校验',
|
||||
validating: '验证中...',
|
||||
asyncValidator: '异步函数校验',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Label',
|
||||
title: 'Validate Rules',
|
||||
submit: 'Submit',
|
||||
message: 'Error message',
|
||||
pattern: 'Use pattern',
|
||||
validator: 'Use validator',
|
||||
validating: 'Validating...',
|
||||
asyncValidator: 'Use async validator',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pattern: /\d{6}/,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
validator(val) {
|
||||
return val === '1234';
|
||||
},
|
||||
|
||||
asyncValidator(val) {
|
||||
return new Promise(resolve => {
|
||||
this.$toast.loading(this.$t('validating'));
|
||||
|
||||
setTimeout(() => {
|
||||
this.$toast.clear();
|
||||
resolve(val === '1234');
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
|
||||
onSubmit(values) {
|
||||
console.log('submit', values);
|
||||
},
|
||||
|
||||
onFailed(errorInfo) {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
21
src/form/demo/index.vue
Normal file
21
src/form/demo/index.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<basic-usage />
|
||||
<validate-rules />
|
||||
<field-type />
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicUsage from './BasicUsage';
|
||||
import ValidateRules from './ValidateRules';
|
||||
import FieldType from './FieldType';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BasicUsage,
|
||||
FieldType,
|
||||
ValidateRules,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
159
src/form/index.js
Normal file
159
src/form/index.js
Normal file
@ -0,0 +1,159 @@
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
const [createComponent, bem] = createNamespace('form');
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
colon: Boolean,
|
||||
labelWidth: [Number, String],
|
||||
labelAlign: String,
|
||||
inputAlign: String,
|
||||
scrollToError: Boolean,
|
||||
validateFirst: Boolean,
|
||||
errorMessageAlign: String,
|
||||
validateTrigger: {
|
||||
type: String,
|
||||
default: 'onBlur',
|
||||
},
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
vanForm: this,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
fields: [],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
validateSeq() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const errors = [];
|
||||
|
||||
this.fields
|
||||
.reduce(
|
||||
(promise, field) =>
|
||||
promise.then(() => {
|
||||
if (!errors.length) {
|
||||
return field.validate().then(error => {
|
||||
if (error) {
|
||||
errors.push(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}),
|
||||
Promise.resolve()
|
||||
)
|
||||
.then(() => {
|
||||
if (errors.length) {
|
||||
reject(errors);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
validateAll() {
|
||||
return new Promise((resolve, reject) => {
|
||||
Promise.all(this.fields.map(item => item.validate())).then(errors => {
|
||||
errors = errors.filter(item => item);
|
||||
|
||||
if (errors.length) {
|
||||
reject(errors);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
validate(name) {
|
||||
if (name) {
|
||||
return this.validateField(name);
|
||||
}
|
||||
return this.validateFirst ? this.validateSeq() : this.validateAll();
|
||||
},
|
||||
|
||||
validateField(name) {
|
||||
const matched = this.fields.filter(item => item.name === name);
|
||||
|
||||
if (matched.length) {
|
||||
return new Promise((resolve, reject) => {
|
||||
matched[0].validate().then(error => {
|
||||
if (error) {
|
||||
reject(error);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.reject();
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
resetValidation(name) {
|
||||
this.fields.forEach(item => {
|
||||
if (!name || item.name === name) {
|
||||
item.resetValidation();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
scrollToField(name) {
|
||||
this.fields.forEach(item => {
|
||||
if (item.name === name) {
|
||||
item.$el.scrollIntoView();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getValues() {
|
||||
return this.fields.reduce((form, field) => {
|
||||
form[field.name] = field.formValue;
|
||||
return form;
|
||||
}, {});
|
||||
},
|
||||
|
||||
onSubmit(event) {
|
||||
event.preventDefault();
|
||||
this.submit();
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
submit() {
|
||||
const values = this.getValues();
|
||||
|
||||
this.validate()
|
||||
.then(() => {
|
||||
this.$emit('submit', values);
|
||||
})
|
||||
.catch(errors => {
|
||||
this.$emit('failed', {
|
||||
values,
|
||||
errors,
|
||||
});
|
||||
|
||||
if (this.scrollToError) {
|
||||
this.scrollToField(errors[0].name);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<form class={bem()} onSubmit={this.onSubmit}>
|
||||
{this.slots()}
|
||||
</form>
|
||||
);
|
||||
},
|
||||
});
|
||||
229
src/form/test/__snapshots__/demo.spec.js.snap
Normal file
229
src/form/test/__snapshots__/demo.spec.js.snap
Normal file
@ -0,0 +1,229 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>用户名</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="username" placeholder="用户名" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>密码</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="pattern" placeholder="正则校验" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="validator" placeholder="函数校验" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="asyncValidator" placeholder="异步函数校验" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>开关</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>复选框</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>复选框组</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-checkbox-group van-checkbox-group--horizontal">
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框 1
|
||||
</span>
|
||||
</div>
|
||||
<div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-checkbox--horizontal">
|
||||
<div class="van-checkbox__icon van-checkbox__icon--square"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-checkbox__label">
|
||||
复选框 2
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>单选框</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div role="radiogroup" class="van-radio-group van-radio-group--horizontal">
|
||||
<div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--horizontal">
|
||||
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">单选框 1</span>
|
||||
</div>
|
||||
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio van-radio--horizontal">
|
||||
<div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
|
||||
<!----></i></div><span class="van-radio__label">单选框 2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>步进器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>评分</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>滑块</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-slider">
|
||||
<div class="van-slider__bar" style="width: 50%;">
|
||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
|
||||
<div class="van-slider__button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>文件上传</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<div class="van-field__control van-field__control--custom">
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
||||
<!----></i></div>
|
||||
</div><i class="van-icon van-icon-clear van-uploader__preview-delete">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>选择器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>时间选择</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区选择</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>日历</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
18
src/form/test/__snapshots__/events.spec.js.snap
Normal file
18
src/form/test/__snapshots__/events.spec.js.snap
Normal file
@ -0,0 +1,18 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`failed event 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="A" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">A failed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">B failed</div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</form>
|
||||
`;
|
||||
17
src/form/test/__snapshots__/methods.spec.js.snap
Normal file
17
src/form/test/__snapshots__/methods.spec.js.snap
Normal file
@ -0,0 +1,17 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`resetValidation method - reset one field 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="A" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">B failed</div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</form>
|
||||
`;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user