mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'dev' into next
This commit is contained in:
chenjiahan
commit
8b253c7280
@ -82,6 +82,7 @@ Modern browsers and Android 4.0+, iOS 8.0+.
|
||||
|
||||
- [Documentation](https://youzan.github.io/vant)
|
||||
- [Changelog](https://youzan.github.io/vant#/en-US/changelog)
|
||||
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||
|
||||
## Preview
|
||||
|
||||
|
||||
@ -95,6 +95,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手
|
||||
- [详细文档](https://youzan.github.io/vant)
|
||||
- [更新日志](https://youzan.github.io/vant#/zh-CN/changelog)
|
||||
- [码云镜像](https://gitee.com/organizations/vant-contrib)
|
||||
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||
|
||||
## 手机预览
|
||||
|
||||
|
||||
@ -10,6 +10,177 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
|
||||
- Minor version：released every one to two months, including backwards compatible features.
|
||||
- Major version：including breaking changes and new features.
|
||||
|
||||
### [v2.8.4](https://github.com/youzan/vant/compare/v2.8.3...v2.8.4)
|
||||
|
||||
`2020-05-28`
|
||||
|
||||
**Feature**
|
||||
|
||||
- AddressList: add safe-area-inset-bottom [#6355](https://github.com/youzan/vant/issues/6355)
|
||||
- DatetimePicker: add month-day type [#6395](https://github.com/youzan/vant/issues/6395)
|
||||
- Popup: create overlay for every popup [#6357](https://github.com/youzan/vant/issues/6357)
|
||||
|
||||
**style**
|
||||
|
||||
- ActionSheet: adjust subname color to gray-6 [e54c11](https://github.com/youzan/vant/commit/e54c11d55244e65246df7eddd7751983dbc4d331)
|
||||
- ActionSheet: remove option border [8db218](https://github.com/youzan/vant/commit/8db218e9c0ca6905491a019cf983a0269f3aea8c)
|
||||
- Cell: lower CSS priority of the border [#6359](https://github.com/youzan/vant/issues/6359)
|
||||
- Collapse: adjust border gag [#6361](https://github.com/youzan/vant/issues/6361)
|
||||
- Collapse: increase content font-size to 14px [#6358](https://github.com/youzan/vant/issues/6358)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Area: use first city code when county list is empty [#6356](https://github.com/youzan/vant/issues/6356)
|
||||
- Field: can not disable error in form [#6382](https://github.com/youzan/vant/issues/6382)
|
||||
- GoodsAction: incorrect single button radius [#6347](https://github.com/youzan/vant/issues/6347)
|
||||
- Sidebar: should emit change when v-model changed [#6383](https://github.com/youzan/vant/issues/6383)
|
||||
|
||||
### [v2.8.3](https://github.com/youzan/vant/compare/v2.8.2...v2.8.3)
|
||||
|
||||
`2020-05-21`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Form: add submit-on-enter prop [#6336](https://github.com/youzan/vant/issues/6336)
|
||||
- Form: scrollToField can scroll to bottom [#6335](https://github.com/youzan/vant/issues/6335)
|
||||
- Field: adjust field placeholder color to gray-5 [#6304](https://github.com/youzan/vant/issues/6304)
|
||||
- Field: minus can only be placed on the first char [#6303](https://github.com/youzan/vant/issues/6303)
|
||||
- Picker: improve method type, support generic [#6315](https://github.com/youzan/vant/issues/6315)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Button: text not align center in legacy safari [#6325](https://github.com/youzan/vant/issues/6325)
|
||||
- Calendar: color prop not work when use allow-some-day [#6331](https://github.com/youzan/vant/issues/6331)
|
||||
|
||||
### [v2.8.2](https://github.com/youzan/vant/compare/v2.8.1...v2.8.2)
|
||||
|
||||
`2020-05-17`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Field: add extra slot [#6290](https://github.com/youzan/vant/issues/6290)
|
||||
- Grid: add direction prop [#6256](https://github.com/youzan/vant/issues/6256)
|
||||
- Calendar: add month-show event [#6292](https://github.com/youzan/vant/issues/6292)
|
||||
- NumberKeyboard: support multiple extra key [#6276](https://github.com/youzan/vant/issues/6276)
|
||||
- Stepper: add theme prop [#6282](https://github.com/youzan/vant/issues/6282)
|
||||
|
||||
**style**
|
||||
|
||||
- Rate: update rate disabled color [#6253](https://github.com/youzan/vant/issues/6253)
|
||||
- Sku: adjust border alignment [#6272](https://github.com/youzan/vant/issues/6272)
|
||||
- Sku: currency symbol should align to bottom [#6274](https://github.com/youzan/vant/issues/6274)
|
||||
- NoticeBar: increase icon min-width to 24px [#6280](https://github.com/youzan/vant/issues/6280)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: textarea line break failed on enter [#6263](https://github.com/youzan/vant/issues/6263)
|
||||
- NoticeBar: replay event only triggered once [#6293](https://github.com/youzan/vant/issues/6293)
|
||||
|
||||
### [v2.8.1](https://github.com/youzan/vant/compare/v2.8.1-beta.0...v2.8.1)
|
||||
|
||||
`2020-05-09`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: add lazy-render prop [#6245](https://github.com/youzan/vant/issues/6245)
|
||||
- Field: add click-input event [#6239](https://github.com/youzan/vant/issues/6239)
|
||||
- Sku: add sku-reset event [#6220](https://github.com/youzan/vant/issues/6220)
|
||||
- GoodsActionButton: improve test size adjust [b1dcf3](https://github.com/youzan/vant/commit/b1dcf36263ae7a19197f2c162e67f220dd171047)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Button: text should align center [8c53db](https://github.com/youzan/vant/commit/8c53db040dd0dfff60eca1ac284d98f13b4e4ce6)
|
||||
- Field: should not submit form on enter [#6240](https://github.com/youzan/vant/issues/6240)
|
||||
- Step: active-color should effect circle [#6229](https://github.com/youzan/vant/issues/6229)
|
||||
- Stepper: incorrect value when format minus value [#6238](https://github.com/youzan/vant/issues/6238)
|
||||
- Stepper: should not display NaN [7327a4](https://github.com/youzan/vant/commit/7327a481d18271393e25b17d4402dad6d336bb3a)
|
||||
- Stepper: should not emit focus when input is readonly [c6024b](https://github.com/youzan/vant/commit/c6024b18b4191a3a56db0bed1ababa48420c0946)
|
||||
|
||||
### [v2.8.0](https://github.com/youzan/vant/compare/v2.7.1...v2.8.0)
|
||||
|
||||
`2020-05-05`
|
||||
|
||||
**style**
|
||||
|
||||
- Button: use flex layout [#6180](https://github.com/youzan/vant/issues/6180)
|
||||
- ActionSheet: improve text size adjust [#6175](https://github.com/youzan/vant/issues/6175)
|
||||
- NavBar: improve text size adjust [7effb7](https://github.com/youzan/vant/commit/7effb7cf6cf59a8db1eb77fa16692712de4a18ba)
|
||||
- NoticeBar: improve text size adjust [#6177](https://github.com/youzan/vant/issues/6177)
|
||||
- NumberKeyboard: improve text size adjust [#6179](https://github.com/youzan/vant/issues/6179)
|
||||
- Pagination: improve text size adjust [#6178](https://github.com/youzan/vant/issues/6178)
|
||||
- PasswordInput: improve text size adjust [#6176](https://github.com/youzan/vant/issues/6176)
|
||||
- Picker: improve text size adjust [#6174](https://github.com/youzan/vant/issues/6174) [#6205](https://github.com/youzan/vant/issues/6205)
|
||||
- Picker: update action button color [#6214](https://github.com/youzan/vant/issues/6214)
|
||||
- Tab: improve text size adjust [#6209](https://github.com/youzan/vant/issues/6209)
|
||||
- CouponList: add @coupon-list-close-button-height less var [18a0c5](https://github.com/youzan/vant/commit/18a0c545ec881eb296ba6cc11dfaa12febd79e5c)
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: add unselect event [#6198](https://github.com/youzan/vant/issues/6198)
|
||||
- Calendar: support max-range when type is multiple [#6202](https://github.com/youzan/vant/issues/6202)
|
||||
- Field: add colon prop [#6195](https://github.com/youzan/vant/issues/6195)
|
||||
- Locale: adding Romanian language support [#6193](https://github.com/youzan/vant/issues/6193)
|
||||
- ShareSheet: improve accessibility [#6208](https://github.com/youzan/vant/issues/6208)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Checkbox: incorrect icon position after font-size scale [#6168](https://github.com/youzan/vant/issues/6168)
|
||||
- Layout: gutter calculation [#6197](https://github.com/youzan/vant/issues/6197) [#6143](https://github.com/youzan/vant/issues/6143)
|
||||
- NoticeBar: allow dynamic setting of scrollable [#6190](https://github.com/youzan/vant/issues/6190)
|
||||
- Radio: incorrect icon position after font-size scale [#6173](https://github.com/youzan/vant/issues/6173)
|
||||
- ShareSheet: incorrect scrollbar height in some browsers [#6207](https://github.com/youzan/vant/issues/6207)
|
||||
- Tab: fix ellipsis issue [#6209](https://github.com/youzan/vant/issues/6209)
|
||||
|
||||
### [v2.7.1](https://github.com/youzan/vant/compare/v2.7.0...v2.7.1)
|
||||
|
||||
`2020-04-28`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Revert "style(NavBar): left & right part align to bottom (#6147)" [#6147](https://github.com/youzan/vant/issues/6147)
|
||||
|
||||
### [v2.7.0](https://github.com/youzan/vant/compare/v2.6.3...v2.7.0)
|
||||
|
||||
`2020-04-28`
|
||||
|
||||
**style**
|
||||
|
||||
- NumberKeyboard: new style [3188b4](https://github.com/youzan/vant/commit/3188b4d25bb6e60ed5de930ec8947929a7577dd3) [#6149](https://github.com/youzan/vant/issues/6149) [#6151](https://github.com/youzan/vant/issues/6151)
|
||||
|
||||
<img src="https://b.yzcdn.cn/vant/keyboard-style-04281448.png" style="width: 600px; height: 394px;">
|
||||
|
||||
- add base-font-family [#6126](https://github.com/youzan/vant/issues/6126)
|
||||
- DropdownMenu: add box-shadow style [7db744](https://github.com/youzan/vant/commit/7db74490956ec9d4c742a885e436dc6915f1f9dc)
|
||||
- NavBar: left & right part align to bottom [#6147](https://github.com/youzan/vant/issues/6147)
|
||||
- Sidebar: add less vars [e1a7c6](https://github.com/youzan/vant/commit/e1a7c6668de0b7da58028210e174c9156e87bea2)
|
||||
- Sidebar: update border style [a31032](https://github.com/youzan/vant/commit/a31032e0d63956b2e9f0c75c8a85ca662fe42545)
|
||||
- Toast: increase border-radius to 8px [2364c4](https://github.com/youzan/vant/commit/2364c4f526912433abf5ee2f36e2148beea7140b)
|
||||
- TreeSelect: change checked icon to success icon [5b72e4](https://github.com/youzan/vant/commit/5b72e4339347a710620bf630f1bc8ee09511d63c)
|
||||
|
||||
**Feature**
|
||||
|
||||
- NoticeBar: add start method [#6069](https://github.com/youzan/vant/issues/6069)
|
||||
- ImagePreview: adjust double-click interval to 250ms [#6136](https://github.com/youzan/vant/issues/6136)
|
||||
- NumberKeyboard: add collapse icon [#6152](https://github.com/youzan/vant/issues/6152)
|
||||
- NumberKeyboard: add close-button-loading prop [#6158](https://github.com/youzan/vant/issues/6158)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Layout: outside of the screen after setting gutter [#6143](https://github.com/youzan/vant/issues/6143)
|
||||
- Tab: incorrect vnode order in some cases [#6140](https://github.com/youzan/vant/issues/6140)
|
||||
- uploader: automatically filter files exceeding the max-size [#6150](https://github.com/youzan/vant/issues/6150)
|
||||
- Uploader: file message should be reactive [#6142](https://github.com/youzan/vant/issues/6142)
|
||||
- types: VanComponent should extends Vue [#6148](https://github.com/youzan/vant/issues/6148)
|
||||
|
||||
### [v2.6.3](https://github.com/youzan/vant/compare/v2.6.2...v2.6.3)
|
||||
|
||||
`2020-04-20`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Tab: fail to init in some cases [#6101](https://github.com/youzan/vant/issues/6101)
|
||||
- sort vnode not work [#6100](https://github.com/youzan/vant/issues/6100)
|
||||
|
||||
### [v2.6.2](https://github.com/youzan/vant/compare/v2.6.1...v2.6.2)
|
||||
|
||||
`2020-04-18`
|
||||
|
||||
@ -10,6 +10,181 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
|
||||
|
||||
### [v2.8.4](https://github.com/youzan/vant/compare/v2.8.3...v2.8.4)
|
||||
|
||||
`2020-05-28`
|
||||
|
||||
**Feature**
|
||||
|
||||
- AddressList: 增加底部安全区适配 [#6355](https://github.com/youzan/vant/issues/6355)
|
||||
- DatetimePicker: 新增 month-day 类型，用于选择月份和日期 [#6395](https://github.com/youzan/vant/issues/6395)
|
||||
- Popup: 现在每个弹层会单独创建一个遮罩层，而不是共用一个遮罩层 [#6357](https://github.com/youzan/vant/issues/6357)
|
||||
|
||||
**style**
|
||||
|
||||
- ActionSheet: subname 的颜色调整为 gray-6 [e54c11](https://github.com/youzan/vant/commit/e54c11d55244e65246df7eddd7751983dbc4d331)
|
||||
- ActionSheet: 移除选项之间的分隔线 [8db218](https://github.com/youzan/vant/commit/8db218e9c0ca6905491a019cf983a0269f3aea8c)
|
||||
- Cell: 降低边框选择器的 CSS 优先级，便于覆盖样式 [#6359](https://github.com/youzan/vant/issues/6359)
|
||||
- Collapse: 调整边框与左右两侧的边距 [#6361](https://github.com/youzan/vant/issues/6361)
|
||||
- Collapse: 内容的字号增大为 14px [#6358](https://github.com/youzan/vant/issues/6358)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Area: 修复区列表为空时未默认选中第一个城市的问题 [#6356](https://github.com/youzan/vant/issues/6356)
|
||||
- Field: 修复设置 error 为 false 无法禁用错误提示颜色的问题 [#6382](https://github.com/youzan/vant/issues/6382)
|
||||
- GoodsAction: 修复只有一个按钮时圆角大小错误的问题 [#6347](https://github.com/youzan/vant/issues/6347)
|
||||
- Sidebar: 修复 v-model 绑定的值变化时不会触发 change 事件的问题 [#6383](https://github.com/youzan/vant/issues/6383)
|
||||
|
||||
### [v2.8.3](https://github.com/youzan/vant/compare/v2.8.2...v2.8.3)
|
||||
|
||||
`2020-05-21`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Form: 新增 submit-on-enter 属性，用于控制回车时是否提交表单 [#6336](https://github.com/youzan/vant/issues/6336)
|
||||
- Form: 优化 scrollToField 方法，支持通过传参来控制滚动位置 [#6335](https://github.com/youzan/vant/issues/6335)
|
||||
- Field: 调整 placeholder 的色值为 @gray-5 [#6304](https://github.com/youzan/vant/issues/6304)
|
||||
- Field: 使用 digit 类型时，只能在第一位输入减号 [#6303](https://github.com/youzan/vant/issues/6303)
|
||||
- Picker: 优化 methods 的类型定义，支持泛型 [#6315](https://github.com/youzan/vant/issues/6315)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Button: 修复在低版本 iOS 下按钮文字不居中的问题 [#6325](https://github.com/youzan/vant/issues/6325)
|
||||
- Calendar: 修复范围选择到同一天时 color 属性不生效的问题 [#6331](https://github.com/youzan/vant/issues/6331)
|
||||
|
||||
### [v2.8.2](https://github.com/youzan/vant/compare/v2.8.1...v2.8.2)
|
||||
|
||||
`2020-05-17`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Field: 新增 extra 插槽 [#6290](https://github.com/youzan/vant/issues/6290)
|
||||
- Grid: 新增 direction 属性 [#6256](https://github.com/youzan/vant/issues/6256)
|
||||
- Calendar: 新增 month-show 事件 [#6292](https://github.com/youzan/vant/issues/6292)
|
||||
- NumberKeyboard: 支持定义两个 extra-key [#6276](https://github.com/youzan/vant/issues/6276)
|
||||
- Stepper: 新增 theme 属性，用于展示圆角风格步进器 [#6282](https://github.com/youzan/vant/issues/6282)
|
||||
|
||||
**style**
|
||||
|
||||
- Rate: 更新禁用状态下的图标颜色 [#6253](https://github.com/youzan/vant/issues/6253)
|
||||
- Sku: 优化内部分割线的布局 [#6272](https://github.com/youzan/vant/issues/6272)
|
||||
- Sku: 价格符号由居中对齐调整为底对齐 [#6274](https://github.com/youzan/vant/issues/6274)
|
||||
- NoticeBar: 图标宽度由 22px 调整为 24px [#6280](https://github.com/youzan/vant/issues/6280)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: 修复 textarea 无法通过回车换行的问题 [#6263](https://github.com/youzan/vant/issues/6263)
|
||||
- NoticeBar: 修复 replay 事件只能触发一次的问题，内部动画机制由 animation 调整为 transition [#6293](https://github.com/youzan/vant/issues/6293)
|
||||
|
||||
### [v2.8.1](https://github.com/youzan/vant/compare/v2.8.1-beta.0...v2.8.1)
|
||||
|
||||
`2020-05-09`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: 新增 lazy-render 属性，用于控制是否开启延迟渲染 [#6245](https://github.com/youzan/vant/issues/6245)
|
||||
- Field: 新增 click-input 事件，在点击输入框时触发 [#6239](https://github.com/youzan/vant/issues/6239)
|
||||
- Sku: 新增 sku-reset 事件，在规格重置时触发 [#6220](https://github.com/youzan/vant/issues/6220)
|
||||
- GoodsActionButton: 适配系统字体放大 [b1dcf3](https://github.com/youzan/vant/commit/b1dcf36263ae7a19197f2c162e67f220dd171047)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Button: 修复文字在部分机型上不居中的问题 [8c53db](https://github.com/youzan/vant/commit/8c53db040dd0dfff60eca1ac284d98f13b4e4ce6)
|
||||
- Field: 修复回车键会触发表单提交的问题 [#6240](https://github.com/youzan/vant/issues/6240)
|
||||
- Step: 修复 active-color 属性对小圆点颜色不生效的问题 [#6229](https://github.com/youzan/vant/issues/6229)
|
||||
- Stepper: 修复输入负数时格式化错误的问题 [#6238](https://github.com/youzan/vant/issues/6238)
|
||||
- Stepper: 修复个别情况下会展示 NaN 的问题 [7327a4](https://github.com/youzan/vant/commit/7327a481d18271393e25b17d4402dad6d336bb3a)
|
||||
- Stepper: 修复设置 disable-input 属性后在部分浏览器上仍会触发 focus 事件的问题 [c6024b](https://github.com/youzan/vant/commit/c6024b18b4191a3a56db0bed1ababa48420c0946)
|
||||
|
||||
### [v2.8.0](https://github.com/youzan/vant/compare/v2.7.1...v2.8.0)
|
||||
|
||||
`2020-05-05`
|
||||
|
||||
**适配系统字体放大**
|
||||
|
||||
部分手机用户会使用<b>系统或微信提供的字体放大功能</b>，开启该功能后，组件的 font-size 和 line-height 会等比例放大，导致部分组件出现样式偏移的问题，在 2.8.0 版本中，我们针对这个场景进行了适配，使得所有组件在字体缩放后仍保持正确的布局，改动涉及以下组件：
|
||||
|
||||
- ActionSheet [#6175](https://github.com/youzan/vant/issues/6175)
|
||||
- Checkbox [#6168](https://github.com/youzan/vant/issues/6168)
|
||||
- NavBar [7effb7](https://github.com/youzan/vant/commit/7effb7cf6cf59a8db1eb77fa16692712de4a18ba)
|
||||
- NoticeBar [#6177](https://github.com/youzan/vant/issues/6177)
|
||||
- NumberKeyboard [#6179](https://github.com/youzan/vant/issues/6179)
|
||||
- Pagination [#6178](https://github.com/youzan/vant/issues/6178)
|
||||
- PasswordInput [#6176](https://github.com/youzan/vant/issues/6176)
|
||||
- Picker [#6174](https://github.com/youzan/vant/issues/6174) [#6205](https://github.com/youzan/vant/issues/6205)
|
||||
- Radio [#6173](https://github.com/youzan/vant/issues/6173)
|
||||
- Tab [#6209](https://github.com/youzan/vant/issues/6209)
|
||||
|
||||
**style**
|
||||
|
||||
- Button: 使用 flex 进行内容居中，display 由 inline-block 调整为 inline-flex [#6180](https://github.com/youzan/vant/issues/6180)
|
||||
- Picker: 优化顶部操作栏的样式，调整操作按钮颜色 [#6214](https://github.com/youzan/vant/issues/6214)
|
||||
- CouponList: 新增 @coupon-list-close-button-height 样式变量 [18a0c5](https://github.com/youzan/vant/commit/18a0c545ec881eb296ba6cc11dfaa12febd79e5c)
|
||||
|
||||
**Feature**
|
||||
|
||||
- Calendar: 新增 unselect 事件，在取消选中时触发 [#6198](https://github.com/youzan/vant/issues/6198)
|
||||
- Calendar: 支持在多选模式下使用 max-range 属性 [#6202](https://github.com/youzan/vant/issues/6202)
|
||||
- Field: 新增 colon 属性，用于配置是否显示冒号 [#6195](https://github.com/youzan/vant/issues/6195)
|
||||
- Locale: 新增罗马尼亚语配置文件 [#6193](https://github.com/youzan/vant/issues/6193)
|
||||
- ShareSheet: 优化无障碍访问 [#6208](https://github.com/youzan/vant/issues/6208)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Layout: 修复设置 gutter 属性后间距错误的问题 [#6197](https://github.com/youzan/vant/issues/6197) [#6143](https://github.com/youzan/vant/issues/6143)
|
||||
- NoticeBar: 修复动态修改 scrollable 属性后未正确生效的问题 [#6190](https://github.com/youzan/vant/issues/6190)
|
||||
- ShareSheet: 修复在部分浏览器上底部间距错误的问题 [#6207](https://github.com/youzan/vant/issues/6207)
|
||||
- Tab: 修复文字截断时无法正确展示徽标的问题 [#6209](https://github.com/youzan/vant/issues/6209)
|
||||
|
||||
### [v2.7.1](https://github.com/youzan/vant/compare/v2.7.0...v2.7.1)
|
||||
|
||||
`2020-04-28`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- 修复 NavBar 图标不居中的问题 [#6147](https://github.com/youzan/vant/issues/6147)
|
||||
|
||||
### [v2.7.0](https://github.com/youzan/vant/compare/v2.6.3...v2.7.0)
|
||||
|
||||
`2020-04-28`
|
||||
|
||||
**style**
|
||||
|
||||
- NumberKeyboard: 升级组件样式 [#6149](https://github.com/youzan/vant/issues/6149) [#6151](https://github.com/youzan/vant/issues/6151) [3188b4](https://github.com/youzan/vant/commit/3188b4d25bb6e60ed5de930ec8947929a7577dd3)
|
||||
|
||||
<img src="https://b.yzcdn.cn/vant/keyboard-style-04281448.png" style="width: 600px; height: 394px;">
|
||||
|
||||
- 新增全局默认字体 [#6126](https://github.com/youzan/vant/issues/6126)
|
||||
- DropdownMenu: 增加阴影效果 [7db744](https://github.com/youzan/vant/commit/7db74490956ec9d4c742a885e436dc6915f1f9dc)
|
||||
- Sidebar: 优化左侧选中条的样式 [a31032](https://github.com/youzan/vant/commit/a31032e0d63956b2e9f0c75c8a85ca662fe42545)
|
||||
- Toast: 圆角大小由 4px 调整为 8px [2364c4](https://github.com/youzan/vant/commit/2364c4f526912433abf5ee2f36e2148beea7140b)
|
||||
- TreeSelect: 选中态的图标从 checked 更换为 success 图标 [5b72e4](https://github.com/youzan/vant/commit/5b72e4339347a710620bf630f1bc8ee09511d63c)
|
||||
|
||||
**Feature**
|
||||
|
||||
- NoticeBar: 新增 start 方法 [#6069](https://github.com/youzan/vant/issues/6069)
|
||||
- ImagePreview: 双击缩放的间隔从 300 毫秒调整为 250 毫秒 [#6136](https://github.com/youzan/vant/issues/6136)
|
||||
- NumberKeyboard: 新增左下角默认的键盘图标，点击后收起键盘 [#6152](https://github.com/youzan/vant/issues/6152)
|
||||
- NumberKeyboard: 新增 close-button-loading 属性，用于展示加载中状态 [#6158](https://github.com/youzan/vant/issues/6158)
|
||||
- uploader: 多选时自动过滤超出大小限制的图片 [#6150](https://github.com/youzan/vant/issues/6150)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Layout: 修复设置 gutter 后元素宽度溢出屏幕的问题 [#6143](https://github.com/youzan/vant/issues/6143)
|
||||
- Tab: 修复子组件顺序错误的问题 [#6140](https://github.com/youzan/vant/issues/6140)
|
||||
- Uploader: 修复动态修改 file.message 未触发视图更新的问题 [#6142](https://github.com/youzan/vant/issues/6142)
|
||||
- NavBar: 修复设置顶部内边距后两侧按钮定位错误的问题 [#6147](https://github.com/youzan/vant/issues/6147)
|
||||
- types: 修复在 TSX 中使用组件时提示类型错误的问题 [#6148](https://github.com/youzan/vant/issues/6148)
|
||||
|
||||
### [v2.6.3](https://github.com/youzan/vant/compare/v2.6.2...v2.6.3)
|
||||
|
||||
`2020-04-20`
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Tab: 修复在部分浏览器上可能出现顺序错乱的问题 [#6100](https://github.com/youzan/vant/issues/6100)
|
||||
- Tab: 修复动态插入标签时可能出现渲染错误的问题 [#6101](https://github.com/youzan/vant/issues/6101)
|
||||
|
||||
### [v2.6.2](https://github.com/youzan/vant/compare/v2.6.1...v2.6.2)
|
||||
|
||||
`2020-04-18`
|
||||
|
||||
@ -43,6 +43,7 @@ Modern browsers and Android 4.0+, iOS 8.0+.
|
||||
|
||||
- [Feedback](https://github.com/youzan/vant/issues)
|
||||
- [Changelog](#/en-US/changelog)
|
||||
- [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||
|
||||
### LICENSE
|
||||
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
- [意见反馈](https://github.com/youzan/vant/issues)
|
||||
- [更新日志](#/zh-CN/changelog)
|
||||
- [码云镜像](https://gitee.com/organizations/vant-contrib)
|
||||
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
|
||||
|
||||
### 开源协议
|
||||
|
||||
|
||||
@ -99,12 +99,12 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
|
||||
<!-- import style -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css"
|
||||
href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"
|
||||
/>
|
||||
|
||||
<!-- import script -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Render the Button component
|
||||
@ -115,6 +115,9 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
|
||||
|
||||
// Call function component
|
||||
vant.Toast('Message');
|
||||
|
||||
// Register Lazyload directive
|
||||
Vue.use(vant.Lazyload);
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@ -116,12 +116,12 @@ Vue.use(Vant);
|
||||
<!-- 引入样式文件 -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css"
|
||||
href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"
|
||||
/>
|
||||
|
||||
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>
|
||||
|
||||
<script>
|
||||
// 在 #app 标签下渲染一个按钮组件
|
||||
@ -132,6 +132,10 @@ Vue.use(Vant);
|
||||
|
||||
// 调用函数组件，弹出一个 Toast
|
||||
vant.Toast('提示');
|
||||
|
||||
// 通过 CDN 引入时不会自动注册 Lazyload 组件
|
||||
// 可以通过下面的方式手动注册
|
||||
Vue.use(vant.Lazyload);
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@ -71,13 +71,15 @@ module.exports = {
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
modifyVars: {
|
||||
// overide with less vars
|
||||
'text-color': '#111',
|
||||
'border-color': '#eee'
|
||||
// or override with less file
|
||||
'hack': `true; @import "your-less-file-path.less";`
|
||||
},
|
||||
lessOptions: {
|
||||
modifyVars: {
|
||||
// overide with less vars
|
||||
'text-color': '#111',
|
||||
'border-color': '#eee'
|
||||
// or override with less file
|
||||
'hack': `true; @import "your-less-file-path.less";`
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -94,12 +96,14 @@ module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
less: {
|
||||
modifyVars: {
|
||||
// overide with less vars
|
||||
'text-color': '#111',
|
||||
'border-color': '#eee',
|
||||
// or override with less file
|
||||
hack: `true; @import "your-less-file-path.less";`,
|
||||
lessOptions: {
|
||||
modifyVars: {
|
||||
// overide with less vars
|
||||
'text-color': '#111',
|
||||
'border-color': '#eee',
|
||||
// or override with less file
|
||||
hack: `true; @import "your-less-file-path.less";`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -75,12 +75,15 @@ module.exports = {
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
modifyVars: {
|
||||
// 直接覆盖变量
|
||||
'text-color': '#111',
|
||||
'border-color': '#eee',
|
||||
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
|
||||
hack: `true; @import "your-less-file-path.less";`,
|
||||
// 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
|
||||
lessOptions: {
|
||||
modifyVars: {
|
||||
// 直接覆盖变量
|
||||
'text-color': '#111',
|
||||
'border-color': '#eee',
|
||||
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
|
||||
hack: `true; @import "your-less-file-path.less";`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -98,12 +101,15 @@ module.exports = {
|
||||
css: {
|
||||
loaderOptions: {
|
||||
less: {
|
||||
modifyVars: {
|
||||
// 直接覆盖变量
|
||||
'text-color': '#111',
|
||||
'border-color': '#eee',
|
||||
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
|
||||
hack: `true; @import "your-less-file-path.less";`,
|
||||
// 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
|
||||
lessOptions: {
|
||||
modifyVars: {
|
||||
// 直接覆盖变量
|
||||
'text-color': '#111',
|
||||
'border-color': '#eee',
|
||||
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
|
||||
hack: `true; @import "your-less-file-path.less";`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
23
package.json
23
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "2.6.2",
|
||||
"version": "2.8.4",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -30,21 +30,10 @@
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.md": [
|
||||
"prettier --write"
|
||||
],
|
||||
"*.{ts,tsx,js,vue,less}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"*.{ts,tsx,js,vue}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{vue,css,less}": [
|
||||
"stylelint --fix",
|
||||
"git add"
|
||||
]
|
||||
"*.md": "prettier --write",
|
||||
"*.{ts,tsx,js,vue,less}": "prettier --write",
|
||||
"*.{ts,tsx,js,vue}": "eslint --fix",
|
||||
"*.{vue,css,less}": "stylelint --fix"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -67,7 +56,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ls-lint/ls-lint": "^1.8.0",
|
||||
"@vant/cli": "^2.4.0",
|
||||
"@vant/cli": "^2.5.1",
|
||||
"@vue/compiler-sfc": "^3.0.0-beta.2",
|
||||
"prettier": "^2.0.4",
|
||||
"vue": "^3.0.0-beta.2"
|
||||
|
||||
@ -26,14 +26,8 @@
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js,jsx,vue}": [
|
||||
"eslint --fix",
|
||||
"git add"
|
||||
],
|
||||
"*.{vue,css,less,scss}": [
|
||||
"stylelint --fix",
|
||||
"git add"
|
||||
]
|
||||
"*.{ts,tsx,js,jsx,vue}": "eslint --fix",
|
||||
"*.{vue,css,less,scss}": "stylelint --fix"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.6.11",
|
||||
|
||||
@ -45,8 +45,8 @@ yarn add @vant/cli --dev
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js,jsx,vue}": ["eslint", "git add"],
|
||||
"*.{vue,css,less,scss}": ["stylelint", "git add"]
|
||||
"*.{js,jsx,ts,tsx,vue}": "eslint --fix",
|
||||
"*.{vue,css,less,scss}": "stylelint --fix"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
@ -73,7 +73,7 @@ yarn add @vant/cli --dev
|
||||
|
||||
扫码加入 Vant Cli 交流群，若群二维码过期，可以联系有赞前端小秘书加群
|
||||
|
||||
<img src="https://img.yzcdn.cn/vant/wechat_20200413.jpg" width="220" height="285" >
|
||||
<img src="https://img.yzcdn.cn/vant/wechat_20200527.jpeg" width="220" height="285" >
|
||||
|
||||
## 关于桌面端组件
|
||||
|
||||
|
||||
@ -1,19 +1,45 @@
|
||||
# 更新日志
|
||||
|
||||
### [v2.4.0]
|
||||
### v2.5.1
|
||||
|
||||
`2020-05-27`
|
||||
|
||||
- 移除多余的 log
|
||||
|
||||
### v2.5.0
|
||||
|
||||
`2020-05-27`
|
||||
|
||||
- 开启 fork-ts-checker-webpack-plugin，在编译时进行类型检查
|
||||
- 现在点击锚点时会立即滚动到对应位置
|
||||
|
||||
### v2.4.2
|
||||
|
||||
`2020-05-04`
|
||||
|
||||
- 升级 less-loader@6
|
||||
- 优化移动端示例导航栏样式
|
||||
|
||||
### v2.4.1
|
||||
|
||||
`2020-04-19`
|
||||
|
||||
- 支持 style 类型的 commit message
|
||||
|
||||
### v2.4.0
|
||||
|
||||
`2020-04-02`
|
||||
|
||||
- 升级 prettier v2
|
||||
- 升级 html-webpack-plugin v4
|
||||
|
||||
### [v2.3.1]
|
||||
### v2.3.1
|
||||
|
||||
`2020-03-29`
|
||||
|
||||
- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/youzan/vant/pull/5928))
|
||||
|
||||
### [v2.3.0]
|
||||
### v2.3.0
|
||||
|
||||
`2020-03-25`
|
||||
|
||||
@ -22,26 +48,26 @@
|
||||
- clean 命令现在会移除而不是清空文件夹 ([#5895](https://github.com/youzan/vant/issues/5895))
|
||||
- 升级 @vant/markdown-vetur 2.0.0
|
||||
|
||||
### [v2.2.8]
|
||||
### v2.2.8
|
||||
|
||||
`2020-03-20`
|
||||
|
||||
- 修复构建 changelog 可能失败的问题
|
||||
|
||||
### [v2.2.7]
|
||||
### v2.2.7
|
||||
|
||||
`2020-03-19`
|
||||
|
||||
- 新增 process.env.VANT_CLI_VERSION 环境变量
|
||||
|
||||
### [v2.2.6]
|
||||
### v2.2.6
|
||||
|
||||
`2020-03-18`
|
||||
|
||||
- 升级 commander 5
|
||||
- 修复右侧预览 iframe 链接可能错误的问题
|
||||
|
||||
### [v2.2.5]
|
||||
### v2.2.5
|
||||
|
||||
`2020-03-08`
|
||||
|
||||
@ -49,38 +75,38 @@
|
||||
- 优化代码块与底部文字之间的间距
|
||||
- 修复 create-vant-cli-app 初始化时报错的问题
|
||||
|
||||
### [v2.2.4]
|
||||
### v2.2.4
|
||||
|
||||
`2020-02-14`
|
||||
|
||||
- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/youzan/vant/pull/5655)
|
||||
|
||||
### [v2.2.3]
|
||||
### v2.2.3
|
||||
|
||||
`2020-02-13`
|
||||
|
||||
- 链接颜色调整为蓝色
|
||||
|
||||
### [v2.2.2]
|
||||
### v2.2.2
|
||||
|
||||
`2020-02-05`
|
||||
|
||||
- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/youzan/vant/pull/5626))
|
||||
|
||||
### [v2.2.1]
|
||||
### v2.2.1
|
||||
|
||||
`2020-02-04`
|
||||
|
||||
- 升级 babel@7.8
|
||||
- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/youzan/vant/pull/5620))
|
||||
|
||||
### [v2.2.0]
|
||||
### v2.2.0
|
||||
|
||||
`2020-01-19`
|
||||
|
||||
- 升级 @vant/eslint-config@2.0.0
|
||||
|
||||
### [v2.1.8]
|
||||
### v2.1.8
|
||||
|
||||
`2020-01-18`
|
||||
|
||||
@ -89,14 +115,14 @@
|
||||
- 优化站点导航栏颜色
|
||||
- 优化站点代码块颜色
|
||||
|
||||
### [v2.1.7]
|
||||
### v2.1.7
|
||||
|
||||
`2020-01-15`
|
||||
|
||||
- 优化 help 命令
|
||||
- 优化控制台输出信息
|
||||
|
||||
### [v2.1.6]
|
||||
### v2.1.6
|
||||
|
||||
`2020-01-12`
|
||||
|
||||
@ -105,14 +131,14 @@
|
||||
- 优化文档站点的 meta 字段
|
||||
- 新增 API 文档中的版本标签样式
|
||||
|
||||
### [v2.1.5]
|
||||
### v2.1.5
|
||||
|
||||
`2020-01-10`
|
||||
|
||||
- 修复编译时未替换 import 语句中的 CSS 后缀的问题
|
||||
- 升级 husky 版本到 4.0
|
||||
|
||||
### [v2.1.4]
|
||||
### v2.1.4
|
||||
|
||||
`2020-01-06`
|
||||
|
||||
@ -120,7 +146,7 @@
|
||||
|
||||
- 锁死 @vue/test-utils 版本为 1.0.0-beta.29
|
||||
|
||||
### [v2.1.3]
|
||||
### v2.1.3
|
||||
|
||||
`2020-01-06`
|
||||
|
||||
@ -129,7 +155,7 @@
|
||||
- 增加 cache-loader，提高构建速度
|
||||
- 调整 jest setup 文件执行时机，延迟至 env 初始化后执行
|
||||
|
||||
### [v2.1.2]
|
||||
### v2.1.2
|
||||
|
||||
`2020-01-05`
|
||||
|
||||
|
||||
@ -30,8 +30,8 @@ module.exports = {
|
||||
// 构建配置
|
||||
build: {
|
||||
site: {
|
||||
publicPath: '/demo-ui/'
|
||||
}
|
||||
publicPath: '/demo-ui/',
|
||||
},
|
||||
},
|
||||
// 文档站点配置
|
||||
site: {
|
||||
@ -48,21 +48,21 @@ module.exports = {
|
||||
items: [
|
||||
{
|
||||
path: 'home',
|
||||
title: '介绍'
|
||||
}
|
||||
]
|
||||
title: '介绍',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
path: 'my-button',
|
||||
title: 'MyButton 按钮'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
title: 'MyButton 按钮',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -84,9 +84,9 @@ CSS 预处理器配置，目前支持`less`和`sass`两种预处理器，默认
|
||||
module.exports = {
|
||||
build: {
|
||||
css: {
|
||||
preprocessor: 'sass'
|
||||
}
|
||||
}
|
||||
preprocessor: 'sass',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -103,9 +103,22 @@ module.exports = {
|
||||
module.exports = {
|
||||
build: {
|
||||
site: {
|
||||
publicPath: '/demo-ui/'
|
||||
}
|
||||
}
|
||||
publicPath: '/demo-ui/',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### build.srcDir
|
||||
|
||||
- Type: `string`
|
||||
- Default: `src`
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
build: {
|
||||
srcDir: 'myDir',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -150,12 +163,12 @@ module.exports = {
|
||||
// 导航项路由
|
||||
path: 'home',
|
||||
// 导航项文案
|
||||
title: '介绍'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
title: '介绍',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -172,10 +185,10 @@ module.exports = {
|
||||
versions: [
|
||||
{
|
||||
label: '1.x',
|
||||
link: 'https://youzan.github.io/vant/1.x/'
|
||||
}
|
||||
]
|
||||
}
|
||||
link: 'https://youzan.github.io/vant/1.x/',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -193,9 +206,9 @@ module.exports = {
|
||||
// 打开百度统计 ->『管理』->『代码获取』
|
||||
// 找到下面这串 URL: "https://hm.baidu.com/hm.js?xxxxx"
|
||||
// 将 `xxxxx` 填写在 seed 中即可
|
||||
seed: 'xxxxx'
|
||||
}
|
||||
}
|
||||
seed: 'xxxxx',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -208,8 +221,8 @@ module.exports = {
|
||||
```js
|
||||
module.exports = {
|
||||
devServer: {
|
||||
port: 9000
|
||||
}
|
||||
port: 9000,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -223,7 +236,7 @@ module.exports = {
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
presets: ['@vant/cli/preset']
|
||||
presets: ['@vant/cli/preset'],
|
||||
};
|
||||
```
|
||||
|
||||
@ -270,8 +283,8 @@ module.exports = {
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {}
|
||||
}
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/cli",
|
||||
"version": "2.4.0",
|
||||
"version": "2.5.1",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"typings": "lib/index.d.ts",
|
||||
@ -34,22 +34,22 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^8.1.0",
|
||||
"@types/lodash": "^4.14.149",
|
||||
"@types/lodash": "^4.14.150",
|
||||
"@types/postcss-load-config": "^2.0.1",
|
||||
"@types/webpack": "^4.41.10",
|
||||
"@types/webpack": "^4.41.12",
|
||||
"@types/webpack-dev-server": "^3.10.1",
|
||||
"@types/webpack-merge": "^4.1.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/core": "^7.9.6",
|
||||
"@babel/plugin-syntax-jsx": "^7.8.3",
|
||||
"@babel/plugin-transform-object-assign": "^7.8.3",
|
||||
"@babel/plugin-transform-runtime": "^7.9.0",
|
||||
"@babel/preset-env": "^7.9.5",
|
||||
"@babel/plugin-transform-runtime": "^7.9.6",
|
||||
"@babel/preset-env": "^7.9.6",
|
||||
"@babel/preset-typescript": "^7.9.0",
|
||||
"@nuxt/friendly-errors-webpack-plugin": "^2.5.0",
|
||||
"@types/jest": "^25.2.1",
|
||||
"@vant/eslint-config": "^2.0.0",
|
||||
"@vant/eslint-config": "^2.2.2",
|
||||
"@vant/markdown-loader": "^2.3.0",
|
||||
"@vant/markdown-vetur": "^2.0.1",
|
||||
"@vant/stylelint-config": "^1.3.0",
|
||||
@ -59,47 +59,48 @@
|
||||
"@vue/test-utils": "1.0.0-beta.29",
|
||||
"address": "^1.1.2",
|
||||
"autoprefixer": "^9.7.6",
|
||||
"babel-jest": "^25.3.0",
|
||||
"babel-jest": "^25.5.1",
|
||||
"babel-loader": "^8.1.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"babel-plugin-transform-jsx-vue3": "^0.1.8",
|
||||
"cache-loader": "^4.1.0",
|
||||
"chokidar": "^3.3.1",
|
||||
"chokidar": "^3.4.0",
|
||||
"clean-css": "^4.2.3",
|
||||
"codecov": "^3.6.5",
|
||||
"commander": "^5.0.0",
|
||||
"commander": "^5.1.0",
|
||||
"consola": "^2.11.3",
|
||||
"conventional-changelog": "^3.1.18",
|
||||
"cross-env": "^7.0.2",
|
||||
"css-loader": "^3.5.2",
|
||||
"css-loader": "^3.5.3",
|
||||
"eslint": "^6.8.0",
|
||||
"fast-glob": "^3.2.2",
|
||||
"fork-ts-checker-webpack-plugin": "^4.1.6",
|
||||
"gh-pages": "^2.2.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"html-webpack-plugin": "4.2.0",
|
||||
"html-webpack-plugin": "4.3.0",
|
||||
"husky": "^4.2.5",
|
||||
"jest": "^25.3.0",
|
||||
"jest": "^25.5.4",
|
||||
"jest-canvas-mock": "^2.2.0",
|
||||
"jest-serializer-vue": "^2.0.2",
|
||||
"less": "^3.11.1",
|
||||
"less-loader": "^5.0.0",
|
||||
"lint-staged": "^10.1.3",
|
||||
"less-loader": "^6.0.0",
|
||||
"lint-staged": "^10.2.2",
|
||||
"lodash": "^4.17.15",
|
||||
"ora": "^4.0.3",
|
||||
"portfinder": "^1.0.25",
|
||||
"postcss": "^7.0.27",
|
||||
"ora": "^4.0.4",
|
||||
"portfinder": "^1.0.26",
|
||||
"postcss": "^7.0.28",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"prettier": "^2.0.4",
|
||||
"release-it": "^13.5.2",
|
||||
"sass": "^1.26.3",
|
||||
"prettier": "^2.0.5",
|
||||
"release-it": "^13.5.7",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2",
|
||||
"style-loader": "^1.1.3",
|
||||
"stylelint": "^13.3.1",
|
||||
"style-loader": "^1.2.1",
|
||||
"stylelint": "^13.3.3",
|
||||
"typescript": "^3.8.3",
|
||||
"vue-jest": "4.0.0-beta.2",
|
||||
"vue-loader": "^16.0.0-alpha.3",
|
||||
"vue-router": "^4.0.0-alpha.7 ",
|
||||
"webpack": "^4.42.1",
|
||||
"vue-router": "^4.0.0-alpha.12",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-dev-server": "3.10.3",
|
||||
"webpack-merge": "^4.2.2",
|
||||
"webpackbar": "^4.0.0"
|
||||
|
||||
@ -6,7 +6,9 @@ body {
|
||||
overflow-x: auto;
|
||||
color: @van-doc-black;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
|
||||
Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft Yahei', sans-serif;
|
||||
background-color: @van-doc-background-color;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@ -4,9 +4,7 @@ export function scrollToAnchor(selector) {
|
||||
const timer = setInterval(() => {
|
||||
const el = document.querySelector(selector);
|
||||
if (el) {
|
||||
el.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
});
|
||||
el.scrollIntoView();
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
count++;
|
||||
|
||||
@ -39,9 +39,10 @@ export default {
|
||||
<style lang="less">
|
||||
.demo-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
|
||||
&__title {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { readFileSync } from 'fs-extra';
|
||||
import { consola } from '../common/logger';
|
||||
|
||||
const commitRE = /^(revert: )?(fix|feat|docs|perf|test|types|build|chore|refactor|breaking change)(\(.+\))?: .{1,50}/;
|
||||
const mergeRE = /Merge branch /;
|
||||
const commitRE = /^(revert: )?(fix|feat|docs|perf|test|types|style|build|chore|refactor|breaking change)(\(.+\))?: .{1,50}/;
|
||||
const mergeRE = /Merge /;
|
||||
|
||||
export function commitLint() {
|
||||
const gitParams = process.env.HUSKY_GIT_PARAMS as string;
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
import sass from 'sass';
|
||||
import FriendlyErrorsPlugin from '@nuxt/friendly-errors-webpack-plugin';
|
||||
import { VueLoaderPlugin } from 'vue-loader';
|
||||
import { join } from 'path';
|
||||
import { existsSync } from 'fs';
|
||||
import { consola } from '../common/logger';
|
||||
import {
|
||||
CWD,
|
||||
CACHE_DIR,
|
||||
STYLE_EXTS,
|
||||
SCRIPT_EXTS,
|
||||
@ -28,6 +32,35 @@ const CSS_LOADERS = [
|
||||
},
|
||||
];
|
||||
|
||||
const plugins = [
|
||||
new VueLoaderPlugin(),
|
||||
new FriendlyErrorsPlugin({
|
||||
clearConsole: false,
|
||||
logLevel: 'WARNING',
|
||||
}),
|
||||
];
|
||||
|
||||
const tsconfigPath = join(CWD, 'tsconfig.json');
|
||||
if (existsSync(tsconfigPath)) {
|
||||
const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
|
||||
plugins.push(
|
||||
new ForkTsCheckerPlugin({
|
||||
formatter: 'codeframe',
|
||||
vue: { enabled: true },
|
||||
logger: {
|
||||
// skip info message
|
||||
info() {},
|
||||
warn(message: string) {
|
||||
consola.warn(message);
|
||||
},
|
||||
error(message: string) {
|
||||
consola.error(message);
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
export const baseConfig = {
|
||||
mode: 'development',
|
||||
resolve: {
|
||||
@ -83,11 +116,5 @@ export const baseConfig = {
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
new FriendlyErrorsPlugin({
|
||||
clearConsole: false,
|
||||
logLevel: 'WARNING',
|
||||
}),
|
||||
],
|
||||
plugins,
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -57,7 +57,10 @@ module.exports = {
|
||||
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
|
||||
// typescript-eslint
|
||||
'@typescript-eslint/camelcase': 'off',
|
||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/eslint-config",
|
||||
"version": "2.2.0",
|
||||
"version": "2.2.2",
|
||||
"description": "eslint config of vant",
|
||||
"main": "index.js",
|
||||
"publishConfig": {
|
||||
|
||||
3
packages/vant-waterfall/babel.config.js
Normal file
3
packages/vant-waterfall/babel.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
presets: ['@babel/env'],
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/waterfall",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "vant waterfall component",
|
||||
"main": "lib/index.js",
|
||||
"publishConfig": {
|
||||
@ -13,9 +13,8 @@
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/youzan/vant/tree/dev/packages/vant-waterfall",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.4.4",
|
||||
"@babel/core": "^7.4.4",
|
||||
"@babel/plugin-transform-object-assign": "^7.2.0",
|
||||
"@babel/preset-env": "^7.4.4"
|
||||
"@babel/cli": "^7.8.4",
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/preset-env": "^7.9.5"
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -16,6 +16,7 @@ Vue.use(ActionSheet);
|
||||
Use `actions` prop to set options of action-sheet.
|
||||
|
||||
```html
|
||||
<van-cell is-link title="Basic Usage" @click="show = true" />
|
||||
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
||||
```
|
||||
|
||||
@ -27,9 +28,9 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option', subname: 'Description' },
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3' },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -49,6 +50,7 @@ export default {
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
close-on-click-action
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
@ -60,11 +62,15 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.show = false;
|
||||
Toast('cancel');
|
||||
},
|
||||
},
|
||||
@ -73,18 +79,13 @@ export default {
|
||||
|
||||
### Show Description
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" :actions="actions" description="Description" />
|
||||
```
|
||||
|
||||
### Option Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
@cancel="onCancel"
|
||||
description="Description"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
@ -94,9 +95,35 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3', subname: 'Description' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Option Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Colored Option', color: '#07c160' },
|
||||
{ name: 'Disabled Option', disabled: true },
|
||||
{ name: 'Loading Option', loading: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@ -17,9 +17,10 @@ Vue.use(ActionSheet);
|
||||
|
||||
### 基础用法
|
||||
|
||||
动作面板通过`actions`属性来定义选项，数组的每一项是一个对象，对象格式见文档下方表格。
|
||||
动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-cell is-link title="基础用法" @click="show = true" />
|
||||
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
||||
```
|
||||
|
||||
@ -30,11 +31,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项' },
|
||||
{ name: '选项' },
|
||||
{ name: '选项', subname: '描述信息' },
|
||||
],
|
||||
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -50,13 +47,14 @@ export default {
|
||||
|
||||
### 展示取消按钮
|
||||
|
||||
设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前面板
|
||||
设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
close-on-click-action
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
@ -68,12 +66,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.show = false;
|
||||
Toast('cancel');
|
||||
Toast('取消');
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -81,26 +79,15 @@ export default {
|
||||
|
||||
### 展示描述信息
|
||||
|
||||
设置`description`属性后，会在选项上方显示描述信息
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
description="这是一段描述信息"
|
||||
/>
|
||||
```
|
||||
|
||||
### 选项状态
|
||||
|
||||
可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色
|
||||
通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
@cancel="onCancel"
|
||||
description="这是一段描述信息"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
@ -110,9 +97,37 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: '选项一' },
|
||||
{ name: '选项二' },
|
||||
{ name: '选项三', subname: '描述信息' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选项状态
|
||||
|
||||
可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '着色选项', color: '#07c160' },
|
||||
{ name: '禁用选项', disabled: true },
|
||||
{ name: '加载选项', loading: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
@ -160,7 +175,7 @@ export default {
|
||||
|
||||
### Action 数据结构
|
||||
|
||||
`actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --------- | ------------------------ | --------- |
|
||||
|
||||
@ -28,13 +28,6 @@
|
||||
@select="onSelect"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.status"
|
||||
close-on-click-action
|
||||
:actions="statusActions"
|
||||
:cancel-text="t('cancel')"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.cancel"
|
||||
:actions="simpleActions"
|
||||
@ -45,11 +38,19 @@
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.description"
|
||||
:actions="simpleActions"
|
||||
:actions="actionsWithDescription"
|
||||
close-on-click-action
|
||||
:cancel-text="t('cancel')"
|
||||
:description="t('description')"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.status"
|
||||
close-on-click-action
|
||||
:actions="statusActions"
|
||||
:cancel-text="t('cancel')"
|
||||
/>
|
||||
|
||||
<van-action-sheet v-model="show.title" :title="t('title')">
|
||||
<div class="demo-action-sheet-content">{{ t('content') }}</div>
|
||||
</van-action-sheet>
|
||||
@ -62,22 +63,30 @@ import { GREEN } from '../../utils/constant';
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
subname: '副文本',
|
||||
option1: '选项一',
|
||||
option2: '选项二',
|
||||
option3: '选项三',
|
||||
subname: '描述信息',
|
||||
showCancel: '展示取消按钮',
|
||||
buttonText: '弹出菜单',
|
||||
customPanel: '自定义面板',
|
||||
description: '这是一段描述信息',
|
||||
optionStatus: '选项状态',
|
||||
coloredOption: '着色选项',
|
||||
disabledOption: '禁用选项',
|
||||
showDescription: '展示描述信息',
|
||||
},
|
||||
'en-US': {
|
||||
subname: 'Subname',
|
||||
option1: 'Option 1',
|
||||
option2: 'Option 2',
|
||||
option3: 'Option 3',
|
||||
subname: 'Description',
|
||||
showCancel: 'Show Cancel Button',
|
||||
buttonText: 'Show ActionSheet',
|
||||
customPanel: 'Custom Panel',
|
||||
description: 'Description',
|
||||
optionStatus: 'Option Status',
|
||||
coloredOption: 'Colored Option',
|
||||
disabledOption: 'Disabled Option',
|
||||
showDescription: 'Show Description',
|
||||
},
|
||||
@ -98,17 +107,25 @@ export default {
|
||||
computed: {
|
||||
simpleActions() {
|
||||
return [
|
||||
{ name: this.t('option') },
|
||||
{ name: this.t('option') },
|
||||
{ name: this.t('option'), subname: this.t('subname') },
|
||||
{ name: this.t('option1') },
|
||||
{ name: this.t('option2') },
|
||||
{ name: this.t('option3') },
|
||||
];
|
||||
},
|
||||
|
||||
actionsWithDescription() {
|
||||
return [
|
||||
{ name: this.t('option1') },
|
||||
{ name: this.t('option2') },
|
||||
{ name: this.t('option3'), subname: this.t('subname') },
|
||||
];
|
||||
},
|
||||
|
||||
statusActions() {
|
||||
return [
|
||||
{ name: this.t('option'), color: GREEN },
|
||||
{ loading: true },
|
||||
{ name: this.t('coloredOption'), color: GREEN },
|
||||
{ name: this.t('disabledOption'), disabled: true },
|
||||
{ loading: true },
|
||||
];
|
||||
},
|
||||
},
|
||||
@ -120,7 +137,7 @@ export default {
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.$toast('cancel');
|
||||
this.$toast(this.t('cancel'));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import '../style/var';
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
.van-action-sheet {
|
||||
max-height: @action-sheet-max-height;
|
||||
@ -8,10 +9,10 @@
|
||||
&__cancel {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @action-sheet-item-height;
|
||||
padding: 0;
|
||||
font-size: @action-sheet-item-font-size;
|
||||
line-height: @action-sheet-item-height;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
background-color: @action-sheet-item-background;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@ -22,8 +23,6 @@
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: @action-sheet-item-height;
|
||||
|
||||
&--loading,
|
||||
&--disabled {
|
||||
color: @action-sheet-item-disabled-text-color;
|
||||
@ -48,11 +47,10 @@
|
||||
font-size: @action-sheet-subname-font-size;
|
||||
}
|
||||
|
||||
&__cancel::before {
|
||||
&__gap {
|
||||
display: block;
|
||||
height: @action-sheet-cancel-padding-top;
|
||||
background-color: @action-sheet-cancel-padding-color;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&__header {
|
||||
@ -63,11 +61,16 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
position: relative;
|
||||
padding: @padding-md;
|
||||
color: @action-sheet-description-color;
|
||||
font-size: @action-sheet-description-font-size;
|
||||
line-height: @action-sheet-description-line-height;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
import { BORDER_TOP } from '../utils/constant';
|
||||
|
||||
// Mixins
|
||||
import { popupMixinProps } from '../mixins/popup';
|
||||
@ -110,7 +109,7 @@ function ActionSheet(
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class={[bem('item', { disabled, loading }), item.className, BORDER_TOP]}
|
||||
class={[bem('item', { disabled, loading }), item.className]}
|
||||
style={{ color: item.color }}
|
||||
onClick={onClickOption}
|
||||
>
|
||||
@ -121,11 +120,12 @@ function ActionSheet(
|
||||
|
||||
function CancelText() {
|
||||
if (cancelText) {
|
||||
return (
|
||||
return [
|
||||
<div class={bem('gap')} />,
|
||||
<button type="button" class={bem('cancel')} onClick={onCancel}>
|
||||
{cancelText}
|
||||
</button>
|
||||
);
|
||||
</button>,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`callback events 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading van-hairline--top">
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><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 type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>
|
||||
</button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`close-icon prop 1`] = `
|
||||
@ -13,15 +15,19 @@ exports[`close-icon prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
|
||||
exports[`description prop 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button>
|
||||
<div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>`;
|
||||
exports[`disable lazy-render 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render title and default slot 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
@ -31,4 +37,4 @@ exports[`render title and default slot 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
|
||||
@ -51,7 +51,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block van-button--round"><span class="van-button__text">删除</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button><button class="van-button van-button--default van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">删除</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,9 @@ exports[`create a AddressEdit 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -88,7 +90,9 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -141,7 +145,9 @@ exports[`set-default 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -194,7 +200,9 @@ exports[`show area component 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -247,7 +255,9 @@ exports[`show area component 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -286,6 +296,8 @@ exports[`valid area placeholder confirm 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -38,6 +38,7 @@ export default {
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
address: 'Somewhere',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
|
||||
@ -38,6 +38,7 @@ export default {
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
|
||||
@ -12,12 +12,15 @@
|
||||
z-index: @address-list-add-button-z-index;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 5px @padding-md;
|
||||
padding: 0 @padding-md;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
&__add {
|
||||
height: 40px;
|
||||
margin: 5px 0;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
|
||||
@ -40,7 +40,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新增地址</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,6 +22,8 @@ exports[`unswitchable 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新增地址</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -20,7 +20,7 @@ Vue.use(Area);
|
||||
To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
<van-area title="Title" :area-list="areaList" />
|
||||
```
|
||||
|
||||
### Initial Value
|
||||
@ -28,7 +28,7 @@ To initailize `Area` component, `area-list` property is required. Data structure
|
||||
To have a selected value，simply pass the `code` of target area to `value` property.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101" />
|
||||
<van-area title="Title" :area-list="areaList" value="110101" />
|
||||
```
|
||||
|
||||
### Columns Number
|
||||
@ -36,7 +36,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="Title" />
|
||||
<van-area title="Title" :area-list="areaList" :columns-num="2" />
|
||||
```
|
||||
|
||||
### Columns Placeholder
|
||||
@ -45,9 +45,9 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
|
||||
```html
|
||||
<van-area
|
||||
title="Title"
|
||||
:area-list="areaList"
|
||||
:columns-placeholder="['Choose', 'Choose', 'Choose']"
|
||||
title="Title"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ Vue.use(Area);
|
||||
要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
<van-area title="标题" :area-list="areaList" />
|
||||
```
|
||||
|
||||
### 选中省市区
|
||||
@ -28,7 +28,7 @@ Vue.use(Area);
|
||||
如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101" />
|
||||
<van-area title="标题" :area-list="areaList" value="110101" />
|
||||
```
|
||||
|
||||
### 配置显示列
|
||||
@ -36,7 +36,7 @@ Vue.use(Area);
|
||||
可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="标题" />
|
||||
<van-area title="标题" :area-list="areaList" :columns-num="2" />
|
||||
```
|
||||
|
||||
### 配置列占位提示文字
|
||||
@ -45,9 +45,9 @@ Vue.use(Area);
|
||||
|
||||
```html
|
||||
<van-area
|
||||
title="标题"
|
||||
:area-list="areaList"
|
||||
:columns-placeholder="['请选择', '请选择', '请选择']"
|
||||
title="标题"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-area :area-list="t('areaList')" />
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<van-area :area-list="t('areaList')" :value="value" />
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
:columns-num="2"
|
||||
:title="t('title')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title4')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
:columns-placeholder="t('columnsPlaceholder')"
|
||||
:title="t('title')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
|
||||
@ -197,17 +197,29 @@ export default createComponent({
|
||||
this.$emit('confirm', values, index);
|
||||
},
|
||||
|
||||
getDefaultCode() {
|
||||
if (this.columnsPlaceholder.length) {
|
||||
return PLACEHOLDER_CODE;
|
||||
}
|
||||
|
||||
const countyCodes = Object.keys(this.county);
|
||||
if (countyCodes[0]) {
|
||||
return countyCodes[0];
|
||||
}
|
||||
|
||||
const cityCodes = Object.keys(this.city);
|
||||
if (cityCodes[0]) {
|
||||
return cityCodes[0];
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
|
||||
setValues() {
|
||||
let { code } = this;
|
||||
|
||||
if (!code) {
|
||||
if (this.columnsPlaceholder.length) {
|
||||
code = PLACEHOLDER_CODE;
|
||||
} else if (Object.keys(this.county)[0]) {
|
||||
code = Object.keys(this.county)[0];
|
||||
} else {
|
||||
code = '';
|
||||
}
|
||||
code = this.getDefaultCode();
|
||||
}
|
||||
|
||||
const { picker } = this.$refs;
|
||||
|
||||
@ -4,208 +4,177 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">丰台区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">石景山区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海淀区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">门头沟区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">房山区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">通州区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">顺义区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">昌平区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">大兴区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">怀柔区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">平谷区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">密云区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">延庆区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">绍兴市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">金华市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">衢州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">舟山市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">丽水市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">鹿城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">龙湾区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">洞头区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">永嘉县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">平阳县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">苍南县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">文成县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">泰顺县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">瑞安市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">乐清市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">朝阳区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">丰台区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">石景山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海淀区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">门头沟区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">房山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">通州区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">顺义区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">昌平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">大兴区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">怀柔区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">平谷区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">密云区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">延庆区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -216,56 +185,453 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">请选择</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">绍兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">金华市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">衢州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">舟山市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">丽水市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">鹿城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">龙湾区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">瓯海区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">洞头区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">永嘉县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">平阳县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">苍南县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">文成县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">泰顺县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">瑞安市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">乐清市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">请选择</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
|
||||
@ -2,25 +2,37 @@
|
||||
|
||||
exports[`change option 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -32,25 +44,37 @@ exports[`change option 1`] = `
|
||||
|
||||
exports[`change option 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">和平区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -62,25 +86,37 @@ exports[`change option 2`] = `
|
||||
|
||||
exports[`change option 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -92,19 +128,27 @@ exports[`change option 3`] = `
|
||||
|
||||
exports[`columns-num prop 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -116,16 +160,16 @@ exports[`columns-num prop 1`] = `
|
||||
|
||||
exports[`columns-top、columns-bottom slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->Top<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
@ -136,24 +180,34 @@ exports[`columns-top、columns-bottom slot 1`] = `
|
||||
|
||||
exports[`reset method 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">蓟县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">蓟县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -165,25 +219,37 @@ exports[`reset method 1`] = `
|
||||
|
||||
exports[`reset method 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -195,17 +261,17 @@ exports[`reset method 2`] = `
|
||||
|
||||
exports[`title slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom Title<button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom Title<button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
@ -216,25 +282,37 @@ exports[`title slot 1`] = `
|
||||
|
||||
exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -246,25 +324,37 @@ exports[`watch areaList & code 1`] = `
|
||||
|
||||
exports[`watch areaList & code 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -276,25 +366,37 @@ exports[`watch areaList & code 2`] = `
|
||||
|
||||
exports[`watch areaList & code 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
cursor: pointer;
|
||||
transition: opacity @animation-duration-fast;
|
||||
-webkit-appearance: none;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@ -95,7 +94,6 @@
|
||||
&--large {
|
||||
width: 100%;
|
||||
height: @button-large-height;
|
||||
line-height: @button-large-line-height;
|
||||
}
|
||||
|
||||
&--normal {
|
||||
@ -108,21 +106,16 @@
|
||||
height: @button-small-height;
|
||||
padding: 0 @padding-xs;
|
||||
font-size: @button-small-font-size;
|
||||
line-height: @button-small-line-height;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
display: inline-block;
|
||||
min-width: @button-mini-min-width;
|
||||
height: @button-mini-height;
|
||||
font-size: @button-mini-font-size;
|
||||
line-height: @button-mini-line-height;
|
||||
|
||||
& + .van-button--mini {
|
||||
margin-left: @padding-base;
|
||||
@ -151,18 +144,24 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// align-items are ignored when flex container is a button in legacy safari
|
||||
// see: https://bugs.webkit.org/show_bug.cgi?id=169700
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
min-width: 1em;
|
||||
font-size: 1.2em;
|
||||
line-height: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__icon + &__text,
|
||||
&__loading + &__text {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&--hairline {
|
||||
|
||||
@ -149,7 +149,7 @@ function Button(
|
||||
onTouchstart={onTouchstart}
|
||||
{...inherit(ctx)}
|
||||
>
|
||||
{Content()}
|
||||
<div class={bem('content')}>{Content()}</div>
|
||||
</tag>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,26 +3,84 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
|
||||
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">主要按钮</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">信息按钮</span></div>
|
||||
</button></div> <button class="van-button van-button--danger van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">危险按钮</span></div>
|
||||
</button> <button class="van-button van-button--warning van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">警告按钮</span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><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 class="van-button van-button--primary van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain">
|
||||
<div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--plain">
|
||||
<div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround">
|
||||
<div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround">
|
||||
<div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
|
||||
</button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled">
|
||||
<div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
|
||||
</button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled">
|
||||
<div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--loading">
|
||||
<div class="van-button__content">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal van-button--loading">
|
||||
<div class="van-button__content">
|
||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
||||
</div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--loading">
|
||||
<div class="van-button__content">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
|
||||
</div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--square">
|
||||
<div class="van-button__content"><span class="van-button__text">方形按钮</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">圆形按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i><span class="van-button__text">按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal van-button--plain">
|
||||
<div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
|
||||
<!----></i><span class="van-button__text">按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--large">
|
||||
<div class="van-button__content"><span class="van-button__text">大号按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">普通按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--small">
|
||||
<div class="van-button__content"><span class="van-button__text">小型按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--mini">
|
||||
<div class="van-button__content"><span class="van-button__text">迷你按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--block">
|
||||
<div class="van-button__content"><span class="van-button__text">块级元素</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">URL 跳转</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">路由跳转</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
|
||||
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
|
||||
</button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
|
||||
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
|
||||
</button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
|
||||
<div class="van-button__content"><span class="van-button__text">渐变色按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
|
||||
<!----></i><span class="van-button__text">按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">块级元素</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
|
||||
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`icon-prefix prop 1`] = `
|
||||
<button class="van-button van-button--default van-button--normal"><i class="my-icon my-icon-success van-button__icon">
|
||||
<!----></i></button>
|
||||
<button class="van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content"><i class="my-icon my-icon-success van-button__icon">
|
||||
<!----></i></div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`loading-size prop 1`] = `
|
||||
<button class="van-button van-button--default van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><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-button__content">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
@ -228,6 +228,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
|
||||
| row-height | Row height | _number \| string_ | `64` |
|
||||
| formatter | Day formatter | _(day: Day) => Day_ | - |
|
||||
| poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
|
||||
| lazy-render `v2.8.1` | Whether to enable lazy render | _boolean_ | `true` |
|
||||
| show-mark | Whether to show background month mark | _boolean_ | `true` |
|
||||
| show-title `v2.5.5` | Whether to show title | _boolean_ | `true` |
|
||||
| show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` |
|
||||
@ -255,10 +256,19 @@ Following props are supported when the type is range
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range `v2.4.3` | Number of selectable days | _number \| string_ | - |
|
||||
| max-range `v2.4.3` | Number of selectable days | _number \| string_ | Unlimitied |
|
||||
| range-prompt `v2.4.3` | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
|
||||
| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | _boolean_ | `fasle` |
|
||||
|
||||
### Multiple Props
|
||||
|
||||
Following props are supported when the type is multiple
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range `v2.7.2` | Max count of selectable days | _number \| string_ | Unlimitied |
|
||||
| range-prompt `v2.4.3` | Error message when exceeded max count | _string_ | `Choose no more than xx days` |
|
||||
|
||||
### Data Structure of Day
|
||||
|
||||
| Key | Description | Type |
|
||||
@ -280,6 +290,8 @@ Following props are supported when the type is range
|
||||
| close `v2.5.2` | Triggered when close Popup | - |
|
||||
| opened `v2.5.2` | Triggered when opened Popup | - |
|
||||
| closed `v2.5.2` | Triggered when closed Popup | - |
|
||||
| unselect `v2.7.2` | Triggered when unselect date when type is multiple | _value: Date_ |
|
||||
| month-show `v2.8.2` | Triggered when a month enters the visible area | _{ date: Date, title: string }_ |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -230,6 +230,7 @@ export default {
|
||||
| row-height | 日期行高 | _number \| string_ | `64` |
|
||||
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
|
||||
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
|
||||
| lazy-render `v2.8.1` | 是否只渲染可视区域的内容 | _boolean_ | `true` |
|
||||
| show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
|
||||
| show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` |
|
||||
| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | _boolean_ | `true` |
|
||||
@ -257,10 +258,19 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
|
||||
| max-range `v2.4.3` | 日期区间最多可选天数 | _number \| string_ | 无限制 |
|
||||
| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
|
||||
| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` |
|
||||
|
||||
### Multiple Props
|
||||
|
||||
当 Canlendar 的 `type` 为 `multiple` 时，支持以下 props:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range `v2.7.2` | 日期最多可选天数 | _number \| string_ | 无限制 |
|
||||
| range-prompt `v2.4.3` | 选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
|
||||
|
||||
### Day 数据结构
|
||||
|
||||
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容
|
||||
@ -278,12 +288,14 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| select | 点击任意日期时触发 | _value: Date \| Date[]_ |
|
||||
| select | 点击并选中任意日期时触发 | _value: Date \| Date[]_ |
|
||||
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
|
||||
| open `v2.5.2` | 打开弹出层时触发 | - |
|
||||
| close `v2.5.2` | 关闭弹出层时触发 | - |
|
||||
| opened `v2.5.2` | 打开弹出层且动画结束后触发 | - |
|
||||
| closed `v2.5.2` | 关闭弹出层且动画结束后触发 | - |
|
||||
| unselect `v2.7.2` | 当日历组件的 `type` 为 `multiple` 时，取消选中日期时触发 | _value: Date_ |
|
||||
| month-show `v2.8.2` | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -22,6 +22,7 @@ export default createComponent({
|
||||
showMark: Boolean,
|
||||
rowHeight: [Number, String],
|
||||
formatter: Function,
|
||||
lazyRender: Boolean,
|
||||
currentDate: [Date, Array],
|
||||
allowSameDay: Boolean,
|
||||
showSubtitle: Boolean,
|
||||
@ -47,8 +48,12 @@ export default createComponent({
|
||||
return getMonthEndDay(this.date.getFullYear(), this.date.getMonth() + 1);
|
||||
},
|
||||
|
||||
shouldRender() {
|
||||
return this.visible || !this.lazyRender;
|
||||
},
|
||||
|
||||
monthStyle() {
|
||||
if (!this.visible) {
|
||||
if (!this.shouldRender) {
|
||||
const padding =
|
||||
Math.ceil((this.totalDay + this.offset) / 7) * this.rowHeight;
|
||||
|
||||
@ -201,6 +206,7 @@ export default createComponent({
|
||||
if (
|
||||
type === 'start' ||
|
||||
type === 'end' ||
|
||||
type === 'start-end' ||
|
||||
type === 'multiple-selected' ||
|
||||
type === 'multiple-middle'
|
||||
) {
|
||||
@ -226,7 +232,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genDays() {
|
||||
if (this.visible) {
|
||||
if (this.shouldRender) {
|
||||
return (
|
||||
<div ref="days" role="grid" class={bem('days')}>
|
||||
{this.genMark()}
|
||||
|
||||
@ -4,6 +4,7 @@ import { getScrollTop } from '../utils/dom/scroll';
|
||||
import {
|
||||
t,
|
||||
bem,
|
||||
copyDate,
|
||||
copyDates,
|
||||
getNextDay,
|
||||
compareDay,
|
||||
@ -67,6 +68,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showMark: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@ -248,6 +253,13 @@ export default createComponent({
|
||||
currentMonth = months[i];
|
||||
}
|
||||
|
||||
if (!months[i].visible && visible) {
|
||||
this.$emit('month-show', {
|
||||
date: months[i].date,
|
||||
title: months[i].title,
|
||||
});
|
||||
}
|
||||
|
||||
months[i].visible = visible;
|
||||
height += heights[i];
|
||||
}
|
||||
@ -290,7 +302,10 @@ export default createComponent({
|
||||
});
|
||||
|
||||
if (selected) {
|
||||
currentDate.splice(selectedIndex, 1);
|
||||
const [unselectedDate] = currentDate.splice(selectedIndex, 1);
|
||||
this.$emit('unselect', copyDate(unselectedDate));
|
||||
} else if (this.maxRange && currentDate.length >= this.maxRange) {
|
||||
Toast(this.rangePrompt || t('rangePrompt', this.maxRange));
|
||||
} else {
|
||||
this.select([...currentDate, date]);
|
||||
}
|
||||
@ -359,6 +374,7 @@ export default createComponent({
|
||||
showMark={this.showMark}
|
||||
formatter={this.formatter}
|
||||
rowHeight={this.rowHeight}
|
||||
lazyRender={this.lazyRender}
|
||||
currentDate={this.currentDate}
|
||||
showSubtitle={this.showSubtitle}
|
||||
allowSameDay={this.allowSameDay}
|
||||
|
||||
@ -184,6 +184,5 @@
|
||||
&__confirm {
|
||||
height: @calendar-confirm-button-height;
|
||||
margin: @calendar-confirm-button-margin;
|
||||
line-height: @calendar-confirm-button-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,7 +47,9 @@ exports[`color prop when type is range 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -98,7 +100,9 @@ exports[`color prop when type is single 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -152,7 +156,9 @@ exports[`formatter prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -206,7 +212,9 @@ exports[`popup wrapper 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
|
||||
<!----></i>
|
||||
</div>
|
||||
@ -259,7 +267,9 @@ exports[`row-height prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
52
src/calendar/test/__snapshots__/prop.spec.js.snap
Normal file
52
src/calendar/test/__snapshots__/prop.spec.js.snap
Normal file
@ -0,0 +1,52 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`lazy-render prop 1`] = `
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">日期选择</div>
|
||||
<div class="van-calendar__header-subtitle"></div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">20</div>
|
||||
</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
@ -87,6 +87,27 @@ test('select event when type is multiple', async () => {
|
||||
);
|
||||
});
|
||||
|
||||
test('select event when type is multiple', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'multiple',
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false,
|
||||
defaultDate: [minDate],
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(15).trigger('click');
|
||||
await later();
|
||||
days.at(15).trigger('click');
|
||||
|
||||
expect(formatDate(wrapper.emitted('unselect')[0][0])).toEqual('2010/1/16');
|
||||
});
|
||||
|
||||
test('should not trigger select event when click disabled day', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
|
||||
@ -2,7 +2,7 @@ import Calendar from '..';
|
||||
import { mount, later } from '../../../test';
|
||||
import { minDate, maxDate, formatRange, formatDate } from './utils';
|
||||
|
||||
test('max-range prop when showConfirm is false', async () => {
|
||||
test('max-range prop when type is range and showConfirm is false', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'range',
|
||||
@ -27,7 +27,7 @@ test('max-range prop when showConfirm is false', async () => {
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('max-range prop when showConfirm is true', async () => {
|
||||
test('max-range prop when type is range and showConfirm is true', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'range',
|
||||
@ -51,6 +51,27 @@ test('max-range prop when showConfirm is true', async () => {
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('max-range prop when type is multiple', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'multiple',
|
||||
minDate,
|
||||
maxDate,
|
||||
maxRange: 2,
|
||||
poppable: false,
|
||||
showConfirm: false,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(13).trigger('click');
|
||||
days.at(14).trigger('click');
|
||||
|
||||
expect(wrapper.emitted('select').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('show-title prop', () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
@ -146,3 +167,27 @@ test('min-date before current time', () => {
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('1800/1/2');
|
||||
});
|
||||
|
||||
test('lazy-render prop', () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false,
|
||||
lazyRender: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test.only('month-show event', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('month-show')).toBeTruthy();
|
||||
});
|
||||
|
||||
@ -57,6 +57,10 @@ export function calcDateNum(date: [Date, Date]) {
|
||||
return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
|
||||
}
|
||||
|
||||
export function copyDate(dates: Date) {
|
||||
return new Date(dates);
|
||||
}
|
||||
|
||||
export function copyDates(dates: Date | Date[]) {
|
||||
if (Array.isArray(dates)) {
|
||||
return dates.map((date) => {
|
||||
@ -64,9 +68,9 @@ export function copyDates(dates: Date | Date[]) {
|
||||
return date;
|
||||
}
|
||||
|
||||
return new Date(date);
|
||||
return copyDate(date);
|
||||
});
|
||||
}
|
||||
|
||||
return new Date(dates);
|
||||
return copyDate(dates);
|
||||
}
|
||||
|
||||
@ -77,11 +77,15 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-card__footer">
|
||||
<div><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||
<div><button class="van-button van-button--default van-button--mini van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
按钮
|
||||
</span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--default van-button--mini van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
按钮
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -154,10 +154,11 @@ Vue.use(CellGroup);
|
||||
|
||||
### Cell Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---------- | ----------------- |
|
||||
| default | Custom value |
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| label | Custom label |
|
||||
| right-icon | Custom right icon |
|
||||
| Name | Description |
|
||||
| ---------- | --------------------------------- |
|
||||
| default | Custom value |
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| label | Custom label |
|
||||
| right-icon | Custom right icon |
|
||||
| extra | Custom extra content on the right |
|
||||
|
||||
@ -159,8 +159,9 @@ Vue.use(CellGroup);
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ---------- | ----------------------------- |
|
||||
| default | 自定义右侧内容 |
|
||||
| title | 自定义左侧标题 |
|
||||
| label | 自定义标题下方描述 |
|
||||
| default | 自定义右侧 value 的内容 |
|
||||
| title | 自定义左侧 title 的内容 |
|
||||
| label | 自定义标题下方 label 的内容 |
|
||||
| icon | 自定义左侧图标 |
|
||||
| right-icon | 自定义右侧按钮，默认为`arrow` |
|
||||
| extra | 自定义单元格最右侧的额外内容 |
|
||||
|
||||
@ -13,10 +13,11 @@
|
||||
line-height: @cell-line-height;
|
||||
background-color: @cell-background-color;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
&::after {
|
||||
.hairline-bottom(@cell-border-color, @padding-md);
|
||||
}
|
||||
|
||||
&:last-child::after,
|
||||
&--borderless::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
height: 1.25em;
|
||||
color: transparent;
|
||||
font-size: 0.8em;
|
||||
line-height: inherit;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
border: 1px solid @checkbox-border-color;
|
||||
transition-duration: @checkbox-transition-duration;
|
||||
|
||||
@ -116,11 +116,15 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
<div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
全选
|
||||
</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
反选
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox-group">
|
||||
|
||||
@ -48,6 +48,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-circle__text">大小定制</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">增加</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">减少</span></button></div>
|
||||
<div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small">
|
||||
<div class="van-button__content"><span class="van-button__text">增加</span></div>
|
||||
</button> <button class="van-button van-button--danger van-button--small">
|
||||
<div class="van-button__content"><span class="van-button__text">减少</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { ChildrenMixin } from '../mixins/relation';
|
||||
|
||||
const [createComponent, bem] = createNamespace('col');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [ChildrenMixin('vanRow')],
|
||||
|
||||
props: {
|
||||
span: [Number, String],
|
||||
offset: [Number, String],
|
||||
@ -13,13 +16,17 @@ export default createComponent({
|
||||
},
|
||||
|
||||
computed: {
|
||||
gutter() {
|
||||
return (this.$parent && Number(this.$parent.gutter)) || 0;
|
||||
},
|
||||
|
||||
style() {
|
||||
const padding = `${this.gutter / 2}px`;
|
||||
return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
|
||||
const { index } = this;
|
||||
const { spaces } = this.parent || {};
|
||||
|
||||
if (spaces && spaces[index]) {
|
||||
const { left, right } = spaces[index];
|
||||
return {
|
||||
paddingLeft: left ? `${left}px` : null,
|
||||
paddingRight: right ? `${right}px` : null,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -21,10 +21,10 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
|
||||
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
22
src/col/test/__snapshots__/index.spec.js.snap
Normal file
22
src/col/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,22 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`gutter prop 1`] = `
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--24">24</div>
|
||||
<div class="van-col van-col--12" style="padding-right: 12px;">12</div>
|
||||
<div class="van-col van-col--12" style="padding-left: 12px;">12</div>
|
||||
<div class="van-col van-col--8" style="padding-right: 16px;">8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 16px;">8</div>
|
||||
<div class="van-col van-col--6" style="padding-right: 18px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 18px;">6</div>
|
||||
<div class="van-col van-col--7" style="padding-right: 18px;">7</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
||||
<div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
|
||||
<div class="van-col van-col--4" style="padding-left: 18px;">4</div>
|
||||
<div class="van-col van-col--3" style="padding-right: 12px;">3</div>
|
||||
<div class="van-col van-col--2" style="padding-left: 12px;">2</div>
|
||||
</div>
|
||||
`;
|
||||
@ -15,3 +15,34 @@ test('Row click event', () => {
|
||||
|
||||
expect(wrapper.emitted('click')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('gutter prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-row gutter="24">
|
||||
<van-col span="24">24</van-col>
|
||||
|
||||
<van-col span="12">12</van-col>
|
||||
<van-col span="12">12</van-col>
|
||||
|
||||
<van-col span="8">8</van-col>
|
||||
<van-col span="8">8</van-col>
|
||||
<van-col span="8">8</van-col>
|
||||
|
||||
<van-col span="6">6</van-col>
|
||||
<van-col span="6">6</van-col>
|
||||
<van-col span="6">6</van-col>
|
||||
<van-col span="6">6</van-col>
|
||||
|
||||
<van-col span="7">7</van-col>
|
||||
<van-col span="6">6</van-col>
|
||||
<van-col span="5">5</van-col>
|
||||
<van-col span="4">4</van-col>
|
||||
<van-col span="3">3</van-col>
|
||||
<van-col span="2">2</van-col>
|
||||
</van-row>
|
||||
`,
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { BORDER_TOP } from '../utils/constant';
|
||||
import { raf, doubleRaf } from '../utils/dom/raf';
|
||||
|
||||
// Mixins
|
||||
@ -173,7 +172,7 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={[bem(), { [BORDER_TOP]: this.index }]}>
|
||||
<div class={[bem({ border: this.index })]}>
|
||||
{this.genTitle()}
|
||||
{this.genContent()}
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,15 @@
|
||||
@import '../style/var';
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
.van-collapse-item {
|
||||
position: relative;
|
||||
|
||||
&--border {
|
||||
&::after {
|
||||
.hairline-top(@cell-border-color, @padding-md, @padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
.van-cell__right-icon::before {
|
||||
transform: rotate(90deg);
|
||||
@ -8,7 +17,8 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
visibility: hidden;
|
||||
right: @padding-md;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
@ -17,7 +27,7 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,13 +15,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
|
||||
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@ -42,13 +42,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@ -66,7 +66,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>标题2</span></div>
|
||||
|
||||
@ -8,13 +8,13 @@ exports[`disable border 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>c</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@ -31,7 +31,7 @@ exports[`lazy render collapse content 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top" style="padding: 0px;">
|
||||
<div class="van-collapse-item van-collapse-item--border" style="padding: 0px;">
|
||||
<div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
|
||||
@ -20,7 +20,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
|
||||
@ -47,7 +49,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,6 +12,8 @@ exports[`ContactList render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -44,21 +44,27 @@ export default {
|
||||
```html
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="timeData">
|
||||
<span class="item">{{ timeData.hours }}</span>
|
||||
<span class="item">{{ timeData.minutes }}</span>
|
||||
<span class="item">{{ timeData.seconds }}</span>
|
||||
<span class="block">{{ timeData.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.seconds }}</span>
|
||||
</template>
|
||||
</van-count-down>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #1989fa;
|
||||
background-color: #ee0a24;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -52,21 +52,27 @@ export default {
|
||||
```html
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="timeData">
|
||||
<span class="item">{{ timeData.hours }}</span>
|
||||
<span class="item">{{ timeData.minutes }}</span>
|
||||
<span class="item">{{ timeData.seconds }}</span>
|
||||
<span class="block">{{ timeData.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.seconds }}</span>
|
||||
</template>
|
||||
</van-count-down>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #1989fa;
|
||||
background-color: #ee0a24;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -15,9 +15,13 @@
|
||||
<demo-block :title="t('customStyle')">
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="currentTime">
|
||||
<span class="item">{{ currentTime.hours }}</span>
|
||||
<span class="item">{{ currentTime.minutes }}</span>
|
||||
<span class="item">{{ currentTime.seconds }}</span>
|
||||
<div>
|
||||
<span class="block">{{ currentTime.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ currentTime.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ currentTime.seconds }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-count-down>
|
||||
</demo-block>
|
||||
@ -103,15 +107,20 @@ export default {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
.item {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: @blue;
|
||||
border-radius: 2px;
|
||||
background-color: @red;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.van-grid {
|
||||
|
||||
@ -67,8 +67,7 @@
|
||||
}
|
||||
|
||||
&__close {
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
height: @coupon-list-close-button-height;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
|
||||
@ -7,13 +7,15 @@ exports[`empty-image prop 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">可用 (0)<!----></span></div>
|
||||
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">不可用 (0)<!----></span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,7 +32,9 @@ exports[`empty-image prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -57,13 +61,15 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">可用 (6)<!----></span></div>
|
||||
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">不可用 (2)<!----></span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (6)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (2)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -176,7 +182,9 @@ exports[`render coupon list 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -203,13 +211,15 @@ exports[`render empty coupon list 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">可用 (0)<!----></span></div>
|
||||
<div role="tab" class="van-tab van-tab--active van-ellipsis" aria-selected="true"><span class="van-tab__text">不可用 (0)<!----></span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
|
||||
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -230,6 +240,8 @@ exports[`render empty coupon list 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { createNamespace, get } from '../utils';
|
||||
import { isDate } from '../utils/validate/date';
|
||||
import { padZero } from '../utils/format/string';
|
||||
import { getTrueValue, getMonthEndDay } from './utils';
|
||||
@ -60,7 +60,7 @@ export default createComponent({
|
||||
minMinute,
|
||||
} = this.getBoundary('min', this.innerValue);
|
||||
|
||||
const result = [
|
||||
let result = [
|
||||
{
|
||||
type: 'year',
|
||||
range: [minYear, maxYear],
|
||||
@ -83,8 +83,18 @@ export default createComponent({
|
||||
},
|
||||
];
|
||||
|
||||
if (this.type === 'date') result.splice(3, 2);
|
||||
if (this.type === 'year-month') result.splice(2, 3);
|
||||
if (this.type === 'date') {
|
||||
result = result.slice(0, 3);
|
||||
}
|
||||
|
||||
if (this.type === 'year-month') {
|
||||
result = result.slice(0, 2);
|
||||
}
|
||||
|
||||
if (this.type === 'month-day') {
|
||||
result = result.slice(1, 3);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
},
|
||||
@ -139,35 +149,39 @@ export default createComponent({
|
||||
},
|
||||
|
||||
updateInnerValue() {
|
||||
const { type } = this;
|
||||
const indexes = this.getPicker().getIndexes();
|
||||
|
||||
const getValue = (index) => {
|
||||
const { values } = this.originColumns[index];
|
||||
return getTrueValue(values[indexes[index]]);
|
||||
};
|
||||
|
||||
const year = getValue(0);
|
||||
const month = getValue(1);
|
||||
const maxDate = getMonthEndDay(year, month);
|
||||
let year;
|
||||
let month;
|
||||
let day;
|
||||
|
||||
let date;
|
||||
if (this.type === 'year-month') {
|
||||
date = 1;
|
||||
if (type === 'month-day') {
|
||||
year = this.innerValue.getFullYear();
|
||||
month = getValue(0);
|
||||
day = getValue(1);
|
||||
} else {
|
||||
date = getValue(2);
|
||||
year = getValue(0);
|
||||
month = getValue(1);
|
||||
day = type === 'year-month' ? 1 : getValue(2);
|
||||
}
|
||||
|
||||
date = date > maxDate ? maxDate : date;
|
||||
const maxDay = getMonthEndDay(year, month);
|
||||
day = day > maxDay ? maxDay : day;
|
||||
|
||||
let hour = 0;
|
||||
let minute = 0;
|
||||
|
||||
if (this.type === 'datetime') {
|
||||
if (type === 'datetime') {
|
||||
hour = getValue(3);
|
||||
minute = getValue(4);
|
||||
}
|
||||
|
||||
const value = new Date(year, month - 1, date, hour, minute);
|
||||
const value = new Date(year, month - 1, day, hour, minute);
|
||||
|
||||
this.innerValue = this.formatValue(value);
|
||||
},
|
||||
@ -203,6 +217,10 @@ export default createComponent({
|
||||
values = values.slice(0, 2);
|
||||
}
|
||||
|
||||
if (this.type === 'month-day') {
|
||||
values = values.slice(1, 3);
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getPicker().setValues(values);
|
||||
});
|
||||
|
||||
@ -15,35 +15,13 @@ Vue.use(DatetimePicker);
|
||||
|
||||
## Usage
|
||||
|
||||
### Choose DateTime
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Choose Date
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
title="Choose Date"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
@ -67,6 +45,7 @@ export default {
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
title="Choose Year-Month"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
@ -95,12 +74,48 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Choose Month-Day
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="month-day"
|
||||
title="Choose Month-Day"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'month') {
|
||||
return `${val} Month`;
|
||||
} else if (type === 'day') {
|
||||
return `${val} Day`;
|
||||
}
|
||||
return val;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Choose Time
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
title="Choose Time"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
@ -116,10 +131,39 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Choose DateTime
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
title="Choose DateTime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Option Filter
|
||||
|
||||
```html
|
||||
<van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
title="Option Filter"
|
||||
:filter="filter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -134,7 +178,6 @@ export default {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
@ -147,7 +190,7 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| type | Can be set to `date` `time`<br> `year-month` | _string_ | `datetime` |
|
||||
| type | Can be set to `date` `time`<br> `year-month` `month-day` | _string_ | `datetime` |
|
||||
| title | Toolbar title | _string_ | `''` |
|
||||
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
|
||||
| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
|
||||
|
||||
@ -15,35 +15,15 @@ Vue.use(DatetimePicker);
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 选择完整时间
|
||||
### 选择年月日
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选择日期（年月日）
|
||||
DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为 `date` 表示选择年月日。通过 min-date 和 max-date 属性可以确定可选的时间范围。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
title="选择年月日"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
@ -61,14 +41,15 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 选择日期（年月）
|
||||
### 选择年月
|
||||
|
||||
通过传入`formatter`函数，可以对选项文字进行格式化处理
|
||||
将 type 设置为 `year-month` 即可选择年份和月份。通过传入`formatter`函数，可以对选项文字进行格式化处理
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
title="选择年月"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
@ -97,12 +78,52 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 选择年月
|
||||
|
||||
将 type 设置为 `month-day` 即可选择月份和日期（从 2.8.4 版本开始支持）
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="month-day"
|
||||
title="选择月日"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'month') {
|
||||
return `${val}月`;
|
||||
} else if (type === 'day') {
|
||||
return `${val}日`;
|
||||
}
|
||||
return val;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选择时间
|
||||
|
||||
将 type 设置为 `time` 即可选择时间（小时和分钟）
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
title="选择时间"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
@ -118,6 +139,32 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 选择完整时间
|
||||
|
||||
将 type 设置为 `datetime` 即可选择完整时间，包括年月日和小时、分钟。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
title="选择完整时间"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选项过滤器
|
||||
|
||||
通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔
|
||||
@ -138,7 +185,6 @@ export default {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
@ -151,7 +197,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 类型，可选值为 `date` <br> `time` `year-month` | _string_ | `datetime` |
|
||||
| type | 时间类型，可选值为 `date` `time` <br> `year-month` `month-day` | _string_ | `datetime` |
|
||||
| title | 顶部栏标题 | _string_ | `''` |
|
||||
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
|
||||
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
|
||||
|
||||
@ -1,46 +1,62 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('title1')">
|
||||
<demo-block :title="t('dateType')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate1"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
v-model="value.date"
|
||||
type="date"
|
||||
:title="t('dateType')"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<demo-block :title="t('yearMonthType')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
v-model="value.yearMonth"
|
||||
type="year-month"
|
||||
:title="t('yearMonthType')"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title4')">
|
||||
<demo-block :title="t('monthDayType')">
|
||||
<van-datetime-picker
|
||||
v-model="currentTime1"
|
||||
v-model="value.monthDayType"
|
||||
type="month-day"
|
||||
:title="t('monthDayType')"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('timeType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.time"
|
||||
type="time"
|
||||
:title="t('timeType')"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('datetimeType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.datetime"
|
||||
type="datetime"
|
||||
:title="t('datetimeType')"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('optionFilter')">
|
||||
<van-datetime-picker
|
||||
v-model="currentTime2"
|
||||
v-model="value.optionFilter"
|
||||
type="time"
|
||||
:title="t('optionFilter')"
|
||||
:filter="filter"
|
||||
/>
|
||||
</demo-block>
|
||||
@ -51,21 +67,25 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '选择完整时间',
|
||||
title2: '选择日期（年月日）',
|
||||
title3: '选择日期（年月）',
|
||||
title4: '选择时间',
|
||||
day: '日',
|
||||
year: '年',
|
||||
month: '月',
|
||||
timeType: '选择时间',
|
||||
dateType: '选择年月日',
|
||||
datetimeType: '选择完整时间',
|
||||
monthDayType: '选择月日',
|
||||
yearMonthType: '选择年月',
|
||||
optionFilter: '选项过滤器',
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Choose DateTime',
|
||||
title2: 'Choose Date',
|
||||
title3: 'Choose Year-Month',
|
||||
title4: 'Choose Time',
|
||||
day: 'Day',
|
||||
year: ' Year',
|
||||
month: ' Month',
|
||||
timeType: 'Choose Time',
|
||||
dateType: 'Choose Date',
|
||||
datetimeType: 'Choose DateTime',
|
||||
monthDayType: 'Choose Month-Day',
|
||||
yearMonthType: 'Choose Year-Month',
|
||||
optionFilter: 'Option Filter',
|
||||
},
|
||||
},
|
||||
@ -74,11 +94,14 @@ export default {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate1: new Date(2020, 0, 1),
|
||||
currentDate2: null,
|
||||
currentDate3: new Date(2020, 0, 1),
|
||||
currentTime1: '12:00',
|
||||
currentTime2: '12:00',
|
||||
value: {
|
||||
date: null,
|
||||
time: '12:00',
|
||||
datetime: new Date(2020, 0, 1),
|
||||
monthDay: new Date(2020, 0, 1),
|
||||
yearMonth: new Date(2020, 0, 1),
|
||||
optionFilter: '12:00',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
@ -90,6 +113,9 @@ export default {
|
||||
if (type === 'month') {
|
||||
return value + this.t('month');
|
||||
}
|
||||
if (type === 'day') {
|
||||
return value + this.t('day');
|
||||
}
|
||||
return value;
|
||||
},
|
||||
|
||||
|
||||
@ -2,53 +2,105 @@
|
||||
|
||||
exports[`filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2020</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">35</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">45</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">55</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -60,54 +112,108 @@ exports[`filter prop 1`] = `
|
||||
|
||||
exports[`formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010 year</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020 year</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2010 year</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020 year</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 month</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 month</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 month</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 month</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 day</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 day</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 hour</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">35 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">45 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55 minute</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">35 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">45 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">55 minute</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
|
||||
@ -2,19 +2,27 @@
|
||||
|
||||
exports[`time type 1`] = `
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">59</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -2,26 +2,48 @@
|
||||
|
||||
exports[`filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -33,19 +55,27 @@ exports[`filter prop 1`] = `
|
||||
|
||||
exports[`format initial value 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">59</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -57,26 +87,48 @@ exports[`format initial value 1`] = `
|
||||
|
||||
exports[`formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 hour</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@ -88,21 +140,33 @@ exports[`formatter prop 1`] = `
|
||||
|
||||
exports[`max-hour & max-minute 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
|
||||
@ -68,6 +68,60 @@ test('confirm event', () => {
|
||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
||||
});
|
||||
|
||||
test('year-month type', () => {
|
||||
const date = new Date(2020, 10, 1, 0, 0);
|
||||
|
||||
const wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
type: 'year-month',
|
||||
value: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2020);
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(0);
|
||||
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(10);
|
||||
});
|
||||
|
||||
test('month-day type', () => {
|
||||
const date = new Date(2020, 10, 1, 0, 0);
|
||||
|
||||
const wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
type: 'month-day',
|
||||
value: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
||||
});
|
||||
|
||||
test('cancel event', () => {
|
||||
const wrapper = mount(DatePicker);
|
||||
|
||||
|
||||
@ -2,24 +2,38 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗
|
||||
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗（无标题）
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
确认弹窗
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
异步关闭
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
组件调用
|
||||
</span></button>
|
||||
</span></div>
|
||||
</button>
|
||||
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
|
||||
<div class="van-dialog__header">标题</div>
|
||||
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">确认弹窗</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
|
||||
<div class="van-button__content"><span class="van-button__text">取消</span></div>
|
||||
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
|
||||
<div class="van-button__content"><span class="van-button__text">确认弹窗</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,26 +2,38 @@
|
||||
|
||||
exports[`button color 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;"><span class="van-button__text">确认</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
|
||||
<div class="van-button__content"><span class="van-button__text">取消</span></div>
|
||||
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
|
||||
<div class="van-button__content"><span class="van-button__text">确认</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`button text 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">Custom cancel</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">Custom confirm</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
|
||||
<div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
|
||||
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
|
||||
<div class="van-button__content"><span class="van-button__text">Custom confirm</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`default slot 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-dialog__content">Custom Message</div>
|
||||
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm"><span class="van-button__text">确认</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确认</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`title slot 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-dialog__header van-dialog__header--isolated">Custom Title</div>
|
||||
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm"><span class="van-button__text">确认</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确认</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { BORDER_TOP_BOTTOM } from '../utils/constant';
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { getScroller } from '../utils/dom/scroll';
|
||||
|
||||
// Mixins
|
||||
@ -49,15 +48,27 @@ export default createComponent({
|
||||
scroller() {
|
||||
return getScroller(this.$el);
|
||||
},
|
||||
|
||||
opened() {
|
||||
return this.children.some((item) => item.showWrapper);
|
||||
},
|
||||
|
||||
barStyle() {
|
||||
if (this.opened && isDef(this.zIndex)) {
|
||||
return {
|
||||
zIndex: 1 + this.zIndex,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateOffset() {
|
||||
if (!this.$refs.menu) {
|
||||
if (!this.$refs.bar) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = this.$refs.menu.getBoundingClientRect();
|
||||
const rect = this.$refs.bar.getBoundingClientRect();
|
||||
|
||||
if (this.direction === 'down') {
|
||||
this.offset = rect.bottom;
|
||||
@ -113,8 +124,14 @@ export default createComponent({
|
||||
));
|
||||
|
||||
return (
|
||||
<div ref="menu" class={[bem(), BORDER_TOP_BOTTOM]}>
|
||||
{Titles}
|
||||
<div class={bem()}>
|
||||
<div
|
||||
ref="bar"
|
||||
style={this.barStyle}
|
||||
class={bem('bar', { opened: this.opened })}
|
||||
>
|
||||
{Titles}
|
||||
</div>
|
||||
{this.slots('default')}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,11 +1,20 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-dropdown-menu {
|
||||
display: flex;
|
||||
height: @dropdown-menu-height;
|
||||
background-color: @dropdown-menu-background-color;
|
||||
user-select: none;
|
||||
|
||||
&__bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: @dropdown-menu-height;
|
||||
background-color: @dropdown-menu-background-color;
|
||||
box-shadow: 0 2px 12px fade(@gray-7, 8);
|
||||
|
||||
&--opened {
|
||||
z-index: @dropdown-item-z-index + 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
@ -44,7 +53,7 @@
|
||||
right: -4px;
|
||||
margin-top: -5px;
|
||||
border: 3px solid;
|
||||
border-color: transparent transparent currentColor currentColor;
|
||||
border-color: transparent transparent @gray-4 @gray-4;
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0.8;
|
||||
content: '';
|
||||
@ -52,6 +61,10 @@
|
||||
|
||||
&--active {
|
||||
color: @dropdown-menu-title-active-text-color;
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent currentColor currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&--down {
|
||||
|
||||
@ -3,9 +3,11 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@ -19,9 +21,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@ -35,9 +39,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@ -51,9 +57,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
|
||||
<!---->
|
||||
@ -67,9 +75,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`click option 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
|
||||
@ -28,9 +30,11 @@ exports[`click option 1`] = `
|
||||
`;
|
||||
|
||||
exports[`close-on-click-outside 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
|
||||
@ -54,8 +58,10 @@ exports[`close-on-click-outside 1`] = `
|
||||
`;
|
||||
|
||||
exports[`destroy one item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
@ -66,9 +72,11 @@ exports[`destroy one item 1`] = `
|
||||
`;
|
||||
|
||||
exports[`didn\`t find matched option 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@ -83,9 +91,11 @@ exports[`didn\`t find matched option 1`] = `
|
||||
`;
|
||||
|
||||
exports[`direction up 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
|
||||
<!---->
|
||||
@ -100,9 +110,11 @@ exports[`direction up 1`] = `
|
||||
`;
|
||||
|
||||
exports[`direction up 2`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px;">
|
||||
<div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
|
||||
@ -126,9 +138,11 @@ exports[`direction up 2`] = `
|
||||
`;
|
||||
|
||||
exports[`disable close-on-click-outside 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
@ -152,8 +166,10 @@ exports[`disable close-on-click-outside 1`] = `
|
||||
`;
|
||||
|
||||
exports[`disable dropdown item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@ -163,9 +179,11 @@ exports[`disable dropdown item 1`] = `
|
||||
`;
|
||||
|
||||
exports[`render option icon 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
@ -191,9 +209,11 @@ exports[`render option icon 1`] = `
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
@ -217,9 +237,11 @@ exports[`show dropdown item 1`] = `
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 2`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
|
||||
@ -252,9 +274,11 @@ exports[`show dropdown item 2`] = `
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 3`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
|
||||
@ -287,9 +311,11 @@ exports[`show dropdown item 3`] = `
|
||||
`;
|
||||
|
||||
exports[`title prop 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@ -304,10 +330,12 @@ exports[`title prop 1`] = `
|
||||
`;
|
||||
|
||||
exports[`title slot 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
|
||||
Custom Title
|
||||
</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@ -315,26 +343,3 @@ exports[`title slot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`toggle method 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`toggle method 2`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -224,12 +224,14 @@ test('toggle method', async (done) => {
|
||||
// show
|
||||
this.$refs.item.toggle(true, { immediate: true });
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
const content = wrapper.find('.van-dropdown-item__content');
|
||||
expect(content.element.style.display).toEqual('');
|
||||
|
||||
// hide
|
||||
this.$refs.item.toggle(false, { immediate: true });
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(content.element.style.display).toEqual('none');
|
||||
|
||||
done();
|
||||
},
|
||||
|
||||
@ -58,6 +58,7 @@ Use the image prop to display different placeholder images
|
||||
<style>
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -67,6 +67,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
<style>
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user