blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #3242 from youzan/2.0

Browse Source 
[breaking change] 2.0
This commit is contained in:
neverland 2019-04-29 20:35:31 +08:00 committed by GitHub
commit e7689c78d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
69 changed files with 658 additions and 1086 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/markdown/changelog.en-US.md
View File

@ -34,7 +34,7 @@
- Tabbar: add safe-area-inset-bottom prop [\#3149](https://github.com/youzan/vant/pull/3149) - Tabbar: add safe-area-inset-bottom prop [\#3149](https://github.com/youzan/vant/pull/3149)
- SubmitBar: add safe-area-inset-bottom prop [\#3172](https://github.com/youzan/vant/pull/3172) - SubmitBar: add safe-area-inset-bottom prop [\#3172](https://github.com/youzan/vant/pull/3172)
- GoodsAction: add safe-area-inset-bottom prop [\#3174](https://github.com/youzan/vant/pull/3174) - GoodsAction: add safe-area-inset-bottom prop [\#3174](https://github.com/youzan/vant/pull/3174)
- Actionsheet: add safe-area-inset-bottom prop [\#3171](https://github.com/youzan/vant/pull/3171) - ActionSheet: add safe-area-inset-bottom prop [\#3171](https://github.com/youzan/vant/pull/3171)
- NumberKeyboard: add safe-area-inset-bottom prop [\#3173](https://github.com/youzan/vant/pull/3173) - NumberKeyboard: add safe-area-inset-bottom prop [\#3173](https://github.com/youzan/vant/pull/3173)
**Bug Fixes** **Bug Fixes**
@ -55,7 +55,7 @@
- Cell: add less vars [\#3122](https://github.com/youzan/vant/pull/3122) - Cell: add less vars [\#3122](https://github.com/youzan/vant/pull/3122)
- Rate: add less vars [\#3135](https://github.com/youzan/vant/pull/3135) - Rate: add less vars [\#3135](https://github.com/youzan/vant/pull/3135)
- Panel: add less vars [\#3136](https://github.com/youzan/vant/pull/3136) - Panel: add less vars [\#3136](https://github.com/youzan/vant/pull/3136)
- Badge: add less vars [\#3131](https://github.com/youzan/vant/pull/3131) - Sidebar: add less vars [\#3131](https://github.com/youzan/vant/pull/3131)
- Dialog: add less vars [\#3123](https://github.com/youzan/vant/pull/3123) - Dialog: add less vars [\#3123](https://github.com/youzan/vant/pull/3123)
- Slider: add less vars [\#3125](https://github.com/youzan/vant/pull/3125) - Slider: add less vars [\#3125](https://github.com/youzan/vant/pull/3125)
- Tabbar: add less vars [\#3124](https://github.com/youzan/vant/pull/3124) - Tabbar: add less vars [\#3124](https://github.com/youzan/vant/pull/3124)
@ -89,7 +89,7 @@
**Improvements** **Improvements**
- Actionsheet: add less vars [\#3049](https://github.com/youzan/vant/pull/3049) - ActionSheet: add less vars [\#3049](https://github.com/youzan/vant/pull/3049)
**Bug Fixes** **Bug Fixes**
@ -112,7 +112,7 @@
- NoticeBar: add wrapable prop [\#2992](https://github.com/youzan/vant/pull/2992) - NoticeBar: add wrapable prop [\#2992](https://github.com/youzan/vant/pull/2992)
- Field: add error-message-align prop [\#3016](https://github.com/youzan/vant/pull/3016) - Field: add error-message-align prop [\#3016](https://github.com/youzan/vant/pull/3016)
- Sku: support set selectedNum when inited [\#3045](https://github.com/youzan/vant/pull/3045) - Sku: support set selectedNum when inited [\#3045](https://github.com/youzan/vant/pull/3045)
- Actionsheet: support use slot and cancel-text at same time [\#3021](https://github.com/youzan/vant/pull/3021) - ActionSheet: support use slot and cancel-text at same time [\#3021](https://github.com/youzan/vant/pull/3021)
**Bug Fixes** **Bug Fixes**
@ -152,7 +152,7 @@
- CellGroup: add title prop [\#2928](https://github.com/youzan/vant/pull/2928) - CellGroup: add title prop [\#2928](https://github.com/youzan/vant/pull/2928)
- Steps: add active-icon prop [\#2934](https://github.com/youzan/vant/pull/2934) - Steps: add active-icon prop [\#2934](https://github.com/youzan/vant/pull/2934)
- Picker: add default-index prop [\#2935](https://github.com/youzan/vant/pull/2935) - Picker: add default-index prop [\#2935](https://github.com/youzan/vant/pull/2935)
- Actionsheet: add index param for select event [\#2917](https://github.com/youzan/vant/pull/2917) - ActionSheet: add index param for select event [\#2917](https://github.com/youzan/vant/pull/2917)
**Bug Fixes** **Bug Fixes**
@ -188,8 +188,8 @@
**Bug Fixes** **Bug Fixes**
- fix Actionsheet lazy-render not work [\#2840](https://github.com/youzan/vant/pull/2840) - fix ActionSheet lazy-render not work [\#2840](https://github.com/youzan/vant/pull/2840)
- fix Actionsheet get-container not work [\#2853](https://github.com/youzan/vant/pull/2853) - fix ActionSheet get-container not work [\#2853](https://github.com/youzan/vant/pull/2853)
- fix Tab should scroll to active tab when inited [\#2857](https://github.com/youzan/vant/pull/2857) - fix Tab should scroll to active tab when inited [\#2857](https://github.com/youzan/vant/pull/2857)
- fix Checkbox uncheckable when inside cell [\#2855](https://github.com/youzan/vant/pull/2855) - fix Checkbox uncheckable when inside cell [\#2855](https://github.com/youzan/vant/pull/2855)
- fix CouponList incorrectly render when disabled list empty [\#2845](https://github.com/youzan/vant/pull/2845) - fix CouponList incorrectly render when disabled list empty [\#2845](https://github.com/youzan/vant/pull/2845)
@ -554,7 +554,7 @@ Also we have optimized the UI of the following components:：
- Tab: add animated props [\#2126](https://github.com/youzan/vant/pull/2126) - Tab: add animated props [\#2126](https://github.com/youzan/vant/pull/2126)
- Tab: update title style [\#2120](https://github.com/youzan/vant/pull/2120) - Tab: update title style [\#2120](https://github.com/youzan/vant/pull/2120)
- Badge: update info style [\#2122](https://github.com/youzan/vant/pull/2122) - Sidebar: update info style [\#2122](https://github.com/youzan/vant/pull/2122)
- Radio: add checked-color prop [\#2129](https://github.com/youzan/vant/pull/2129) - Radio: add checked-color prop [\#2129](https://github.com/youzan/vant/pull/2129)
- Swipe: add indicator-color prop [\#2110](https://github.com/youzan/vant/pull/2110) - Swipe: add indicator-color prop [\#2110](https://github.com/youzan/vant/pull/2110)
- TreeSelect: support disable option [\#2107](https://github.com/youzan/vant/pull/2107) - TreeSelect: support disable option [\#2107](https://github.com/youzan/vant/pull/2107)
@ -612,7 +612,7 @@ Also we have optimized the UI of the following components:：
**Improvements** **Improvements**
- Badge: add change event [\#2017](https://github.com/youzan/vant/pull/2017) - Sidebar: add change event [\#2017](https://github.com/youzan/vant/pull/2017)
- Radio: update color [\#2018](https://github.com/youzan/vant/pull/2018) - Radio: update color [\#2018](https://github.com/youzan/vant/pull/2018)
- Checkbox: update color [\#2018](https://github.com/youzan/vant/pull/2018) - Checkbox: update color [\#2018](https://github.com/youzan/vant/pull/2018)
- Sku: support image preview [\#2019](https://github.com/youzan/vant/pull/2019) - Sku: support image preview [\#2019](https://github.com/youzan/vant/pull/2019)
@ -710,7 +710,7 @@ Also we have optimized the UI of the following components:：
**Improvements** **Improvements**
- Tab: upgrade style [\#1908](https://github.com/youzan/vant/pull/1908) - Tab: upgrade style [\#1908](https://github.com/youzan/vant/pull/1908)
- Badge: upgrade style [\#1907](https://github.com/youzan/vant/pull/1907) - Sidebar: upgrade style [\#1907](https://github.com/youzan/vant/pull/1907)
- Dialog: upgrade style [\#1906](https://github.com/youzan/vant/pull/1906) - Dialog: upgrade style [\#1906](https://github.com/youzan/vant/pull/1906)
- NoticeBar: upgrade style [\#1893](https://github.com/youzan/vant/pull/1893) - NoticeBar: upgrade style [\#1893](https://github.com/youzan/vant/pull/1893)
- Collapse: add disabled prop [\#1892](https://github.com/youzan/vant/pull/1892) - Collapse: add disabled prop [\#1892](https://github.com/youzan/vant/pull/1892)
@ -873,14 +873,14 @@ Also we have optimized the UI of the following components:：
**Improvements** **Improvements**
- Actionsheet: add select event [\#1594](https://github.com/youzan/vant/pull/1594) - ActionSheet: add select event [\#1594](https://github.com/youzan/vant/pull/1594)
- ImagePreview: suppot onClose callback [\#1589](https://github.com/youzan/vant/pull/1589) - ImagePreview: suppot onClose callback [\#1589](https://github.com/youzan/vant/pull/1589)
- List: add check method [\#1590](https://github.com/youzan/vant/pull/1590) - List: add check method [\#1590](https://github.com/youzan/vant/pull/1590)
- Search: update style [\#1603](https://github.com/youzan/vant/pull/1603) - Search: update style [\#1603](https://github.com/youzan/vant/pull/1603)
**Bug Fixes** **Bug Fixes**
- fix Actionsheet item unclickable when loading [\#1587](https://github.com/youzan/vant/pull/1587) - fix ActionSheet item unclickable when loading [\#1587](https://github.com/youzan/vant/pull/1587)
- fix DatetimePicker value uncorrect when use formatter [\#1591](https://github.com/youzan/vant/pull/1591) - fix DatetimePicker value uncorrect when use formatter [\#1591](https://github.com/youzan/vant/pull/1591)
@ -970,7 +970,7 @@ Also we have optimized the UI of the following components:：
**Improvements** **Improvements**
- Actionsheet: support lazy render [\#1365](https://github.com/youzan/vant/pull/1365) - ActionSheet: support lazy render [\#1365](https://github.com/youzan/vant/pull/1365)
- AddressEdit: adjust event order [\#1402](https://github.com/youzan/vant/pull/1402) - AddressEdit: adjust event order [\#1402](https://github.com/youzan/vant/pull/1402)
- SwitchCell: add size prop [\#1371](https://github.com/youzan/vant/pull/1371) - SwitchCell: add size prop [\#1371](https://github.com/youzan/vant/pull/1371)
- Checkbox: add label-position prop [\#1394](https://github.com/youzan/vant/pull/1394) - Checkbox: add label-position prop [\#1394](https://github.com/youzan/vant/pull/1394)
@ -1015,7 +1015,7 @@ Also we have optimized the UI of the following components:：
**Improvements** **Improvements**
- Actionsheet: support disable option [\#1293](https://github.com/youzan/vant/pull/1293) - ActionSheet: support disable option [\#1293](https://github.com/youzan/vant/pull/1293)
- Field: support clearable [\#1309](https://github.com/youzan/vant/pull/1309) - Field: support clearable [\#1309](https://github.com/youzan/vant/pull/1309)
- Layout: support flex layout [\#1305](https://github.com/youzan/vant/pull/1305) - Layout: support flex layout [\#1305](https://github.com/youzan/vant/pull/1305)
- Locale: add type definition [\#1294](https://github.com/youzan/vant/pull/1294) - Locale: add type definition [\#1294](https://github.com/youzan/vant/pull/1294)
@ -1046,7 +1046,7 @@ Also we have optimized the UI of the following components:：
**Bug Fixes** **Bug Fixes**
- fix Actionsheet title font size [\#1267](https://github.com/youzan/vant/pull/1267) - fix ActionSheet title font size [\#1267](https://github.com/youzan/vant/pull/1267)
- fix CheckboxGroup v-model type check [\#1254](https://github.com/youzan/vant/pull/1254) - fix CheckboxGroup v-model type check [\#1254](https://github.com/youzan/vant/pull/1254)
- fix Popup max height [\#1256](https://github.com/youzan/vant/pull/1256) - fix Popup max height [\#1256](https://github.com/youzan/vant/pull/1256)
- fix Tab resize line when title changed [\#1260](https://github.com/youzan/vant/pull/1260) - fix Tab resize line when title changed [\#1260](https://github.com/youzan/vant/pull/1260)
@ -1273,8 +1273,8 @@ Also we have optimized the UI of the following components:：
**Improvements** **Improvements**
* Actionsheet: add cancel event [\#796](https://github.com/youzan/vant/pull/796) * ActionSheet: add cancel event [\#796](https://github.com/youzan/vant/pull/796)
* Actionsheet: support maxHeight [\#777](https://github.com/youzan/vant/pull/777) * ActionSheet: support maxHeight [\#777](https://github.com/youzan/vant/pull/777)
* DatetimePicker: support all picker props [\#788](https://github.com/youzan/vant/pull/788) * DatetimePicker: support all picker props [\#788](https://github.com/youzan/vant/pull/788)
* SubmitBar: unite font-size [\#774](https://github.com/youzan/vant/pull/774) * SubmitBar: unite font-size [\#774](https://github.com/youzan/vant/pull/774)
* i18n: support zh-HK language [\#812](https://github.com/youzan/vant/pull/812) * i18n: support zh-HK language [\#812](https://github.com/youzan/vant/pull/812)
@ -1359,10 +1359,10 @@ Also we have optimized the UI of the following components:：
**Bug Fixes** **Bug Fixes**
* fix Actionsheet bottom border missing [\#686](https://github.com/youzan/vant/pull/686) * fix ActionSheet bottom border missing [\#686](https://github.com/youzan/vant/pull/686)
* fix AddressEdit area not selected when area_code changed [\#680](https://github.com/youzan/vant/pull/680) * fix AddressEdit area not selected when area_code changed [\#680](https://github.com/youzan/vant/pull/680)
* fix Stepper value overlimit [\#691](https://github.com/youzan/vant/issues/691) * fix Stepper value overlimit [\#691](https://github.com/youzan/vant/issues/691)
* fix Badge info font weight when selected [\#687](https://github.com/youzan/vant/pull/687) * fix Sidebar info font weight when selected [\#687](https://github.com/youzan/vant/pull/687)
## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14) ## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14)
@ -1652,7 +1652,7 @@ Also we have optimized the UI of the following components:：
* Search: support native input attrs [\#418](https://github.com/youzan/vant/pull/418) * Search: support native input attrs [\#418](https://github.com/youzan/vant/pull/418)
* CellGroup: add 'border' prop [\#420](https://github.com/youzan/vant/pull/420) * CellGroup: add 'border' prop [\#420](https://github.com/youzan/vant/pull/420)
* AddressEdit: add focus、change-area、select-search events [\#426](https://github.com/youzan/vant/pull/426) * AddressEdit: add focus、change-area、select-search events [\#426](https://github.com/youzan/vant/pull/426)
* Badge、CouponList、ContactCard: add active color [\#419](https://github.com/youzan/vant/pull/419) * Sidebar、CouponList、ContactCard: add active color [\#419](https://github.com/youzan/vant/pull/419)
**Bug Fixes** **Bug Fixes**
@ -1781,7 +1781,7 @@ Also we have optimized the UI of the following components:：
**Improvements** **Improvements**
* Actionsheet: update close icon style [\#340](https://github.com/youzan/vant/pull/340) * ActionSheet: update close icon style [\#340](https://github.com/youzan/vant/pull/340)
* Popup: add overlayClass and overlayStyle props [\#349](https://github.com/youzan/vant/pull/349) [\#343](https://github.com/youzan/vant/pull/343) * Popup: add overlayClass and overlayStyle props [\#349](https://github.com/youzan/vant/pull/349) [\#343](https://github.com/youzan/vant/pull/343)
* Icon: adjust unicode for better display [\#330](https://github.com/youzan/vant/pull/330) * Icon: adjust unicode for better display [\#330](https://github.com/youzan/vant/pull/330)
* ImagePreview: support manually close [\#346](https://github.com/youzan/vant/pull/346) * ImagePreview: support manually close [\#346](https://github.com/youzan/vant/pull/346)

44
docs/markdown/changelog.zh-CN.md
View File

@ -34,7 +34,7 @@
- Tabbar: 新增 safe-area-inset-bottom 属性 [\#3149](https://github.com/youzan/vant/pull/3149) - Tabbar: 新增 safe-area-inset-bottom 属性 [\#3149](https://github.com/youzan/vant/pull/3149)
- SubmitBar: 新增 safe-area-inset-bottom 属性 [\#3172](https://github.com/youzan/vant/pull/3172) - SubmitBar: 新增 safe-area-inset-bottom 属性 [\#3172](https://github.com/youzan/vant/pull/3172)
- GoodsAction: 新增 safe-area-inset-bottom 属性 [\#3174](https://github.com/youzan/vant/pull/3174) - GoodsAction: 新增 safe-area-inset-bottom 属性 [\#3174](https://github.com/youzan/vant/pull/3174)
- Actionsheet: 新增 safe-area-inset-bottom 属性 [\#3171](https://github.com/youzan/vant/pull/3171) - ActionSheet: 新增 safe-area-inset-bottom 属性 [\#3171](https://github.com/youzan/vant/pull/3171)
- NumberKeyboard: 新增 safe-area-inset-bottom 属性 [\#3173](https://github.com/youzan/vant/pull/3173) - NumberKeyboard: 新增 safe-area-inset-bottom 属性 [\#3173](https://github.com/youzan/vant/pull/3173)
**Bug Fixes** **Bug Fixes**
@ -55,7 +55,7 @@
- Cell: 新增多个 Less 变量 [\#3122](https://github.com/youzan/vant/pull/3122) - Cell: 新增多个 Less 变量 [\#3122](https://github.com/youzan/vant/pull/3122)
- Rate: 新增多个 Less 变量 [\#3135](https://github.com/youzan/vant/pull/3135) - Rate: 新增多个 Less 变量 [\#3135](https://github.com/youzan/vant/pull/3135)
- Panel: 新增多个 Less 变量 [\#3136](https://github.com/youzan/vant/pull/3136) - Panel: 新增多个 Less 变量 [\#3136](https://github.com/youzan/vant/pull/3136)
- Badge: 新增多个 Less 变量 [\#3131](https://github.com/youzan/vant/pull/3131) - Sidebar: 新增多个 Less 变量 [\#3131](https://github.com/youzan/vant/pull/3131)
- Dialog: 新增多个 Less 变量 [\#3123](https://github.com/youzan/vant/pull/3123) - Dialog: 新增多个 Less 变量 [\#3123](https://github.com/youzan/vant/pull/3123)
- Slider: 新增多个 Less 变量 [\#3125](https://github.com/youzan/vant/pull/3125) - Slider: 新增多个 Less 变量 [\#3125](https://github.com/youzan/vant/pull/3125)
- Tabbar: 新增多个 Less 变量 [\#3124](https://github.com/youzan/vant/pull/3124) - Tabbar: 新增多个 Less 变量 [\#3124](https://github.com/youzan/vant/pull/3124)
@ -89,7 +89,7 @@
**Improvements** **Improvements**
- Actionsheet: 新增 less 变量 [\#3049](https://github.com/youzan/vant/pull/3049) - ActionSheet: 新增 less 变量 [\#3049](https://github.com/youzan/vant/pull/3049)
**Bug Fixes** **Bug Fixes**
@ -112,7 +112,7 @@
- NoticeBar: 新增 wrapable 属性 [\#2992](https://github.com/youzan/vant/pull/2992) - NoticeBar: 新增 wrapable 属性 [\#2992](https://github.com/youzan/vant/pull/2992)
- Field: 新增 error-message-align 属性 [\#3016](https://github.com/youzan/vant/pull/3016) - Field: 新增 error-message-align 属性 [\#3016](https://github.com/youzan/vant/pull/3016)
- Sku: 支持在初始化时设置选中商品数量 [\#3045](https://github.com/youzan/vant/pull/3045) - Sku: 支持在初始化时设置选中商品数量 [\#3045](https://github.com/youzan/vant/pull/3045)
- Actionsheet: 支持同时设置默认插槽和 cancel-text [\#3021](https://github.com/youzan/vant/pull/3021) - ActionSheet: 支持同时设置默认插槽和 cancel-text [\#3021](https://github.com/youzan/vant/pull/3021)
**Bug Fixes** **Bug Fixes**
@ -152,7 +152,7 @@
- CellGroup: 新增 title 属性 [\#2928](https://github.com/youzan/vant/pull/2928) - CellGroup: 新增 title 属性 [\#2928](https://github.com/youzan/vant/pull/2928)
- Steps: 新增 active-icon 属性 [\#2934](https://github.com/youzan/vant/pull/2934) - Steps: 新增 active-icon 属性 [\#2934](https://github.com/youzan/vant/pull/2934)
- Picker: 新增 default-index 属性 [\#2935](https://github.com/youzan/vant/pull/2935) - Picker: 新增 default-index 属性 [\#2935](https://github.com/youzan/vant/pull/2935)
- Actionsheet: 新增 index 作为 select 事件的回调参数 [\#2917](https://github.com/youzan/vant/pull/2917) - ActionSheet: 新增 index 作为 select 事件的回调参数 [\#2917](https://github.com/youzan/vant/pull/2917)
**Bug Fixes** **Bug Fixes**
@ -188,8 +188,8 @@
**Bug Fixes** **Bug Fixes**
- 修复 Actionsheet lazy-render 属性不生效的问题 [\#2840](https://github.com/youzan/vant/pull/2840) - 修复 ActionSheet lazy-render 属性不生效的问题 [\#2840](https://github.com/youzan/vant/pull/2840)
- 修复 Actionsheet get-container 属性不生效的问题 [\#2853](https://github.com/youzan/vant/pull/2853) - 修复 ActionSheet get-container 属性不生效的问题 [\#2853](https://github.com/youzan/vant/pull/2853)
- 修复 Tab 初始化时导航栏未自动滚动到当前标签位置的问题 [\#2857](https://github.com/youzan/vant/pull/2857) - 修复 Tab 初始化时导航栏未自动滚动到当前标签位置的问题 [\#2857](https://github.com/youzan/vant/pull/2857)
- 修复 Checkbox 与 Cell 组件嵌套用法在 Vue 2.6+ 上的兼容问题 [\#2855](https://github.com/youzan/vant/pull/2855) - 修复 Checkbox 与 Cell 组件嵌套用法在 Vue 2.6+ 上的兼容问题 [\#2855](https://github.com/youzan/vant/pull/2855)
- 修复 CouponList 不可用券列表为空时展示错误的问题 [\#2845](https://github.com/youzan/vant/pull/2845) - 修复 CouponList 不可用券列表为空时展示错误的问题 [\#2845](https://github.com/youzan/vant/pull/2845)
@ -555,7 +555,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
- Tab: 新增 animated 属性 [\#2126](https://github.com/youzan/vant/pull/2126) - Tab: 新增 animated 属性 [\#2126](https://github.com/youzan/vant/pull/2126)
- Tab: 更新标题栏样式 [\#2120](https://github.com/youzan/vant/pull/2120) - Tab: 更新标题栏样式 [\#2120](https://github.com/youzan/vant/pull/2120)
- Badge: 更新提示样式 [\#2122](https://github.com/youzan/vant/pull/2122) - Sidebar: 更新提示样式 [\#2122](https://github.com/youzan/vant/pull/2122)
- Radio: 新增 checked-color 属性 [\#2129](https://github.com/youzan/vant/pull/2129) - Radio: 新增 checked-color 属性 [\#2129](https://github.com/youzan/vant/pull/2129)
- Swipe: 新增 indica为r-color 属性 [\#2110](https://github.com/youzan/vant/pull/2110) - Swipe: 新增 indica为r-color 属性 [\#2110](https://github.com/youzan/vant/pull/2110)
- TreeSelect: 支持禁用选项 [\#2107](https://github.com/youzan/vant/pull/2107) - TreeSelect: 支持禁用选项 [\#2107](https://github.com/youzan/vant/pull/2107)
@ -616,7 +616,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
- i18n: 支持土耳其语 [\#1998](https://github.com/youzan/vant/pull/1998) - i18n: 支持土耳其语 [\#1998](https://github.com/youzan/vant/pull/1998)
- i18n: 支持繁体中文（台） [\#1999](https://github.com/youzan/vant/pull/1999) - i18n: 支持繁体中文（台） [\#1999](https://github.com/youzan/vant/pull/1999)
- Icon: 新增 question2 图标 [\#2005](https://github.com/youzan/vant/pull/2005) - Icon: 新增 question2 图标 [\#2005](https://github.com/youzan/vant/pull/2005)
- Badge: 新增 change 事件 [\#2017](https://github.com/youzan/vant/pull/2017) - Sidebar: 新增 change 事件 [\#2017](https://github.com/youzan/vant/pull/2017)
- Switch: 新增 active-color 属性 [\#2013](https://github.com/youzan/vant/pull/2013) - Switch: 新增 active-color 属性 [\#2013](https://github.com/youzan/vant/pull/2013)
- Switch: 新增 inactive-color 属性 [\#2013](https://github.com/youzan/vant/pull/2013) - Switch: 新增 inactive-color 属性 [\#2013](https://github.com/youzan/vant/pull/2013)
- Radio: 选中态颜色调整为蓝色 [\#2018](https://github.com/youzan/vant/pull/2018) - Radio: 选中态颜色调整为蓝色 [\#2018](https://github.com/youzan/vant/pull/2018)
@ -710,7 +710,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
**Improvements** **Improvements**
- Tab: 样式升级 [\#1908](https://github.com/youzan/vant/pull/1908) - Tab: 样式升级 [\#1908](https://github.com/youzan/vant/pull/1908)
- Badge: 样式升级 [\#1907](https://github.com/youzan/vant/pull/1907) - Sidebar: 样式升级 [\#1907](https://github.com/youzan/vant/pull/1907)
- Dialog: 样式升级 [\#1906](https://github.com/youzan/vant/pull/1906) - Dialog: 样式升级 [\#1906](https://github.com/youzan/vant/pull/1906)
- NoticeBar: 样式升级 [\#1893](https://github.com/youzan/vant/pull/1893) - NoticeBar: 样式升级 [\#1893](https://github.com/youzan/vant/pull/1893)
- Collapse: 新增 disabled 属性 [\#1892](https://github.com/youzan/vant/pull/1892) - Collapse: 新增 disabled 属性 [\#1892](https://github.com/youzan/vant/pull/1892)
@ -875,14 +875,14 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
**Improvements** **Improvements**
- Actionsheet: 新增 select 事件 [\#1594](https://github.com/youzan/vant/pull/1594) - ActionSheet: 新增 select 事件 [\#1594](https://github.com/youzan/vant/pull/1594)
- ImagePreview: 支持传入 onClose 回调函数 [\#1589](https://github.com/youzan/vant/pull/1589) - ImagePreview: 支持传入 onClose 回调函数 [\#1589](https://github.com/youzan/vant/pull/1589)
- List: 新增 check 方法 [\#1590](https://github.com/youzan/vant/pull/1590) - List: 新增 check 方法 [\#1590](https://github.com/youzan/vant/pull/1590)
- Search: 优化样式结构 [\#1603](https://github.com/youzan/vant/pull/1603) - Search: 优化样式结构 [\#1603](https://github.com/youzan/vant/pull/1603)
**Bug Fixes** **Bug Fixes**
- 修复 Actionsheet 选项加载中时仍然有点击态的问题 [\#1587](https://github.com/youzan/vant/pull/1587) - 修复 ActionSheet 选项加载中时仍然有点击态的问题 [\#1587](https://github.com/youzan/vant/pull/1587)
- 修复 DatetimePicker 使用 formatter 时默认值错误的问题 [\#1591](https://github.com/youzan/vant/pull/1591) - 修复 DatetimePicker 使用 formatter 时默认值错误的问题 [\#1591](https://github.com/youzan/vant/pull/1591)
@ -970,7 +970,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
**Improvements** **Improvements**
- Actionsheet: 支持 lazy-render [\#1365](https://github.com/youzan/vant/pull/1365) - ActionSheet: 支持 lazy-render [\#1365](https://github.com/youzan/vant/pull/1365)
- AddressEdit: 优化事件触发顺序 [\#1402](https://github.com/youzan/vant/pull/1402) - AddressEdit: 优化事件触发顺序 [\#1402](https://github.com/youzan/vant/pull/1402)
- SwitchCell: 新增 size 属性 [\#1371](https://github.com/youzan/vant/pull/1371) - SwitchCell: 新增 size 属性 [\#1371](https://github.com/youzan/vant/pull/1371)
- Checkbox: 新增 label-position 属性 [\#1394](https://github.com/youzan/vant/pull/1394) - Checkbox: 新增 label-position 属性 [\#1394](https://github.com/youzan/vant/pull/1394)
@ -1015,7 +1015,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
**Improvements** **Improvements**
- Actionsheet: 支持禁用选项 [\#1293](https://github.com/youzan/vant/pull/1293) - ActionSheet: 支持禁用选项 [\#1293](https://github.com/youzan/vant/pull/1293)
- Field: 支持展示清除控件 [\#1309](https://github.com/youzan/vant/pull/1309) - Field: 支持展示清除控件 [\#1309](https://github.com/youzan/vant/pull/1309)
- Layout: 支持 Flex 布局 [\#1305](https://github.com/youzan/vant/pull/1305) - Layout: 支持 Flex 布局 [\#1305](https://github.com/youzan/vant/pull/1305)
- Locale: 新增 TS 类型定义 [\#1294](https://github.com/youzan/vant/pull/1294) - Locale: 新增 TS 类型定义 [\#1294](https://github.com/youzan/vant/pull/1294)
@ -1046,7 +1046,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
**Bug Fixes** **Bug Fixes**
- 修复 Actionsheet 在 rem 布局下标题文字大小错误的问题 [\#1267](https://github.com/youzan/vant/pull/1267) - 修复 ActionSheet 在 rem 布局下标题文字大小错误的问题 [\#1267](https://github.com/youzan/vant/pull/1267)
- 修复 CheckboxGroup v-model 类型检查错误 [\#1254](https://github.com/youzan/vant/pull/1254) - 修复 CheckboxGroup v-model 类型检查错误 [\#1254](https://github.com/youzan/vant/pull/1254)
- 修复 Tab 标题长度变化时底部条未重新渲染的问题 [\#1260](https://github.com/youzan/vant/pull/1260) - 修复 Tab 标题长度变化时底部条未重新渲染的问题 [\#1260](https://github.com/youzan/vant/pull/1260)
- 修复 Popup 内容过高时超出屏幕可视范围的问题 [\#1256](https://github.com/youzan/vant/pull/1256) - 修复 Popup 内容过高时超出屏幕可视范围的问题 [\#1256](https://github.com/youzan/vant/pull/1256)
@ -1269,8 +1269,8 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
**Improvements** **Improvements**
- Actionsheet: 新增 cancel 事件 [\#796](https://github.com/youzan/vant/pull/796) - ActionSheet: 新增 cancel 事件 [\#796](https://github.com/youzan/vant/pull/796)
- Actionsheet: 增加最大高度限制 [\#777](https://github.com/youzan/vant/pull/777) - ActionSheet: 增加最大高度限制 [\#777](https://github.com/youzan/vant/pull/777)
- DatetimePicker: 支持所有 picker 组件配置 [\#788](https://github.com/youzan/vant/pull/788) - DatetimePicker: 支持所有 picker 组件配置 [\#788](https://github.com/youzan/vant/pull/788)
- SubmitBar: 统一文字大小 [\#774](https://github.com/youzan/vant/pull/774) - SubmitBar: 统一文字大小 [\#774](https://github.com/youzan/vant/pull/774)
- i18n: 支持 zh-HK 语言 [\#812](https://github.com/youzan/vant/pull/812) - i18n: 支持 zh-HK 语言 [\#812](https://github.com/youzan/vant/pull/812)
@ -1353,10 +1353,10 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
**Bug Fixes** **Bug Fixes**
* 修复 Actionsheet 下边框未展示的问题 [\#686](https://github.com/youzan/vant/pull/686) * 修复 ActionSheet 下边框未展示的问题 [\#686](https://github.com/youzan/vant/pull/686)
* 修复 AddressEdit 在数据变更时未正确选中省市区的问题 [\#680](https://github.com/youzan/vant/pull/680) * 修复 AddressEdit 在数据变更时未正确选中省市区的问题 [\#680](https://github.com/youzan/vant/pull/680)
* 修复 Stepper value 溢出的问题 [\#691](https://github.com/youzan/vant/issues/691) * 修复 Stepper value 溢出的问题 [\#691](https://github.com/youzan/vant/issues/691)
* 修复 Badge 选中时字体粗细 [\#687](https://github.com/youzan/vant/pull/687) * 修复 Sidebar 选中时字体粗细 [\#687](https://github.com/youzan/vant/pull/687)
## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14) ## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14)
`2018-03-09` `2018-03-09`
@ -1644,7 +1644,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
* Search: 支持 input 标签原生属性 [\#418](https://github.com/youzan/vant/pull/418) * Search: 支持 input 标签原生属性 [\#418](https://github.com/youzan/vant/pull/418)
* CellGroup: 新增 'border' 属性 [\#420](https://github.com/youzan/vant/pull/420) * CellGroup: 新增 'border' 属性 [\#420](https://github.com/youzan/vant/pull/420)
* AddressEdit: 新增 focus、change-area、select-search 事件 [\#426](https://github.com/youzan/vant/pull/426) * AddressEdit: 新增 focus、change-area、select-search 事件 [\#426](https://github.com/youzan/vant/pull/426)
* Badge、CouponList、ContactCard: 增加点击反馈 [\#419](https://github.com/youzan/vant/pull/419) * Sidebar、CouponList、ContactCard: 增加点击反馈 [\#419](https://github.com/youzan/vant/pull/419)
**Bug Fixes** **Bug Fixes**
@ -1774,7 +1774,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
**Improvements** **Improvements**
* Actionsheet: 更新关闭按钮样式 [\#340](https://github.com/youzan/vant/pull/340) * ActionSheet: 更新关闭按钮样式 [\#340](https://github.com/youzan/vant/pull/340)
* Popup: 新增 overlayClass、overlayStyle 属性 [\#349](https://github.com/youzan/vant/pull/349) [\#343](https://github.com/youzan/vant/pull/343) * Popup: 新增 overlayClass、overlayStyle 属性 [\#349](https://github.com/youzan/vant/pull/349) [\#343](https://github.com/youzan/vant/pull/343)
* Icon: 调整 unicode，避免展示特殊字符 [\#330](https://github.com/youzan/vant/pull/330) * Icon: 调整 unicode，避免展示特殊字符 [\#330](https://github.com/youzan/vant/pull/330)
* ImagePreview: 支持手动关闭 [\#346](https://github.com/youzan/vant/pull/346) * ImagePreview: 支持手动关闭 [\#346](https://github.com/youzan/vant/pull/346)
@ -2126,7 +2126,7 @@ PS: 不小心跳过了 1.4.6 版本 ^_^
* 新增 GoodsAction 组件 [\#102](https://github.com/youzan/vant/pull/102) * 新增 GoodsAction 组件 [\#102](https://github.com/youzan/vant/pull/102)
* 新增 OrderGoods 组件 [\#99](https://github.com/youzan/vant/pull/99) * 新增 OrderGoods 组件 [\#99](https://github.com/youzan/vant/pull/99)
* 新增 PayOrder 组件 [\#98](https://github.com/youzan/vant/pull/98) * 新增 PayOrder 组件 [\#98](https://github.com/youzan/vant/pull/98)
* 优化 Step、Loading、Tag、Badge 文档 [\#101](https://github.com/youzan/vant/pull/101) * 优化 Step、Loading、Tag、Sidebar 文档 [\#101](https://github.com/youzan/vant/pull/101)
* Checkbox: 支持 change 事件 [\#104](https://github.com/youzan/vant/pull/104) * Checkbox: 支持 change 事件 [\#104](https://github.com/youzan/vant/pull/104)
**Bug Fixes** **Bug Fixes**

52
docs/markdown/v2-progress-tracking.md Normal file
View File

@ -0,0 +1,52 @@
## Vant 2.0 改动一览
## 不兼容更新
在 2.0 版本中，我们对组件和 API 进行重命名，以更加符合业界的命名规范，同时移除了少量不常用的属性，具体改动如下：
### Actionsheet
- [x] 重命名为`ActionSheet`
### Button
- [x] 移除`bottom-action`属性，请使用`square`和`size`代替
### Field
- [x] 移除`on-icon-click`属性，请使用`click-right-icon`事件代替
- [x] `icon`属性重命名为`right-icon`
- [x] `icon`插槽重命名为`right-icon`
- [x] `click-icon`事件重命名为`click-right-icon`
### GoodsAction
- [x] `GoodsActionBigBtn`重命名为`GoodsActionButton`
- [x] `GoodsActionMiniBtn`重命名为`GoodsActionIcon`
- [x] `GoodsActionBigBtn`移除`primary`属性，请使用`type`属性代替
### Step
- [x] 移除`icon`属性
- [x] 移除`title`属性
- [x] 移除`icon-class`属性
- [x] 移除`description`属性
- [x] 移除`message-extra`插槽
### Badge
- [x] `BadgeGroup`重命名为`Sidebar`
- [x] `Badge`重命名为`SlideBarItem`
### Loading
- [x] 移除`circle`类型
- [x] 移除`gradient-circle`类型
### Waterfall
- [x] 彻底移除在 1.0 版本废弃的 Waterfall 组件，请使用`List`组件代替，或使用独立的[@vant/waterfall](https://github.com/chenjiahan/vant-waterfall)包。
## 新特性
TODO

7
docs/src/demo-entry.js
View File

@ -3,11 +3,10 @@
import { wrapper } from './demo-common'; import { wrapper } from './demo-common';
export default { export default {
'actionsheet': () => wrapper(import('../../packages/actionsheet/demo'), 'actionsheet'), 'action-sheet': () => wrapper(import('../../packages/action-sheet/demo'), 'action-sheet'),
'address-edit': () => wrapper(import('../../packages/address-edit/demo'), 'address-edit'), 'address-edit': () => wrapper(import('../../packages/address-edit/demo'), 'address-edit'),
'address-list': () => wrapper(import('../../packages/address-list/demo'), 'address-list'), 'address-list': () => wrapper(import('../../packages/address-list/demo'), 'address-list'),
'area': () => wrapper(import('../../packages/area/demo'), 'area'), 'area': () => wrapper(import('../../packages/area/demo'), 'area'),
'badge': () => wrapper(import('../../packages/badge/demo'), 'badge'),
'button': () => wrapper(import('../../packages/button/demo'), 'button'), 'button': () => wrapper(import('../../packages/button/demo'), 'button'),
'card': () => wrapper(import('../../packages/card/demo'), 'card'), 'card': () => wrapper(import('../../packages/card/demo'), 'card'),
'cell': () => wrapper(import('../../packages/cell/demo'), 'cell'), 'cell': () => wrapper(import('../../packages/cell/demo'), 'cell'),
@ -40,6 +39,7 @@ export default {
'radio': () => wrapper(import('../../packages/radio/demo'), 'radio'), 'radio': () => wrapper(import('../../packages/radio/demo'), 'radio'),
'rate': () => wrapper(import('../../packages/rate/demo'), 'rate'), 'rate': () => wrapper(import('../../packages/rate/demo'), 'rate'),
'search': () => wrapper(import('../../packages/search/demo'), 'search'), 'search': () => wrapper(import('../../packages/search/demo'), 'search'),
'sidebar': () => wrapper(import('../../packages/sidebar/demo'), 'sidebar'),
'sku': () => wrapper(import('../../packages/sku/demo'), 'sku'), 'sku': () => wrapper(import('../../packages/sku/demo'), 'sku'),
'slider': () => wrapper(import('../../packages/slider/demo'), 'slider'), 'slider': () => wrapper(import('../../packages/slider/demo'), 'slider'),
'stepper': () => wrapper(import('../../packages/stepper/demo'), 'stepper'), 'stepper': () => wrapper(import('../../packages/stepper/demo'), 'stepper'),
@ -55,6 +55,5 @@ export default {
'tag': () => wrapper(import('../../packages/tag/demo'), 'tag'), 'tag': () => wrapper(import('../../packages/tag/demo'), 'tag'),
'toast': () => wrapper(import('../../packages/toast/demo'), 'toast'), 'toast': () => wrapper(import('../../packages/toast/demo'), 'toast'),
'tree-select': () => wrapper(import('../../packages/tree-select/demo'), 'tree-select'), 'tree-select': () => wrapper(import('../../packages/tree-select/demo'), 'tree-select'),
'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader'), 'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader')
'waterfall': () => wrapper(import('../../packages/waterfall/demo'), 'waterfall')
}; };

24
docs/src/doc.config.js
View File

@ -168,8 +168,8 @@ module.exports = {
icon: 'passed', icon: 'passed',
list: [ list: [
{ {
path: '/actionsheet', path: '/action-sheet',
title: 'Actionsheet 上拉菜单' title: 'ActionSheet 上拉菜单'
}, },
{ {
path: '/dialog', path: '/dialog',
@ -251,10 +251,6 @@ module.exports = {
groupName: '导航组件', groupName: '导航组件',
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg', icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
list: [ list: [
{
path: '/badge',
title: 'Badge 徽章'
},
{ {
path: '/nav-bar', path: '/nav-bar',
title: 'NavBar 导航栏' title: 'NavBar 导航栏'
@ -263,6 +259,10 @@ module.exports = {
path: '/pagination', path: '/pagination',
title: 'Pagination 分页' title: 'Pagination 分页'
}, },
{
path: '/sidebar',
title: 'Sidebar 侧边导航'
},
{ {
path: '/tab', path: '/tab',
title: 'Tab 标签页' title: 'Tab 标签页'
@ -475,8 +475,8 @@ module.exports = {
icon: 'passed', icon: 'passed',
list: [ list: [
{ {
path: '/actionsheet', path: '/action-sheet',
title: 'Actionsheet' title: 'ActionSheet'
}, },
{ {
path: '/dialog', path: '/dialog',
@ -558,10 +558,6 @@ module.exports = {
groupName: 'Navigation Components', groupName: 'Navigation Components',
icon: 'https://img.yzcdn.cn/vant/nav-0401.svg', icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
list: [ list: [
{
path: '/badge',
title: 'Badge'
},
{ {
path: '/nav-bar', path: '/nav-bar',
title: 'NavBar' title: 'NavBar'
@ -570,6 +566,10 @@ module.exports = {
path: '/pagination', path: '/pagination',
title: 'Pagination' title: 'Pagination'
}, },
{
path: '/sidebar',
title: 'Sidebar'
},
{ {
path: '/tab', path: '/tab',
title: 'Tab' title: 'Tab'

13
docs/src/docs-entry.js
View File

@ -12,16 +12,15 @@ export default {
'style-guide.zh-CN': () => import('../markdown/style-guide.zh-CN.md'), 'style-guide.zh-CN': () => import('../markdown/style-guide.zh-CN.md'),
'theme.en-US': () => import('../markdown/theme.en-US.md'), 'theme.en-US': () => import('../markdown/theme.en-US.md'),
'theme.zh-CN': () => import('../markdown/theme.zh-CN.md'), 'theme.zh-CN': () => import('../markdown/theme.zh-CN.md'),
'actionsheet.en-US': () => import('../../packages/actionsheet/en-US.md'), 'v2-progress-tracking': () => import('../markdown/v2-progress-tracking.md'),
'actionsheet.zh-CN': () => import('../../packages/actionsheet/zh-CN.md'), 'action-sheet.en-US': () => import('../../packages/action-sheet/en-US.md'),
'action-sheet.zh-CN': () => import('../../packages/action-sheet/zh-CN.md'),
'address-edit.en-US': () => import('../../packages/address-edit/en-US.md'), 'address-edit.en-US': () => import('../../packages/address-edit/en-US.md'),
'address-edit.zh-CN': () => import('../../packages/address-edit/zh-CN.md'), 'address-edit.zh-CN': () => import('../../packages/address-edit/zh-CN.md'),
'address-list.en-US': () => import('../../packages/address-list/en-US.md'), 'address-list.en-US': () => import('../../packages/address-list/en-US.md'),
'address-list.zh-CN': () => import('../../packages/address-list/zh-CN.md'), 'address-list.zh-CN': () => import('../../packages/address-list/zh-CN.md'),
'area.en-US': () => import('../../packages/area/en-US.md'), 'area.en-US': () => import('../../packages/area/en-US.md'),
'area.zh-CN': () => import('../../packages/area/zh-CN.md'), 'area.zh-CN': () => import('../../packages/area/zh-CN.md'),
'badge.en-US': () => import('../../packages/badge/en-US.md'),
'badge.zh-CN': () => import('../../packages/badge/zh-CN.md'),
'button.en-US': () => import('../../packages/button/en-US.md'), 'button.en-US': () => import('../../packages/button/en-US.md'),
'button.zh-CN': () => import('../../packages/button/zh-CN.md'), 'button.zh-CN': () => import('../../packages/button/zh-CN.md'),
'card.en-US': () => import('../../packages/card/en-US.md'), 'card.en-US': () => import('../../packages/card/en-US.md'),
@ -88,6 +87,8 @@ export default {
'rate.zh-CN': () => import('../../packages/rate/zh-CN.md'), 'rate.zh-CN': () => import('../../packages/rate/zh-CN.md'),
'search.en-US': () => import('../../packages/search/en-US.md'), 'search.en-US': () => import('../../packages/search/en-US.md'),
'search.zh-CN': () => import('../../packages/search/zh-CN.md'), 'search.zh-CN': () => import('../../packages/search/zh-CN.md'),
'sidebar.en-US': () => import('../../packages/sidebar/en-US.md'),
'sidebar.zh-CN': () => import('../../packages/sidebar/zh-CN.md'),
'sku.en-US': () => import('../../packages/sku/en-US.md'), 'sku.en-US': () => import('../../packages/sku/en-US.md'),
'sku.zh-CN': () => import('../../packages/sku/zh-CN.md'), 'sku.zh-CN': () => import('../../packages/sku/zh-CN.md'),
'slider.en-US': () => import('../../packages/slider/en-US.md'), 'slider.en-US': () => import('../../packages/slider/en-US.md'),
@ -119,7 +120,5 @@ export default {
'tree-select.en-US': () => import('../../packages/tree-select/en-US.md'), 'tree-select.en-US': () => import('../../packages/tree-select/en-US.md'),
'tree-select.zh-CN': () => import('../../packages/tree-select/zh-CN.md'), 'tree-select.zh-CN': () => import('../../packages/tree-select/zh-CN.md'),
'uploader.en-US': () => import('../../packages/uploader/en-US.md'), 'uploader.en-US': () => import('../../packages/uploader/en-US.md'),
'uploader.zh-CN': () => import('../../packages/uploader/zh-CN.md'), 'uploader.zh-CN': () => import('../../packages/uploader/zh-CN.md')
'waterfall.en-US': () => import('../../packages/waterfall/en-US.md'),
'waterfall.zh-CN': () => import('../../packages/waterfall/zh-CN.md')
}; };

3
jest.config.js
View File

@ -15,8 +15,7 @@ module.exports = {
'!**/style/**', '!**/style/**',
'!**/demo/**', '!**/demo/**',
'!**/locale/lang/**', '!**/locale/lang/**',
'!**/sku/**', '!**/sku/**'
'!**/waterfall/**'
], ],
collectCoverage: true, collectCoverage: true,
coverageReporters: ['html', 'lcov', 'text-summary'], coverageReporters: ['html', 'lcov', 'text-summary'],

30
packages/actionsheet/demo/index.vue → packages/action-sheet/demo/index.vue
View File

@ -2,7 +2,7 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-button @click="show1 = true">{{ $t('button1') }}</van-button> <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
<van-actionsheet <van-action-sheet
v-model="show1" v-model="show1"
:actions="actions" :actions="actions"
@select="onSelect" @select="onSelect"
@ -11,7 +11,7 @@
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-button @click="show2 = true">{{ $t('button2') }}</van-button> <van-button @click="show2 = true">{{ $t('button2') }}</van-button>
<van-actionsheet <van-action-sheet
v-model="show2" v-model="show2"
:actions="actions" :actions="actions"
:cancel-text="$t('cancel')" :cancel-text="$t('cancel')"
@ -22,12 +22,12 @@
<demo-block :title="$t('title3')"> <demo-block :title="$t('title3')">
<van-button @click="show3 = true">{{ $t('button3') }}</van-button> <van-button @click="show3 = true">{{ $t('button3') }}</van-button>
<van-actionsheet <van-action-sheet
v-model="show3" v-model="show3"
:title="$t('title')" :title="$t('title')"
> >
<p>{{ $t('content') }}</p> <p>{{ $t('content') }}</p>
</van-actionsheet> </van-action-sheet>
</demo-block> </demo-block>
</demo-section> </demo-section>
</template> </template>
@ -36,20 +36,20 @@
export default { export default {
i18n: { i18n: {
'zh-CN': { 'zh-CN': {
button1: '弹出 Actionsheet', button1: '弹出 ActionSheet',
button2: '弹出带取消按钮的 Actionsheet', button2: '弹出带取消按钮的 ActionSheet',
button3: '弹出带标题的 Actionsheet', button3: '弹出带标题的 ActionSheet',
title2: '带取消按钮的 Actionsheet', title2: '带取消按钮的 ActionSheet',
title3: '带标题的 Actionsheet', title3: '带标题的 ActionSheet',
description: '描述信息', description: '描述信息',
disabledOption: '禁用选项' disabledOption: '禁用选项'
}, },
'en-US': { 'en-US': {
button1: 'Show Actionsheet', button1: 'Show ActionSheet',
button2: 'Show Actionsheet with cancel button', button2: 'Show ActionSheet with cancel button',
button3: 'Show Actionsheet with title', button3: 'Show ActionSheet with title',
title2: 'Actionsheet with cancel button', title2: 'ActionSheet with cancel button',
title3: 'Actionsheet with title', title3: 'ActionSheet with title',
description: 'Description', description: 'Description',
disabledOption: 'Disabled Option' disabledOption: 'Disabled Option'
} }
@ -89,7 +89,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.demo-actionsheet { .demo-action-sheet {
.van-button { .van-button {
margin-left: 15px; margin-left: 15px;
} }

24
packages/actionsheet/en-US.md → packages/action-sheet/en-US.md
View File

@ -1,19 +1,19 @@
## Actionsheet ## ActionSheet
### Install ### Install
``` javascript ``` javascript
import { Actionsheet } from 'vant'; import { ActionSheet } from 'vant';
Vue.use(Actionsheet); Vue.use(ActionSheet);
``` ```
### Usage ### Usage
#### Basic Usage #### Basic Usage
Use `actions` prop to set options of actionsheet. Use `actions` prop to set options of action-sheet.
```html ```html
<van-actionsheet <van-action-sheet
v-model="show" v-model="show"
:actions="actions" :actions="actions"
@select="onSelect" @select="onSelect"
@ -53,10 +53,10 @@ export default {
} }
``` ```
#### Actionsheet with cancel button #### ActionSheet with cancel button
```html ```html
<van-actionsheet <van-action-sheet
v-model="show" v-model="show"
:actions="actions" :actions="actions"
cancel-text="Cancel" cancel-text="Cancel"
@ -65,13 +65,13 @@ export default {
/> />
``` ```
#### Actionsheet with title #### ActionSheet with title
Actionsheet will get another style if there is a `title` prop. ActionSheet will get another style if there is a `title` prop.
```html ```html
<van-actionsheet v-model="show" title="Title"> <van-action-sheet v-model="show" title="Title">
<p>Content</p> <p>Content</p>
</van-actionsheet> </van-action-sheet>
``` ```
### API ### API
@ -84,7 +84,7 @@ Actionsheet will get another style if there is a `title` prop.
| overlay | Whether to show overlay | `Boolean` | `true` | | overlay | Whether to show overlay | `Boolean` | `true` |
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` | | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` | | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
| get-container | Return the mount node for actionsheet | `String | () => HTMLElement` | - | | get-container | Return the mount node for action-sheet | `String | () => HTMLElement` | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
### Event ### Event

2
packages/actionsheet/index.less → packages/action-sheet/index.less
View File

@ -1,6 +1,6 @@
@import '../style/var'; @import '../style/var';
.van-actionsheet { .van-action-sheet {
color: @action-sheet-item-text-color; color: @action-sheet-item-text-color;
max-height: @action-sheet-max-height; max-height: @action-sheet-max-height;

22
packages/actionsheet/index.tsx → packages/action-sheet/index.tsx
View File

@ -10,29 +10,29 @@ import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc'; import { DefaultSlots } from '../utils/use/sfc';
import { PopupMixinProps } from '../mixins/popup/type'; import { PopupMixinProps } from '../mixins/popup/type';
export type ActionsheetItem = { export type ActionSheetItem = {
name: string; name: string;
subname?: string; subname?: string;
loading?: boolean; loading?: boolean;
disabled?: boolean; disabled?: boolean;
className?: string; className?: string;
callback?: (item: ActionsheetItem) => void; callback?: (item: ActionSheetItem) => void;
}; };
export type ActionsheetProps = PopupMixinProps & { export type ActionSheetProps = PopupMixinProps & {
title?: string; title?: string;
actions: ActionsheetItem[]; actions: ActionSheetItem[];
cancelText?: string; cancelText?: string;
safeAreaInsetBottom?: boolean; safeAreaInsetBottom?: boolean;
}; };
const [sfc, bem] = use('actionsheet'); const [sfc, bem] = use('action-sheet');
function Actionsheet( function ActionSheet(
h: CreateElement, h: CreateElement,
props: ActionsheetProps, props: ActionSheetProps,
slots: DefaultSlots, slots: DefaultSlots,
ctx: RenderContext<ActionsheetProps> ctx: RenderContext<ActionSheetProps>
) { ) {
const { title, cancelText } = props; const { title, cancelText } = props;
@ -48,7 +48,7 @@ function Actionsheet(
</div> </div>
); );
const Option = (item: ActionsheetItem, index: number) => ( const Option = (item: ActionSheetItem, index: number) => (
<div <div
class={[ class={[
bem('item', { disabled: item.disabled || item.loading }), bem('item', { disabled: item.disabled || item.loading }),
@ -103,7 +103,7 @@ function Actionsheet(
); );
} }
Actionsheet.props = { ActionSheet.props = {
...PopupMixin.props, ...PopupMixin.props,
title: String, title: String,
actions: Array, actions: Array,
@ -119,4 +119,4 @@ Actionsheet.props = {
} }
}; };
export default sfc<ActionsheetProps>(Actionsheet); export default sfc<ActionSheetProps>(ActionSheet);

6
packages/actionsheet/test/__snapshots__/demo.spec.js.snap → packages/action-sheet/test/__snapshots__/demo.spec.js.snap
View File

@ -2,13 +2,13 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 Actionsheet</span></button> <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 ActionSheet</span></button>
<!----> <!---->
</div> </div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带取消按钮的 Actionsheet</span></button> <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带取消按钮的 ActionSheet</span></button>
<!----> <!---->
</div> </div>
<div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带标题的 Actionsheet</span></button> <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带标题的 ActionSheet</span></button>
<!----> <!---->
</div> </div>
</div> </div>

17
packages/action-sheet/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`callback events 1`] = `
<div class="van-popup van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
<div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
<div class="van-action-sheet__cancel">Cancel</div>
</div>
`;
exports[`disable lazy-render 1`] = `
<div class="van-popup van-popup--bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
<div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
<div class="van-action-sheet__cancel">Cancel</div>
</div>
`;

0
packages/actionsheet/test/demo.spec.js → packages/action-sheet/test/demo.spec.js
View File

12
packages/actionsheet/test/index.spec.js → packages/action-sheet/test/index.spec.js
View File

@ -1,5 +1,5 @@
import { mount } from '../../../test/utils'; import { mount } from '../../../test/utils';
import Actionsheet from '..'; import ActionSheet from '..';
test('callback events', () => { test('callback events', () => {
const callback = jest.fn(); const callback = jest.fn();
@ -12,7 +12,7 @@ test('callback events', () => {
{ name: 'Option', disabled: true } { name: 'Option', disabled: true }
]; ];
const wrapper = mount(Actionsheet, { const wrapper = mount(ActionSheet, {
propsData: { propsData: {
value: true, value: true,
actions, actions,
@ -27,10 +27,10 @@ test('callback events', () => {
} }
}); });
const options = wrapper.findAll('.van-actionsheet__item'); const options = wrapper.findAll('.van-action-sheet__item');
options.at(0).trigger('click'); options.at(0).trigger('click');
options.at(1).trigger('click'); options.at(1).trigger('click');
wrapper.find('.van-actionsheet__cancel').trigger('click'); wrapper.find('.van-action-sheet__cancel').trigger('click');
expect(callback).toHaveBeenCalled(); expect(callback).toHaveBeenCalled();
expect(onCancel).toHaveBeenCalled(); expect(onCancel).toHaveBeenCalled();
@ -40,7 +40,7 @@ test('callback events', () => {
}); });
test('disable lazy-render', () => { test('disable lazy-render', () => {
const wrapper = mount(Actionsheet, { const wrapper = mount(ActionSheet, {
propsData: { propsData: {
lazyRender: false, lazyRender: false,
actions: [ actions: [
@ -55,7 +55,7 @@ test('disable lazy-render', () => {
}); });
test('get container', () => { test('get container', () => {
const wrapper = mount(Actionsheet, { const wrapper = mount(ActionSheet, {
propsData: { propsData: {
value: true, value: true,
getContainer: 'body' getContainer: 'body'

22
packages/actionsheet/zh-CN.md → packages/action-sheet/zh-CN.md
View File

@ -1,10 +1,10 @@
## Actionsheet 上拉菜单 ## ActionSheet 上拉菜单
### 使用指南 ### 使用指南
``` javascript ``` javascript
import { Actionsheet } from 'vant'; import { ActionSheet } from 'vant';
Vue.use(Actionsheet); Vue.use(ActionSheet);
``` ```
### 代码演示 ### 代码演示
@ -14,7 +14,7 @@ Vue.use(Actionsheet);
需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。 需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
```html ```html
<van-actionsheet <van-action-sheet
v-model="show" v-model="show"
:actions="actions" :actions="actions"
@select="onSelect" @select="onSelect"
@ -55,12 +55,12 @@ export default {
} }
``` ```
#### 带取消按钮的 Actionsheet #### 带取消按钮的 ActionSheet
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。 如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
```html ```html
<van-actionsheet <van-action-sheet
v-model="show" v-model="show"
:actions="actions" :actions="actions"
cancel-text="取消" cancel-text="取消"
@ -69,14 +69,14 @@ export default {
/> />
``` ```
#### 带标题的 Actionsheet #### 带标题的 ActionSheet
如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。 如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
```html ```html
<van-actionsheet v-model="show" title="支持以下配送方式"> <van-action-sheet v-model="show" title="支持以下配送方式">
<p>一些内容</p> <p>一些内容</p>
</van-actionsheet> </van-action-sheet>
``` ```
### API ### API

17
packages/actionsheet/test/__snapshots__/index.spec.js.snap
View File

@ -1,17 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`callback events 1`] = `
<div class="van-popup van-popup--bottom van-actionsheet" name="van-popup-slide-bottom">
<div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
<div class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
<div class="van-actionsheet__cancel">Cancel</div>
</div>
`;
exports[`disable lazy-render 1`] = `
<div class="van-popup van-popup--bottom van-actionsheet" style="display: none;" name="van-popup-slide-bottom">
<div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
<div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
<div class="van-actionsheet__cancel">Cancel</div>
</div>
`;

2
packages/address-edit/test/__snapshots__/index.spec.js.snap
View File

@ -38,7 +38,7 @@ exports[`create a AddressEdit 1`] = `
<div class="van-picker__confirm">确认</div> <div class="van-picker__confirm">确认</div>
</div> </div>
<div class="van-picker__loading"> <div class="van-picker__loading">
<div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div> </div>
<div class="van-picker__columns" style="height:220px;"> <div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;"> <div class="van-picker-column" style="height:220px;">

5
packages/badge-group/index.less
View File

@ -1,5 +0,0 @@
@import '../style/var';
.badge-group {
width: @badge-group-width;
}

65
packages/badge/en-US.md
View File

@ -1,65 +0,0 @@
## Badge
### Install
``` javascript
import { Badge, BadgeGroup } from 'vant';
Vue.use(Badge);
Vue.use(BadgeGroup);
```
### Usage
#### Basic Usage
Use `active-key` prop to set index of chosen 'badge'
```html
<van-badge-group :active-key="activeKey" @change="onChange">
<van-badge title="Title" />
<van-badge title="Title" info="8" />
<van-badge title="Title" info="99" />
<van-badge title="Title" info="99+" />
</van-badge-group>
```
``` javascript
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onChange(key) {
this.activeKey = key;
}
}
};
```
### BadgeGroup API
| Attribute | Description | Type | Default |
|------|------|------|------|
| active-key | Index of chosen badge | `String | Number` | `0` |
### BadgeGroup Event
| Event | Description | Arguments |
|------|------|------|
| change | Triggered when badge changed | key: index of current badge |
### Badge API
| Attribute | Description | Type | Default |
|------|------|------|------|
| title | Content | `String` | `''` |
| info | Info Message | `String | Number` | `''` |
| url | Link | `String` | - |
### Badge Event
| Event | Description | Arguments |
|------|------|------|
| click | Triggered when click badge | key: index of current badge |

46
packages/badge/index.less
View File

@ -1,46 +0,0 @@
@import '../style/var';
.van-badge {
display: block;
overflow: hidden;
user-select: none;
word-break: break-all;
box-sizing: border-box;
color: @badge-text-color;
padding: @badge-padding;
font-size: @badge-font-size;
line-height: @badge-line-height;
background-color: @badge-background-color;
border-left: 3px solid transparent;
&__text {
position: relative;
}
&:active {
background-color: @badge-active-color;
}
&:not(:last-child)::after {
border-bottom-width: 1px;
}
&--select {
color: @badge-selected-text-color;
font-weight: @badge-selected-font-weight;
border-color: @badge-selected-border-color;
&::after {
border-right-width: 1px;
}
&,
&:active {
background-color: @badge-selected-background-color;
}
}
.van-info {
right: 4px;
}
}

22
packages/badge/test/__snapshots__/demo.spec.js.snap
View File

@ -1,22 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-badge-group van-hairline--top-bottom"><a class="van-badge van-badge--select van-hairline">
<div class="van-badge__text">标签名称
<!---->
</div>
</a> <a class="van-badge van-hairline">
<div class="van-badge__text">标签名称<div class="van-info van-badge__info">8</div>
</div>
</a> <a class="van-badge van-hairline">
<div class="van-badge__text">标签名称<div class="van-info van-badge__info">99</div>
</div>
</a> <a class="van-badge van-hairline">
<div class="van-badge__text">标签名称<div class="van-info van-badge__info">99+</div>
</div>
</a></div>
</div>
</div>
`;

66
packages/badge/zh-CN.md
View File

@ -1,66 +0,0 @@
## Badge 徽章
### 使用指南
``` javascript
import { Badge, BadgeGroup } from 'vant';
Vue.use(Badge);
Vue.use(BadgeGroup);
```
### 代码演示
#### 基础用法
通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
```html
<van-badge-group :active-key="activeKey" @change="onChange">
<van-badge title="标签名称" />
<van-badge title="标签名称" info="8" />
<van-badge title="标签名称" info="99" />
<van-badge title="标签名称" info="99+" />
</van-badge-group>
```
``` javascript
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onChange(key) {
this.activeKey = key;
}
}
};
```
### BadgeGroup API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
### BadgeGroup Event
| 事件名 | 说明 | 参数 |
|------|------|------|
| change | 切换徽章时触发 | key: 当前选中徽章的索引 |
### Badge API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| title | 内容 | `String` | `''` | - |
| info | 提示消息 | `String | Number` | `''` | - |
| url | 跳转链接 | `String` | - | - |
### Badge Event
| 事件名 | 说明 | 参数 |
|------|------|------|
| click | 点击徽章时触发 | key: 当前徽章的索引 |

15
packages/button/index.less
View File

@ -131,21 +131,6 @@
display: block; display: block;
} }
&--bottom-action {
border: 0;
width: 100%;
height: 50px;
font-size: 16px;
line-height: 50px;
border-radius: 0;
color: @button-bottom-action-default-color;
background-color: @button-bottom-action-default-background-color;
&.van-button--primary {
background-color: @button-bottom-action-primary-background-color;
}
}
&--disabled { &--disabled {
opacity: @button-disabled-opacity; opacity: @button-disabled-opacity;
} }

5
packages/button/index.tsx
View File

@ -26,7 +26,6 @@ export type ButtonProps = RouteProps & {
nativeType?: string; nativeType?: string;
loadingSize: string; loadingSize: string;
loadingText?: string; loadingText?: string;
bottomAction?: boolean;
}; };
export type ButtonEvents = { export type ButtonEvents = {
@ -65,8 +64,7 @@ function Button(
block: props.block, block: props.block,
plain: props.plain, plain: props.plain,
round: props.round, round: props.round,
square: props.square, square: props.square
'bottom-action': props.bottomAction
} }
]), ]),
{ 'van-hairline--surround': hairline } { 'van-hairline--surround': hairline }
@ -108,7 +106,6 @@ Button.props = {
disabled: Boolean, disabled: Boolean,
nativeType: String, nativeType: String,
loadingText: String, loadingText: String,
bottomAction: Boolean,
tag: { tag: {
type: String, type: String,
default: 'button' default: 'button'

2
packages/button/test/__snapshots__/index.spec.js.snap
View File

@ -2,6 +2,6 @@
exports[`loading size 1`] = ` exports[`loading size 1`] = `
<button class="van-button van-button--default van-button--normal van-button--loading"> <button class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</button> </button>
`; `;

8
packages/field/index.js
View File

@ -20,7 +20,6 @@ export default sfc({
labelWidth: [String, Number], labelWidth: [String, Number],
labelAlign: String, labelAlign: String,
inputAlign: String, inputAlign: String,
onIconClick: Function,
autosize: [Boolean, Object], autosize: [Boolean, Object],
errorMessage: String, errorMessage: String,
errorMessageAlign: String, errorMessageAlign: String,
@ -130,10 +129,7 @@ export default sfc({
}, },
onClickRightIcon() { onClickRightIcon() {
// compatible old version
this.$emit('click-icon');
this.$emit('click-right-icon'); this.$emit('click-right-icon');
this.onIconClick && this.onIconClick();
}, },
onClear(event) { onClear(event) {
@ -220,11 +216,11 @@ export default sfc({
renderRightIcon() { renderRightIcon() {
const { slots } = this; const { slots } = this;
const showRightIcon = slots('right-icon') || slots('icon') || this.rightIcon || this.icon; const showRightIcon = slots('right-icon') || this.rightIcon;
if (showRightIcon) { if (showRightIcon) {
return ( return (
<div class={bem('right-icon')} onClick={this.onClickRightIcon}> <div class={bem('right-icon')} onClick={this.onClickRightIcon}>
{slots('right-icon') || slots('icon') || <Icon name={this.rightIcon || this.icon} />} {slots('right-icon') || <Icon name={this.rightIcon} />}
</div> </div>
); );
} }

11
packages/field/test/__snapshots__/index.spec.js.snap
View File

@ -44,17 +44,6 @@ exports[`render label slot 1`] = `
</div> </div>
`; `;
exports[`render right icon with icon prop for old version 1`] = `
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone">
<div class="van-field__body"><input type="text" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-success">
<!----></i></div>
</div>
</div>
</div>
`;
exports[`render textarea 1`] = ` exports[`render textarea 1`] = `
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone"> <div class="van-cell__value van-cell__value--alone">

15
packages/field/test/index.spec.js
View File

@ -11,22 +11,18 @@ test('input event', () => {
}); });
test('click icon event', () => { test('click icon event', () => {
const onIconClick = jest.fn();
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {
value: 'a', value: 'a',
leftIcon: 'contact', leftIcon: 'contact',
rightIcon: 'search', rightIcon: 'search'
onIconClick
} }
}); });
wrapper.find('.van-field__left-icon').trigger('click'); wrapper.find('.van-field__left-icon').trigger('click');
wrapper.find('.van-field__right-icon').trigger('click'); wrapper.find('.van-field__right-icon').trigger('click');
expect(wrapper.emitted('click-icon')).toBeTruthy();
expect(wrapper.emitted('click-left-icon')).toBeTruthy(); expect(wrapper.emitted('click-left-icon')).toBeTruthy();
expect(wrapper.emitted('click-right-icon')).toBeTruthy(); expect(wrapper.emitted('click-right-icon')).toBeTruthy();
expect(onIconClick).toHaveBeenCalled();
}); });
test('keypress event', () => { test('keypress event', () => {
@ -179,15 +175,6 @@ test('render label slot', () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('render right icon with icon prop for old version', () => {
const wrapper = mount(Field, {
propsData: {
icon: 'success'
}
});
expect(wrapper).toMatchSnapshot();
});
test('size prop', () => { test('size prop', () => {
const wrapper = mount(Field, { const wrapper = mount(Field, {
propsData: { propsData: {

2
packages/goods-action-big-btn/index.less → packages/goods-action-button/index.less
View File

@ -1,6 +1,6 @@
@import '../style/var'; @import '../style/var';
.van-goods-action-big-btn { .van-goods-action-button {
flex: 1; flex: 1;
padding: 0; padding: 0;

21
packages/goods-action-big-btn/index.tsx → packages/goods-action-button/index.tsx
View File

@ -1,5 +1,5 @@
import { use } from '../utils'; import { use } from '../utils';
import Button, { ButtonEvents } from '../button'; import Button, { ButtonType, ButtonEvents } from '../button';
import { emit, inherit } from '../utils/functional'; import { emit, inherit } from '../utils/functional';
import { functionalRoute, routeProps, RouteProps } from '../utils/router'; import { functionalRoute, routeProps, RouteProps } from '../utils/router';
@ -7,20 +7,21 @@ import { functionalRoute, routeProps, RouteProps } from '../utils/router';
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc'; import { DefaultSlots } from '../utils/use/sfc';
export type GoodsActionBigBtnProps = RouteProps & { export type GoodsActionButtonProps = RouteProps & {
text?: string; text?: string;
type?: ButtonType;
primary?: boolean; primary?: boolean;
loading?: boolean; loading?: boolean;
disabled?: boolean; disabled?: boolean;
}; };
const [sfc, bem] = use('goods-action-big-btn'); const [sfc, bem] = use('goods-action-button');
function GoodsActionBigBtn( function GoodsActionButton(
h: CreateElement, h: CreateElement,
props: GoodsActionBigBtnProps, props: GoodsActionButtonProps,
slots: DefaultSlots, slots: DefaultSlots,
ctx: RenderContext<GoodsActionBigBtnProps> ctx: RenderContext<GoodsActionButtonProps>
) { ) {
const onClick = (event: Event) => { const onClick = (event: Event) => {
emit(ctx, 'click', event); emit(ctx, 'click', event);
@ -32,9 +33,9 @@ function GoodsActionBigBtn(
square square
class={bem()} class={bem()}
size="large" size="large"
type={props.type}
loading={props.loading} loading={props.loading}
disabled={props.disabled} disabled={props.disabled}
type={props.primary ? 'danger' : 'warning'}
onClick={onClick} onClick={onClick}
{...inherit(ctx)} {...inherit(ctx)}
> >
@ -43,12 +44,12 @@ function GoodsActionBigBtn(
); );
} }
GoodsActionBigBtn.props = { GoodsActionButton.props = {
...routeProps, ...routeProps,
type: String,
text: String, text: String,
primary: Boolean,
loading: Boolean, loading: Boolean,
disabled: Boolean disabled: Boolean
}; };
export default sfc<GoodsActionBigBtnProps, ButtonEvents>(GoodsActionBigBtn); export default sfc<GoodsActionButtonProps, ButtonEvents>(GoodsActionButton);

2
packages/goods-action-mini-btn/index.less → packages/goods-action-icon/index.less
View File

@ -1,6 +1,6 @@
@import '../style/var'; @import '../style/var';
.van-goods-action-mini-btn { .van-goods-action-icon {
color: @gray-darker; color: @gray-darker;
display: flex; display: flex;
height: 50px; height: 50px;

14
packages/goods-action-mini-btn/index.tsx → packages/goods-action-icon/index.tsx
View File

@ -7,20 +7,20 @@ import { functionalRoute, routeProps, RouteProps } from '../utils/router';
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext } from 'vue/types';
import { DefaultSlots } from '../utils/use/sfc'; import { DefaultSlots } from '../utils/use/sfc';
export type GoodsActionMiniBtnProps = RouteProps & { export type GoodsActionIconProps = RouteProps & {
icon: string; icon: string;
text?: string; text?: string;
info?: string | number; info?: string | number;
iconClass?: any; iconClass?: any;
}; };
const [sfc, bem] = use('goods-action-mini-btn'); const [sfc, bem] = use('goods-action-icon');
function GoodsActionMiniBtn( function GoodsActionIcon(
h: CreateElement, h: CreateElement,
props: GoodsActionMiniBtnProps, props: GoodsActionIconProps,
slots: DefaultSlots, slots: DefaultSlots,
ctx: RenderContext<GoodsActionMiniBtnProps> ctx: RenderContext<GoodsActionIconProps>
) { ) {
const onClick = (event: Event) => { const onClick = (event: Event) => {
emit(ctx, 'click', event); emit(ctx, 'click', event);
@ -40,7 +40,7 @@ function GoodsActionMiniBtn(
); );
} }
GoodsActionMiniBtn.props = { GoodsActionIcon.props = {
...routeProps, ...routeProps,
text: String, text: String,
icon: String, icon: String,
@ -48,4 +48,4 @@ GoodsActionMiniBtn.props = {
iconClass: null as any iconClass: null as any
}; };
export default sfc<GoodsActionMiniBtnProps, IconEvents>(GoodsActionMiniBtn); export default sfc<GoodsActionIconProps, IconEvents>(GoodsActionIcon);

46
packages/goods-action/demo/index.vue
View File

@ -2,54 +2,56 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
:text="$t('icon1')" :text="$t('icon1')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="cart-o" icon="cart-o"
:text="$t('icon2')" :text="$t('icon2')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-big-btn <van-goods-action-button
type="warning"
:text="$t('button1')" :text="$t('button1')"
@click="onClickBigBtn" @click="onClickButton"
/> />
<van-goods-action-big-btn <van-goods-action-button
primary type="danger"
:text="$t('button2')" :text="$t('button2')"
@click="onClickBigBtn" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
<demo-block :title="$t('title2')"> <demo-block :title="$t('title2')">
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
:text="$t('icon1')" :text="$t('icon1')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="cart-o" icon="cart-o"
info="5" info="5"
:text="$t('icon2')" :text="$t('icon2')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="shop-o" icon="shop-o"
:text="$t('icon3')" :text="$t('icon3')"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-big-btn <van-goods-action-button
type="warning"
:text="$t('button1')" :text="$t('button1')"
@click="onClickBigBtn" @click="onClickButton"
/> />
<van-goods-action-big-btn <van-goods-action-button
primary type="danger"
:text="$t('button2')" :text="$t('button2')"
@click="onClickBigBtn" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
</demo-block> </demo-block>
@ -82,11 +84,11 @@ export default {
}, },
methods: { methods: {
onClickMiniBtn() { onClickIcon() {
this.$toast(this.$t('clickIcon')); this.$toast(this.$t('clickIcon'));
}, },
onClickBigBtn() { onClickButton() {
this.$toast(this.$t('clickButton')); this.$toast(this.$t('clickButton'));
} }
} }

51
packages/goods-action/en-US.md
View File

@ -4,14 +4,14 @@
``` javascript ``` javascript
import { import {
GoodsAction, GoodsAction,
GoodsActionBigBtn, GoodsActionButton,
GoodsActionMiniBtn GoodsActionIcon
} from 'vant'; } from 'vant';
Vue Vue
.use(GoodsAction) .use(GoodsAction)
.use(GoodsActionBigBtn) .use(GoodsActionButton)
.use(GoodsActionMiniBtn); .use(GoodsActionIcon);
``` ```
### Usage ### Usage
@ -19,24 +19,25 @@ Vue
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
text="Icon1" text="Icon1"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="cart-o" icon="cart-o"
text="Icon2" text="Icon2"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-big-btn <van-goods-action-button
type="warning"
text="Button1" text="Button1"
@click="onClickBigBtn" @click="onClickButton"
/> />
<van-goods-action-big-btn <van-goods-action-button
primary type="danger"
text="Button2" text="Button2"
@click="onClickBigBtn" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
``` ```
@ -44,10 +45,10 @@ Vue
```javascript ```javascript
export default { export default {
methods: { methods: {
onClickMiniBtn() { onClickIcon() {
Toast('Click Icon'); Toast('Click Icon');
}, },
onClickBigBtn() { onClickButton() {
Toast('Click Button'); Toast('Click Button');
} }
} }
@ -60,22 +61,25 @@ Use `info` prop to show messages in upper right corner of icon
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
text="Icon1" text="Icon1"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
info="5" info="5"
icon="cart-o" icon="cart-o"
text="Icon2" text="Icon2"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="shop-o" icon="shop-o"
text="Icon3" text="Icon3"
/> />
<van-goods-action-big-btn text="Button1" /> <van-goods-action-button
<van-goods-action-big-btn type="warning"
primary text="Button1"
/>
<van-goods-action-button
type="danger"
text="Button2" text="Button2"
/> />
</van-goods-action> </van-goods-action>
@ -88,7 +92,7 @@ Use `info` prop to show messages in upper right corner of icon
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
#### GoodsActionMiniBtn #### GoodsActionIcon
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
@ -100,10 +104,11 @@ Use `info` prop to show messages in upper right corner of icon
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - | | to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
| replace | If true, the navigation will not leave a history record | `Boolean` | `false` | | replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
#### GoodsActionBigBtn #### GoodsActionButton
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
| type | Button type, Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
| text | Button text | `String` | - | | text | Button text | `String` | - |
| primary | Is primary button (red color) | `Boolean` | `false` | | primary | Is primary button (red color) | `Boolean` | `false` |
| disabled | Whether to disable button | `Boolean` | `false` | | disabled | Whether to disable button | `Boolean` | `false` |

24
packages/goods-action/test/__snapshots__/demo.spec.js.snap
View File

@ -4,35 +4,35 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-goods-action"> <div class="van-goods-action">
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!----> <!---->
</div>客服 </div>客服
</div> </div>
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<!----> <!---->
</div>购物车 </div>购物车
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button> </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
</div> </div>
</div> </div>
<div> <div>
<div class="van-goods-action"> <div class="van-goods-action">
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
<!----> <!---->
</div>客服 </div>客服
</div> </div>
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
<div class="van-info">5</div> <div class="van-info">5</div>
</div>购物车 </div>购物车
</div> </div>
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
<!----> <!---->
</div>店铺 </div>店铺
</div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button> </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
</div> </div>
</div> </div>
</div> </div>

8
packages/goods-action/test/__snapshots__/index.spec.js.snap
View File

@ -1,10 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BigBtn render default slot 1`] = `<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">Default Content</span></button>`; exports[`Button render default slot 1`] = `<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button"><span class="van-button__text">Default Content</span></button>`;
exports[`Mini render default slot 1`] = ` exports[`Icon render default slot 1`] = `
<div class="van-goods-action-mini-btn van-hairline"> <div class="van-goods-action-icon van-hairline">
<div class="van-icon van-icon-undefined van-goods-action-mini-btn__icon"> <div class="van-icon van-icon-undefined van-goods-action-icon__icon">
<!----> <!---->
</div>Default Content </div>Default Content
</div> </div>

20
packages/goods-action/test/index.spec.js
View File

@ -1,10 +1,10 @@
import BigBtn from '../../goods-action-big-btn'; import Button from '../../goods-action-button';
import MiniBtn from '../../goods-action-mini-btn'; import Icon from '../../goods-action-icon';
import { mount } from '../../../test/utils'; import { mount } from '../../../test/utils';
test('BigBtn click event', () => { test('Button click event', () => {
const click = jest.fn(); const click = jest.fn();
const wrapper = mount(BigBtn, { const wrapper = mount(Button, {
context: { context: {
on: { on: {
click click
@ -16,9 +16,9 @@ test('BigBtn click event', () => {
expect(click).toHaveBeenCalledTimes(1); expect(click).toHaveBeenCalledTimes(1);
}); });
test('MiniBtn click event', () => { test('Icon click event', () => {
const click = jest.fn(); const click = jest.fn();
const wrapper = mount(MiniBtn, { const wrapper = mount(Icon, {
context: { context: {
on: { on: {
click click
@ -30,20 +30,20 @@ test('MiniBtn click event', () => {
expect(click).toHaveBeenCalledTimes(1); expect(click).toHaveBeenCalledTimes(1);
}); });
test('BigBtn render default slot', () => { test('Button render default slot', () => {
const wrapper = mount({ const wrapper = mount({
render(h) { render(h) {
return h(BigBtn, null, ['Default Content']); return h(Button, null, ['Default Content']);
} }
}); });
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
test('Mini render default slot', () => { test('Icon render default slot', () => {
const wrapper = mount({ const wrapper = mount({
render(h) { render(h) {
return h(MiniBtn, null, ['Default Content']); return h(Icon, null, ['Default Content']);
} }
}); });

52
packages/goods-action/zh-CN.md
View File

@ -4,14 +4,14 @@
``` javascript ``` javascript
import { import {
GoodsAction, GoodsAction,
GoodsActionBigBtn, GoodsActionIcon,
GoodsActionMiniBtn GoodsActionButton
} from 'vant'; } from 'vant';
Vue Vue
.use(GoodsAction) .use(GoodsAction)
.use(GoodsActionBigBtn) .use(GoodsActionIcon)
.use(GoodsActionMiniBtn); .use(GoodsActionButton);
``` ```
### 代码演示 ### 代码演示
@ -19,24 +19,25 @@ Vue
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
text="客服" text="客服"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="cart-o" icon="cart-o"
text="购物车" text="购物车"
@click="onClickMiniBtn" @click="onClickIcon"
/> />
<van-goods-action-big-btn <van-goods-action-button
type="warning"
text="加入购物车" text="加入购物车"
@click="onClickBigBtn" @click="onClickButton"
/> />
<van-goods-action-big-btn <van-goods-action-button
primary type="danger"
text="立即购买" text="立即购买"
@click="onClickBigBtn" @click="onClickButton"
/> />
</van-goods-action> </van-goods-action>
``` ```
@ -44,10 +45,10 @@ Vue
```javascript ```javascript
export default { export default {
methods: { methods: {
onClickMiniBtn() { onClickIcon() {
Toast('点击图标'); Toast('点击图标');
}, },
onClickBigBtn() { onClickButton() {
Toast('点击按钮'); Toast('点击按钮');
} }
} }
@ -59,22 +60,25 @@ export default {
```html ```html
<van-goods-action> <van-goods-action>
<van-goods-action-mini-btn <van-goods-action-icon
icon="chat-o" icon="chat-o"
text="客服" text="客服"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
info="5" info="5"
icon="cart-o" icon="cart-o"
text="购物车" text="购物车"
/> />
<van-goods-action-mini-btn <van-goods-action-icon
icon="shop-o" icon="shop-o"
text="店铺" text="店铺"
/> />
<van-goods-action-big-btn text="加入购物车" /> <van-goods-action-button
<van-goods-action-big-btn type="warning"
primary text="加入购物车"
/>
<van-goods-action-button
type="danger"
text="立即购买" text="立即购买"
/> />
</van-goods-action> </van-goods-action>
@ -88,7 +92,7 @@ export default {
|------|------|------|------|------| |------|------|------|------|------|
| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 | | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
#### GoodsActionMiniBtn #### GoodsActionIcon
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
@ -100,12 +104,12 @@ export default {
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
#### GoodsActionBigBtn #### GoodsActionButton
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
| text | 按钮文字 | `String` | - | - | | text | 按钮文字 | `String` | - | - |
| primary | 是否为红色按钮 | `Boolean` | `false` | - | | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` |
| disabled | 是否禁用按钮 | `Boolean` | `false` | - | 1.3.10 | | disabled | 是否禁用按钮 | `Boolean` | `false` | - | 1.3.10 |
| loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 | | loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 |
| url | 跳转链接 | `String` | - | - | | url | 跳转链接 | `String` | - | - |

10
packages/index.less
View File

@ -8,8 +8,6 @@
/* common components */ /* common components */
@import './col/index'; @import './col/index';
@import './row/index'; @import './row/index';
@import './badge/index';
@import './badge-group/index';
@import './circle/index'; @import './circle/index';
@import './collapse-item/index'; @import './collapse-item/index';
@import './list/index'; @import './list/index';
@ -30,6 +28,8 @@
@import './image-preview/index'; @import './image-preview/index';
@import './stepper/index'; @import './stepper/index';
@import './progress/index'; @import './progress/index';
@import './sidebar/index';
@import './sidebar-item/index';
@import './swipe/index'; @import './swipe/index';
@import './swipe-item/index'; @import './swipe-item/index';
@import './slider/index'; @import './slider/index';
@ -44,7 +44,7 @@
@import './number-keyboard/index'; @import './number-keyboard/index';
/* action components */ /* action components */
@import './actionsheet/index'; @import './action-sheet/index';
@import './dialog/index'; @import './dialog/index';
@import './picker/index'; @import './picker/index';
@import './pull-refresh/index'; @import './pull-refresh/index';
@ -67,7 +67,7 @@
@import './coupon-cell/index'; @import './coupon-cell/index';
@import './coupon-list/index'; @import './coupon-list/index';
@import './goods-action/index'; @import './goods-action/index';
@import './goods-action-big-btn/index'; @import './goods-action-button/index';
@import './goods-action-mini-btn/index'; @import './goods-action-icon/index';
@import './submit-bar/index'; @import './submit-bar/index';
@import './sku/index'; @import './sku/index';

34
packages/index.ts
View File

@ -1,12 +1,10 @@
/* eslint-disable */ /* eslint-disable */
// This file is auto gererated by build/build-entry.js // This file is auto gererated by build/build-entry.js
import { VueConstructor } from 'vue/types'; import { VueConstructor } from 'vue/types';
import Actionsheet from './actionsheet'; import ActionSheet from './action-sheet';
import AddressEdit from './address-edit'; import AddressEdit from './address-edit';
import AddressList from './address-list'; import AddressList from './address-list';
import Area from './area'; import Area from './area';
import Badge from './badge';
import BadgeGroup from './badge-group';
import Button from './button'; import Button from './button';
import Card from './card'; import Card from './card';
import Cell from './cell'; import Cell from './cell';
@ -27,8 +25,8 @@ import DatetimePicker from './datetime-picker';
import Dialog from './dialog'; import Dialog from './dialog';
import Field from './field'; import Field from './field';
import GoodsAction from './goods-action'; import GoodsAction from './goods-action';
import GoodsActionBigBtn from './goods-action-big-btn'; import GoodsActionButton from './goods-action-button';
import GoodsActionMiniBtn from './goods-action-mini-btn'; import GoodsActionIcon from './goods-action-icon';
import Icon from './icon'; import Icon from './icon';
import ImagePreview from './image-preview'; import ImagePreview from './image-preview';
import Info from './info'; import Info from './info';
@ -53,6 +51,8 @@ import RadioGroup from './radio-group';
import Rate from './rate'; import Rate from './rate';
import Row from './row'; import Row from './row';
import Search from './search'; import Search from './search';
import Sidebar from './sidebar';
import SidebarItem from './sidebar-item';
import Sku from './sku'; import Sku from './sku';
import Slider from './slider'; import Slider from './slider';
import Step from './step'; import Step from './step';
@ -72,7 +72,6 @@ import Tag from './tag';
import Toast from './toast'; import Toast from './toast';
import TreeSelect from './tree-select'; import TreeSelect from './tree-select';
import Uploader from './uploader'; import Uploader from './uploader';
import Waterfall from './waterfall';
declare global { declare global {
interface Window { interface Window {
@ -82,12 +81,10 @@ declare global {
const version = '1.6.16'; const version = '1.6.16';
const components = [ const components = [
Actionsheet, ActionSheet,
AddressEdit, AddressEdit,
AddressList, AddressList,
Area, Area,
Badge,
BadgeGroup,
Button, Button,
Card, Card,
Cell, Cell,
@ -108,8 +105,8 @@ const components = [
Dialog, Dialog,
Field, Field,
GoodsAction, GoodsAction,
GoodsActionBigBtn, GoodsActionButton,
GoodsActionMiniBtn, GoodsActionIcon,
Icon, Icon,
ImagePreview, ImagePreview,
Info, Info,
@ -132,6 +129,8 @@ const components = [
Rate, Rate,
Row, Row,
Search, Search,
Sidebar,
SidebarItem,
Sku, Sku,
Slider, Slider,
Step, Step,
@ -167,12 +166,10 @@ if (typeof window !== 'undefined' && window.Vue) {
export { export {
install, install,
version, version,
Actionsheet, ActionSheet,
AddressEdit, AddressEdit,
AddressList, AddressList,
Area, Area,
Badge,
BadgeGroup,
Button, Button,
Card, Card,
Cell, Cell,
@ -193,8 +190,8 @@ export {
Dialog, Dialog,
Field, Field,
GoodsAction, GoodsAction,
GoodsActionBigBtn, GoodsActionButton,
GoodsActionMiniBtn, GoodsActionIcon,
Icon, Icon,
ImagePreview, ImagePreview,
Info, Info,
@ -219,6 +216,8 @@ export {
Rate, Rate,
Row, Row,
Search, Search,
Sidebar,
SidebarItem,
Sku, Sku,
Slider, Slider,
Step, Step,
@ -237,8 +236,7 @@ export {
Tag, Tag,
Toast, Toast,
TreeSelect, TreeSelect,
Uploader, Uploader
Waterfall
}; };
export default { export default {

28
packages/loading/index.less
View File

@ -9,11 +9,6 @@
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
&--circle {
width: 16px;
height: 16px;
}
&__spinner { &__spinner {
z-index: -1; z-index: -1;
width: 100%; width: 100%;
@ -23,18 +18,6 @@
box-sizing: border-box; box-sizing: border-box;
animation: van-rotate 0.8s linear infinite; animation: van-rotate 0.8s linear infinite;
&--circle {
border-radius: 100%;
border: 3px solid transparent;
border-color: @gray;
border-top-color: @gray-darker;
}
&--gradient-circle {
background-size: contain;
background-image: url('https://img.yzcdn.cn/vant/gradient-circle-black.png');
}
&--spinner { &--spinner {
animation-timing-function: steps(12); animation-timing-function: steps(12);
@ -73,17 +56,6 @@
animation: van-circular 1.5s ease-in-out infinite; animation: van-circular 1.5s ease-in-out infinite;
} }
} }
&--white {
.van-loading__spinner--circle {
border-color: rgba(0, 0, 0, .1);
border-top-color: rgba(255, 255, 255, .7);
}
.van-loading__spinner--gradient-circle {
background-image: url('https://img.yzcdn.cn/vant/gradient-circle-white.png');
}
}
} }
@keyframes van-circular { @keyframes van-circular {

6
packages/loading/index.tsx
View File

@ -22,10 +22,8 @@ function Loading(
) { ) {
const { color, size, type } = props; const { color, size, type } = props;
const colorType = color === 'white' || color === 'black' ? color : '';
const style = { const style = {
color: color === 'black' ? DEFAULT_COLOR : color, color,
width: size, width: size,
height: size height: size
}; };
@ -44,7 +42,7 @@ function Loading(
); );
return ( return (
<div class={bem([type, colorType])} style={style} {...inherit(ctx, true)}> <div class={bem([type])} style={style} {...inherit(ctx, true)}>
<span class={bem('spinner', type)}> <span class={bem('spinner', type)}>
{Spin} {Spin}
{Circular} {Circular}

4
packages/pull-refresh/test/__snapshots__/index.spec.js.snap
View File

@ -25,7 +25,7 @@ exports[`change head content when pulling down 3`] = `
<div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);"> <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<div class="van-pull-refresh__loading"> <div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span> <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
</div> </div>
</div> </div>
</div> </div>
@ -37,7 +37,7 @@ exports[`change head content when pulling down 4`] = `
<div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);"> <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
<div class="van-pull-refresh__head"> <div class="van-pull-refresh__head">
<div class="van-pull-refresh__loading"> <div class="van-pull-refresh__loading">
<div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span> <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
</div> </div>
</div> </div>
</div> </div>

18
packages/badge/index.js → packages/sidebar-item/index.js
View File

@ -1,7 +1,7 @@
import { use } from '../utils'; import { use } from '../utils';
import Info from '../info'; import Info from '../info';
const [sfc, bem] = use('badge'); const [sfc, bem] = use('sidebar-item');
export default sfc({ export default sfc({
props: { props: {
@ -10,32 +10,32 @@ export default sfc({
title: String title: String
}, },
inject: ['vanBadgeGroup'], inject: ['vanSidebar'],
created() { created() {
this.parent.badges.push(this); this.parent.items.push(this);
}, },
beforeDestroy() { beforeDestroy() {
this.parent.badges = this.parent.badges.filter(item => item !== this); this.parent.items = this.parent.items.filter(item => item !== this);
}, },
computed: { computed: {
parent() { parent() {
if (process.env.NODE_ENV !== 'production' && !this.vanBadgeGroup) { if (process.env.NODE_ENV !== 'production' && !this.vanSidebar) {
console.error('[Vant] Badge needs to be child of BadgeGroup'); console.error('[Vant] SidebarItem needs to be child of Sidebar');
} }
return this.vanBadgeGroup; return this.vanSidebar;
}, },
select() { select() {
return this.parent.badges.indexOf(this) === +this.parent.activeKey; return this.parent.items.indexOf(this) === +this.parent.activeKey;
} }
}, },
methods: { methods: {
onClick() { onClick() {
const index = this.parent.badges.indexOf(this); const index = this.parent.items.indexOf(this);
this.$emit('click', index); this.$emit('click', index);
this.parent.$emit('change', index); this.parent.$emit('change', index);
} }

46
packages/sidebar-item/index.less Normal file
View File

@ -0,0 +1,46 @@
@import '../style/var';
.van-sidebar-item {
display: block;
overflow: hidden;
user-select: none;
word-break: break-all;
box-sizing: border-box;
color: @sidebar-text-color;
padding: @sidebar-padding;
font-size: @sidebar-font-size;
line-height: @sidebar-line-height;
background-color: @sidebar-background-color;
border-left: 3px solid transparent;
&__text {
position: relative;
}
&:active {
background-color: @sidebar-active-color;
}
&:not(:last-child)::after {
border-bottom-width: 1px;
}
&--select {
color: @sidebar-selected-text-color;
font-weight: @sidebar-selected-font-weight;
border-color: @sidebar-selected-border-color;
&::after {
border-right-width: 1px;
}
&,
&:active {
background-color: @sidebar-selected-background-color;
}
}
.van-info {
right: 4px;
}
}

18
packages/badge/demo/index.vue → packages/sidebar/demo/index.vue
View File

@ -1,24 +1,24 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-badge-group <van-sidebar
:active-key="activeKey" :active-key="activeKey"
@change="onChange" @change="onChange"
> >
<van-badge :title="$t('title')" /> <van-sidebar-item :title="$t('title')" />
<van-badge <van-sidebar-item
:title="$t('title')" :title="$t('title')"
info="8" info="8"
/> />
<van-badge <van-sidebar-item
:title="$t('title')" :title="$t('title')"
info="99" info="99"
/> />
<van-badge <van-sidebar-item
:title="$t('title')" :title="$t('title')"
info="99+" info="99+"
/> />
</van-badge-group> </van-sidebar>
</demo-block> </demo-block>
</demo-section> </demo-section>
</template> </template>
@ -48,8 +48,8 @@ export default {
<style lang="less"> <style lang="less">
@import '../../style/var'; @import '../../style/var';
.demo-badge { .demo-sidebar {
.van-badge-group { .van-sidebar {
width: auto; width: auto;
margin: 0 15px; margin: 0 15px;
padding: 20px 0; padding: 20px 0;
@ -60,7 +60,7 @@ export default {
} }
} }
.van-badge { .van-sidebar-item {
width: 85px; width: 85px;
margin: 0 auto; margin: 0 auto;
} }

67
packages/sidebar/en-US.md Normal file
View File

@ -0,0 +1,67 @@
## Sidebar
### Install
``` javascript
import { Sidebar, SidebarItem } from 'vant';
Vue.use(Sidebar);
Vue.use(SidebarItem);
```
### Usage
#### Basic Usage
Use `active-key` prop to set index of chosen item
```html
<van-sidebar :active-key="activeKey" @change="onChange">
<van-sidebar-item title="Title" />
<van-sidebar-item title="Title" info="8" />
<van-sidebar-item title="Title" info="99" />
<van-sidebar-item title="Title" info="99+" />
</van-sidebar>
```
``` javascript
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onChange(key) {
this.activeKey = key;
}
}
};
```
### Sidebar API
| Attribute | Description | Type | Default |
|------|------|------|------|
| active-key | Index of chosen item | `String | Number` | `0` |
### Sidebar Event
| Event | Description | Arguments |
|------|------|------|
| change | Triggered when item changed | key: index of current item |
### SidebarItem API
| Attribute | Description | Type | Default |
|------|------|------|------|
| title | Content | `String` | `''` |
| info | Info Message | `String | Number` | `''` |
| url | Link | `String` | - |
### SidebarItem Event
| Event | Description | Arguments |
|------|------|------|
| click | Triggered when click item | key: index of current item |

6
packages/badge-group/index.js → packages/sidebar/index.js
View File

@ -1,6 +1,6 @@
import { use } from '../utils'; import { use } from '../utils';
const [sfc, bem] = use('badge-group'); const [sfc, bem] = use('sidebar');
export default sfc({ export default sfc({
props: { props: {
@ -12,13 +12,13 @@ export default sfc({
provide() { provide() {
return { return {
vanBadgeGroup: this vanSidebar: this
}; };
}, },
data() { data() {
return { return {
badges: [] items: []
}; };
}, },

5
packages/sidebar/index.less Normal file
View File

@ -0,0 +1,5 @@
@import '../style/var';
.van-sidebar {
width: @sidebar-width;
}

22
packages/sidebar/test/__snapshots__/demo.spec.js.snap Normal file
View File

@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
<div class="van-sidebar-item__text">标签名称
<!---->
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99</div>
</div>
</a> <a class="van-sidebar-item van-hairline">
<div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99+</div>
</div>
</a></div>
</div>
</div>
`;

0
packages/badge/test/demo.spec.js → packages/sidebar/test/demo.spec.js
View File

18
packages/badge/test/index.spec.js → packages/sidebar/test/index.spec.js
View File

@ -1,19 +1,19 @@
import { mount } from '../../../test/utils'; import { mount } from '../../../test/utils';
import Badge from '..'; import Sidebar from '..';
import BadgeGroup from '../../badge-group'; import SidebarItem from '../../sidebar-item';
test('event', () => { test('event', () => {
const onClick = jest.fn(); const onClick = jest.fn();
const onChange = jest.fn(); const onChange = jest.fn();
const wrapper = mount({ const wrapper = mount({
template: ` template: `
<badge-group @change="onChange"> <sidebar @change="onChange">
<badge @click="onClick">Text</badge> <sidebar-item @click="onClick">Text</sidebar-item>
</badge-group> </sidebar>
`, `,
components: { components: {
Badge, Sidebar,
BadgeGroup SidebarItem
}, },
methods: { methods: {
onClick, onClick,
@ -21,7 +21,7 @@ test('event', () => {
} }
}); });
wrapper.find('.van-badge').trigger('click'); wrapper.find('.van-sidebar-item').trigger('click');
expect(onClick).toHaveBeenCalledWith(0); expect(onClick).toHaveBeenCalledWith(0);
expect(onChange).toHaveBeenCalledWith(0); expect(onChange).toHaveBeenCalledWith(0);
wrapper.vm.$destroy(); wrapper.vm.$destroy();
@ -31,7 +31,7 @@ test('without parent', () => {
const consoleError = console.error; const consoleError = console.error;
try { try {
console.error = jest.fn(); console.error = jest.fn();
mount(Badge); mount(Sidebar);
} catch (err) { } catch (err) {
console.error = consoleError; console.error = consoleError;
expect(err).toBeTruthy(); expect(err).toBeTruthy();

67
packages/sidebar/zh-CN.md Normal file
View File

@ -0,0 +1,67 @@
## Sidebar 侧边导航
### 使用指南
``` javascript
import { Sidebar, SidebarItem } from 'vant';
Vue.use(Sidebar);
Vue.use(SidebarItem);
```
### 代码演示
#### 基础用法
通过在`van-sidebar`上设置`active-key`属性来控制选中项
```html
<van-sidebar :active-key="activeKey" @change="onChange">
<van-sidebar-item title="标签名称" />
<van-sidebar-item title="标签名称" info="8" />
<van-sidebar-item title="标签名称" info="99" />
<van-sidebar-item title="标签名称" info="99+" />
</van-sidebar>
```
``` javascript
export default {
data() {
return {
activeKey: 0
};
},
methods: {
onChange(key) {
this.activeKey = key;
}
}
};
```
### Sidebar API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| active-key | 当前导航项的索引 | `String | Number` | `0` | - |
### Sidebar Event
| 事件名 | 说明 | 参数 |
|------|------|------|
| change | 切换当前导航项时触发 | key: 当前导航项的索引 |
### SidebarItem API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| title | 内容 | `String` | `''` | - |
| info | 提示消息 | `String | Number` | `''` | - |
| url | 跳转链接 | `String` | - | - |
### SidebarItem Event
| 事件名 | 说明 | 参数 |
|------|------|------|
| click | 点击时触发 | key: 当前导航项的索引 |

13
packages/sku/components/SkuActions.tsx
View File

@ -27,11 +27,18 @@ function SkuActions(
return ( return (
<div class={bem()} {...inherit(ctx)}> <div class={bem()} {...inherit(ctx)}>
{props.showAddCartBtn && ( {props.showAddCartBtn && (
<Button bottomAction text="加入购物车" onClick={emit('sku:addCart')} /> <Button
square
size="large"
type="warning"
text="加入购物车"
onClick={emit('sku:addCart')}
/>
)} )}
<Button <Button
type="primary" square
bottomAction size="large"
type="danger"
text={props.buyText || '立即购买'} text={props.buyText || '立即购买'}
onClick={emit('sku:buy')} onClick={emit('sku:buy')}
/> />

9
packages/sku/demo/index.vue
View File

@ -117,14 +117,17 @@
> >
<div class="van-sku-actions"> <div class="van-sku-actions">
<van-button <van-button
bottom-action square
size="large"
type="warning"
@click="onPointClicked" @click="onPointClicked"
> >
{{ $t('button1') }} {{ $t('button1') }}
</van-button> </van-button>
<van-button <van-button
type="primary" square
bottom-action size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')" @click="props.skuEventBus.$emit('sku:buy')"
> >
{{ $t('button2') }} {{ $t('button2') }}

19
packages/sku/en-US.md
View File

@ -70,12 +70,27 @@ Vue.use(Sku);
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
</div> </div>
</template> </template>
<!-- custom sku actions --> <!-- custom sku actions -->
<template slot="sku-actions" slot-scope="props"> <template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions"> <div class="van-sku-actions">
<van-button bottom-action @click="onPointClicked">Button</van-button> <van-button
square
size="large"
type="warning"
@click="onPointClicked"
>
Button
</van-button>
<!-- trigger sku inner event --> <!-- trigger sku inner event -->
<van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">Button</van-button> <van-button
square
size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')"
>
Button
</van-button>
</div> </div>
</template> </template>
</van-sku> </van-sku>

19
packages/sku/zh-CN.md
View File

@ -71,12 +71,27 @@ Vue.use(Sku);
<span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
</div> </div>
</template> </template>
<!-- 自定义 sku actions --> <!-- 自定义 sku actions -->
<template slot="sku-actions" slot-scope="props"> <template slot="sku-actions" slot-scope="props">
<div class="van-sku-actions"> <div class="van-sku-actions">
<van-button bottom-action @click="onPointClicked">积分兑换</van-button> <van-button
square
size="large"
type="warning"
@click="onPointClicked"
>
积分兑换
</van-button>
<!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 --> <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
<van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button> <van-button
square
size="large"
type="danger"
@click="props.skuEventBus.$emit('sku:buy')"
>
买买买
</van-button>
</div> </div>
</template> </template>
</van-sku> </van-sku>

27
packages/steps/index.js
View File

@ -1,16 +1,11 @@
import { use } from '../utils'; import { use } from '../utils';
import { GREEN } from '../utils/color'; import { GREEN } from '../utils/color';
import Icon from '../icon';
const [sfc, bem] = use('steps'); const [sfc, bem] = use('steps');
export default sfc({ export default sfc({
props: { props: {
icon: String,
title: String,
active: Number, active: Number,
iconClass: String,
description: String,
direction: { direction: {
type: String, type: String,
default: 'horizontal' default: 'horizontal'
@ -32,29 +27,9 @@ export default sfc({
}, },
render(h) { render(h) {
const { icon, title, description, slots } = this;
const StatusIcon = (slots('icon') || icon) && (
<div class={bem('icon')}>{slots('icon') || <Icon name={icon} class={this.iconClass} />}</div>
);
const StatusMessage = (
<div class={bem('message')}>
<div class={bem('title')}>{title}</div>
<div class={[bem('desc'), 'van-ellipsis']}>{description}</div>
</div>
);
return ( return (
<div class={bem([this.direction])}> <div class={bem([this.direction])}>
{(title || description) && ( <div class={bem('items')}>{this.slots()}</div>
<div class={bem('status')}>
{StatusIcon}
{StatusMessage}
{slots('message-extra')}
</div>
)}
<div class={bem('items', { alone: !title && !description })}>{slots()}</div>
</div> </div>
); );
} }

30
packages/steps/index.less
View File

@ -13,40 +13,10 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding-bottom: 22px; padding-bottom: 22px;
&.van-steps__items--alone {
padding-top: 10px;
}
} }
} }
&--vertical { &--vertical {
padding: 0 0 0 35px; padding: 0 0 0 35px;
} }
&__icon {
float: left;
margin-right: 10px;
}
.van-icon {
font-size: 40px;
}
&__message {
height: 40px;
margin: 15px 0;
}
&__title {
font-size: 14px;
color: @text-color;
padding-top: 4px;
}
&__desc {
font-size: 12px;
line-height: 1.5;
color: @gray-dark;
}
} }

1
packages/steps/zh-CN.md
View File

@ -73,7 +73,6 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
| active | 当前步骤 | `Number` | 0 | - | | active | 当前步骤 | `Number` | 0 | - |
| title | 顶部描述栏标题 | `String` | - | - |
| direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - | | direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - |
| active-icon | 激活状态底部图标，可选值见 Icon 组件 | `String` | `checked` | 1.6.9 | | active-icon | 激活状态底部图标，可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
| active-color | 激活状态颜色 | `String` | `#07c160` | - | | active-color | 激活状态颜色 | `String` | `#07c160` | - |

34
packages/style/var.less
View File

@ -32,21 +32,6 @@
@action-sheet-close-icon-size: 18px; @action-sheet-close-icon-size: 18px;
@action-sheet-close-icon-color: @gray-dark; @action-sheet-close-icon-color: @gray-dark;
// Badge
@badge-font-size: 14px;
@badge-line-height: 1.4;
@badge-text-color: @gray-darker;
@badge-padding: 20px 12px 20px 9px;
@badge-active-color: @active-color;
@badge-background-color: @background-color;
@badge-selected-font-weight: 500;
@badge-selected-text-color: @text-color;
@badge-selected-border-color: @red;
@badge-selected-background-color: @white;
// BadgeGroup
@badge-group-width: 85px;
// Button // Button
@button-mini-height: 22px; @button-mini-height: 22px;
@button-mini-min-width: 50px; @button-mini-min-width: 50px;
@ -77,10 +62,6 @@
@button-warning-color: @white; @button-warning-color: @white;
@button-warning-background-color: @orange; @button-warning-background-color: @orange;
@button-warning-border-color: @orange; @button-warning-border-color: @orange;
@button-bottom-action-default-color: @white;
@button-bottom-action-default-background-color: @orange;
@button-bottom-action-primary-color: @white;
@button-bottom-action-primary-background-color: @red;
@button-border-width: 1px; @button-border-width: 1px;
@button-border-radius: 2px; @button-border-radius: 2px;
@button-round-border-radius: 10em; @button-round-border-radius: 10em;
@ -239,6 +220,21 @@
// Rate // Rate
@rate-horizontal-padding: 2px; @rate-horizontal-padding: 2px;
// Sidebar
@sidebar-width: 85px;
// SidebarItem
@sidebar-font-size: 14px;
@sidebar-line-height: 1.4;
@sidebar-text-color: @gray-darker;
@sidebar-padding: 20px 12px 20px 9px;
@sidebar-active-color: @active-color;
@sidebar-background-color: @background-color;
@sidebar-selected-font-weight: 500;
@sidebar-selected-text-color: @text-color;
@sidebar-selected-border-color: @red;
@sidebar-selected-background-color: @white;
// Slider // Slider
@slider-active-background-color: @blue; @slider-active-background-color: @blue;
@slider-inactive-background-color: @gray-light; @slider-inactive-background-color: @gray-light;

82
packages/waterfall/demo/index.vue
View File

@ -1,82 +0,0 @@
<template>
<demo-section>
<van-notice-bar>{{ $t('tips') }}</van-notice-bar>
<demo-block :title="$t('basicUsage')">
<p class="page-desc">{{ $t('text') }}</p>
<ul
v-waterfall-lower="loadMore"
waterfall-disabled="disabled"
waterfall-offset="400"
>
<li v-for="item in list">{{ item }}</li>
</ul>
</demo-block>
</demo-section>
</template>
<script>
import { Waterfall } from '../..';
export default {
i18n: {
'zh-CN': {
text: '当即将滚动到元素底部时，会自动加载更多',
tips: '注意：Waterfall 已被废弃，请使用 List 组件代替'
},
'en-US': {
text: 'This list will load items will scroll to bottom.',
tips: 'Waterfall is deprecated and no longer maintained, please use the List component instead.'
}
},
directives: {
WaterfallLower: Waterfall('lower')
},
data() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
disabled: false
};
},
methods: {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i++) {
this.list.push(this.list.length);
}
this.disabled = false;
}, 200);
}
}
};
</script>
<style lang="less">
@import '../../style/var';
.demo-waterfall {
ul {
max-height: 360px;
overflow: scroll;
border-top: 1px solid @gray-light;
}
li {
line-height: 50px;
border-bottom: 1px solid @gray-light;
background: @white;
text-align: center;
}
.page-desc {
padding: 5px 0;
line-height: 1.4;
font-size: 14px;
text-align: center;
color: @gray-darker;
}
}
</style>

133
packages/waterfall/directive.js
View File

@ -1,133 +0,0 @@
/* eslint-disable no-underscore-dangle */
import { on, off } from '../utils/event';
import {
getScrollTop,
getElementTop,
getVisibleHeight,
getScrollEventTarget
} from '../utils/scroll';
const CONTEXT = '@@Waterfall';
const OFFSET = 300;
// 处理滚动函数
function handleScrollEvent() {
const element = this.el;
const { scrollEventTarget } = this;
// 已被禁止的滚动处理
if (this.disabled) return;
const targetScrollTop = getScrollTop(scrollEventTarget);
const targetVisibleHeight = getVisibleHeight(scrollEventTarget);
// 滚动元素可视区域下边沿到滚动元素元素最顶上 距离
const targetBottom = targetScrollTop + targetVisibleHeight;
// 如果无元素高度，考虑为元素隐藏，直接返回
if (!targetVisibleHeight) return;
// 判断是否到了底
let needLoadMoreToLower = false;
if (element === scrollEventTarget) {
needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
} else {
const elementBottom =
getElementTop(element) - getElementTop(scrollEventTarget) + getVisibleHeight(element);
needLoadMoreToLower = elementBottom - targetVisibleHeight < this.offset;
}
if (needLoadMoreToLower) {
this.cb.lower && this.cb.lower({ target: scrollEventTarget, top: targetScrollTop });
}
// 判断是否到了顶
let needLoadMoreToUpper = false;
if (element === scrollEventTarget) {
needLoadMoreToUpper = targetScrollTop < this.offset;
} else {
const elementTop = getElementTop(element) - getElementTop(scrollEventTarget);
needLoadMoreToUpper = elementTop + this.offset > 0;
}
if (needLoadMoreToUpper) {
this.cb.upper && this.cb.upper({ target: scrollEventTarget, top: targetScrollTop });
}
}
// 绑定事件到元素上
// 读取基本的控制变量
function doBindEvent() {
if (this.el[CONTEXT].binded) {
return;
}
this.el[CONTEXT].binded = true;
this.scrollEventListener = handleScrollEvent.bind(this);
this.scrollEventTarget = getScrollEventTarget(this.el);
const disabledExpr = this.el.getAttribute('waterfall-disabled');
let disabled = false;
if (disabledExpr) {
this.vm.$watch(disabledExpr, value => {
this.disabled = value;
this.scrollEventListener();
});
disabled = Boolean(this.vm[disabledExpr]);
}
this.disabled = disabled;
const offset = this.el.getAttribute('waterfall-offset');
this.offset = Number(offset) || OFFSET;
on(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
this.scrollEventListener();
}
// 绑定事件
function startBind(el) {
const context = el[CONTEXT];
context.vm.$nextTick(() => {
doBindEvent.call(el[CONTEXT]);
});
}
// 确认何时绑事件监听函数
function doCheckStartBind(el) {
const context = el[CONTEXT];
if (context.vm._isMounted) {
startBind(el);
} else {
context.vm.$on('hook:mounted', () => {
startBind(el);
});
}
}
export default function (type) {
return {
bind(el, binding, vnode) {
if (!el[CONTEXT]) {
el[CONTEXT] = {
el,
vm: vnode.context,
cb: {}
};
}
el[CONTEXT].cb[type] = binding.value;
doCheckStartBind(el);
},
update(el) {
const context = el[CONTEXT];
context.scrollEventListener && context.scrollEventListener();
},
unbind(el) {
const context = el[CONTEXT];
if (context.scrollEventTarget) {
off(context.scrollEventTarget, 'scroll', context.scrollEventListener);
}
}
};
}

77
packages/waterfall/en-US.md
View File

@ -1,77 +0,0 @@
## Waterfall
Note: Waterfall is deprecated and no longer maintained, please use the [List](#/zh-CN/list) component instead.
### Install
#### Global registration
```js
import Vue from 'vue';
import { Waterfall } from 'vant';
Vue.use(Waterfall);
```
#### Local registration
If you just watch to use `Waterfall` in a component, you can register the directive in the component.
```js
import { Waterfall } from 'vant';
export default {
directives: {
WaterfallLower: Waterfall('lower'),
WaterfallUpper: Waterfall('upper')
}
};
```
### Usage
#### Basic Usage
```html
<ul
v-waterfall-lower="loadMore"
waterfall-disabled="disabled"
waterfall-offset="400"
>
<li v-for="item in list">{{ item }}</li>
</ul>
```
```js
export default {
data() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
disabled: false
};
},
directives: {
WaterfallLower: Waterfall('lower')
},
methods: {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i++) {
this.list.push(this.list.length);
}
this.disabled = false;
}, 200);
}
}
};
```
### API
| Attribute | Description | Type | Default |
|------|------|------|------|
| v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - |
| v-waterfall-upper | Function to trigger when scroll to top | `Function` | - |
| waterfall-disabled | Key of the property to control disable status in instance | `String` | - |
| waterfall-offset | Offset to trigger callback function | `Number` | `300` |

11
packages/waterfall/index.js
View File

@ -1,11 +0,0 @@
import Waterfall from './directive';
Waterfall.install = function (Vue) {
if (process.env.NODE_ENV !== 'production') {
console.warn('[Vant] Waterfall is deprecated, please use List component instread');
}
Vue.directive('WaterfallLower', Waterfall('lower'));
Vue.directive('WaterfallUpper', Waterfall('upper'));
};
export default Waterfall;

81
packages/waterfall/zh-CN.md
View File

@ -1,81 +0,0 @@
## Waterfall 瀑布流
注意：Waterfall 组件已被废弃且不再维护，请使用 [List](#/zh-CN/list) 组件代替
### 使用指南
#### 全局注册
```js
import Vue from 'vue';
import { Waterfall } from 'vant';
Vue.use(Waterfall);
```
#### 局部注册
如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
```js
import { Waterfall } from 'vant';
export default {
directives: {
WaterfallLower: Waterfall('lower'),
WaterfallUpper: Waterfall('upper')
}
};
```
### 代码演示
#### 基础用法
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 true，禁止 `v-waterfall-lower` 监听滚动事件
注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
```html
<ul
v-waterfall-lower="loadMore"
waterfall-disabled="disabled"
waterfall-offset="400"
>
<li v-for="item in list">{{ item }}</li>
</ul>
```
```js
export default {
data() {
return {
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
disabled: false
};
},
directives: {
WaterfallLower: Waterfall('lower')
},
methods: {
loadMore() {
this.disabled = true;
setTimeout(() => {
for (let i = 0; i < 5; i++) {
this.list.push(this.list.length);
}
this.disabled = false;
}, 200);
}
}
};
```
### API
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - |
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |

12
types/index.d.ts vendored
View File

@ -5,17 +5,16 @@ import { Dialog } from './dialog';
import { Notify } from './notify'; import { Notify } from './notify';
import { Locale } from './locale'; import { Locale } from './locale';
import { Lazyload } from './lazyload'; import { Lazyload } from './lazyload';
import { Waterfall } from './waterfall';
import { ImagePreview } from './image-preview'; import { ImagePreview } from './image-preview';
export const version: string; export const version: string;
export function install (vue: typeof Vue): void export function install (vue: typeof Vue): void
export class Actionsheet extends VanComponent {} export class ActionSheet extends VanComponent {}
export class AddressEdit extends VanComponent {} export class AddressEdit extends VanComponent {}
export class AddressList extends VanComponent {} export class AddressList extends VanComponent {}
export class Area extends VanComponent {} export class Area extends VanComponent {}
export class Badge extends VanComponent {} export class Sidebar extends VanComponent {}
export class BadgeGroup extends VanComponent {} export class SidebarGroup extends VanComponent {}
export class Button extends VanComponent {} export class Button extends VanComponent {}
export class Card extends VanComponent {} export class Card extends VanComponent {}
export class Cell extends VanComponent {} export class Cell extends VanComponent {}
@ -35,8 +34,8 @@ export class CouponList extends VanComponent {}
export class DatetimePicker extends VanComponent {} export class DatetimePicker extends VanComponent {}
export class Field extends VanComponent {} export class Field extends VanComponent {}
export class GoodsAction extends VanComponent {} export class GoodsAction extends VanComponent {}
export class GoodsActionBigBtn extends VanComponent {} export class GoodsActionButton extends VanComponent {}
export class GoodsActionMiniBtn extends VanComponent {} export class GoodsActionIcon extends VanComponent {}
export class Icon extends VanComponent {} export class Icon extends VanComponent {}
export class List extends VanComponent {} export class List extends VanComponent {}
export class Loading extends VanComponent {} export class Loading extends VanComponent {}
@ -78,6 +77,5 @@ export {
Notify, Notify,
Locale, Locale,
Lazyload, Lazyload,
Waterfall,
ImagePreview ImagePreview
}; };

8
types/waterfall.d.ts vendored
View File

@ -1,8 +0,0 @@
import { DirectiveFunction, PluginFunction } from 'vue';
export interface Waterfall {
(type: string): DirectiveFunction;
install: PluginFunction<void>;
}
export const Waterfall: Waterfall;