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
73d538be05
@ -77,6 +77,7 @@ Modern browsers and Android 4.0+, iOS 8.0+.
|
||||
| --- | --- |
|
||||
| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection |
|
||||
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
|
||||
| [vant-react](https://github.com/mxdi9i7/vant-react) | Vant React (maintained by the community) |
|
||||
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
|
||||
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
|
||||
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
|
||||
|
||||
@ -90,6 +90,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手
|
||||
| --- | --- |
|
||||
| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
|
||||
| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 |
|
||||
| [vant-react](https://github.com/mxdi9i7/vant-react) | Vant React 版（由社区维护） |
|
||||
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
|
||||
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
|
||||
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
|
||||
|
||||
@ -10,6 +10,60 @@ 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.10.0-beta.0](https://github.com/youzan/vant/compare/v2.9.4-beta.0...v2.10.0-beta.0)
|
||||
|
||||
`2020-07-25`
|
||||
|
||||
**Feature**
|
||||
|
||||
- AddressEdit: add tel-maxlength prop [#6869](https://github.com/youzan/vant/issues/6869)
|
||||
- Calendar: enable close-on-popstate by default [#6874](https://github.com/youzan/vant/issues/6874)
|
||||
- Dialog: enable close-on-popsate by default [#6873](https://github.com/youzan/vant/issues/6873)
|
||||
- ImagePreview: enable close-on-popstate by default [#6875](https://github.com/youzan/vant/issues/6875)
|
||||
- NumberKeyboard: add get-container prop [#6870](https://github.com/youzan/vant/issues/6870)
|
||||
|
||||
**style**
|
||||
|
||||
- uniform line-height [#6862](https://github.com/youzan/vant/issues/6862)
|
||||
- DropdownMenu: adjust default active color to @red [#6863](https://github.com/youzan/vant/issues/6863)
|
||||
- ActionSheet: add @action-sheet-loading-icon-size var [#6847](https://github.com/youzan/vant/issues/6847)
|
||||
- ActionSheet: adjust cancel text color to @gray-7 [#6846](https://github.com/youzan/vant/issues/6846)
|
||||
- ActionSheet: increase header height to 48px [#6856](https://github.com/youzan/vant/issues/6856)
|
||||
- Cell: adjust icon margin to 4px [#6844](https://github.com/youzan/vant/issues/6844)
|
||||
- Field: adjust icon margin to 4px [#6849](https://github.com/youzan/vant/issues/6849)
|
||||
- NumberKeyboard: increase title size [#6845](https://github.com/youzan/vant/issues/6845)
|
||||
- Picker: adjust default value of visible-item-count to 6 [#6827](https://github.com/youzan/vant/issues/6827)
|
||||
- Sidebar: adjust width to 80px [#6861](https://github.com/youzan/vant/issues/6861)
|
||||
- Tag: adjust size and padding [#6828](https://github.com/youzan/vant/issues/6828)
|
||||
- Toast: adjust background color [#6848](https://github.com/youzan/vant/issues/6848)
|
||||
- Toast: adjust icon size to 36px [#6857](https://github.com/youzan/vant/issues/6857)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: failed to reset validation when message is empty [#6867](https://github.com/youzan/vant/issues/6867)
|
||||
- Icon: incorrect image icon height when loading [#6858](https://github.com/youzan/vant/issues/6858)
|
||||
- ImagePreview: fit orientationchange [#6825](https://github.com/youzan/vant/issues/6825)
|
||||
|
||||
### [v2.9.3](https://github.com/youzan/vant/compare/v2.9.2...v2.9.3)
|
||||
|
||||
`2020-07-19`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Tabs: add before-change prop [#6817](https://github.com/youzan/vant/issues/6817)
|
||||
- Sticky: offset-top support vw unit [#6816](https://github.com/youzan/vant/issues/6816)
|
||||
- Picker: item-height support vw unit [#6816](https://github.com/youzan/vant/issues/6816)
|
||||
- Sku: add mobile message value formatter [19e0d0](https://github.com/youzan/vant/commit/19e0d0df0e52cb9b683aef1f7f09d9c4ae425b97)
|
||||
- Tab: add scrollTo method [#6800](https://github.com/youzan/vant/issues/6800)
|
||||
- Uploader: add preview-options prop [#6810](https://github.com/youzan/vant/issues/6810)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: rendering fails in some cases [#6812](https://github.com/youzan/vant/issues/6812)
|
||||
- ImagePreview: image overflow in some cases [#6811](https://github.com/youzan/vant/issues/6811)
|
||||
- NumberKeyboard: flex not work on legacy safari [#6804](https://github.com/youzan/vant/issues/6804)
|
||||
- Slider: missing transition in vertical mode [#6786](https://github.com/youzan/vant/issues/6786)
|
||||
|
||||
### [v2.9.2](https://github.com/youzan/vant/compare/v2.9.1...v2.9.2)
|
||||
|
||||
`2020-07-14`
|
||||
|
||||
@ -10,6 +10,60 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
- 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
|
||||
- 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
|
||||
|
||||
### [v2.10.0-beta.0](https://github.com/youzan/vant/compare/v2.9.4-beta.0...v2.10.0-beta.0)
|
||||
|
||||
`2020-07-25`
|
||||
|
||||
**Feature**
|
||||
|
||||
- AddressEdit: 新增 tel-maxlength 属性 [#6869](https://github.com/youzan/vant/issues/6869)
|
||||
- Calendar: 默认开启 close-on-popstate 属性 [#6874](https://github.com/youzan/vant/issues/6874)
|
||||
- Dialog: 默认开启 close-on-popstate 属性 [#6873](https://github.com/youzan/vant/issues/6873)
|
||||
- ImagePreview: 默认开启 close-on-popstate 属性 [#6875](https://github.com/youzan/vant/issues/6875)
|
||||
- NumberKeyboard: 新增 get-container 属性 [#6870](https://github.com/youzan/vant/issues/6870)
|
||||
|
||||
**style**
|
||||
|
||||
- 新增 line-height 相关 LESS 变量 [#6862](https://github.com/youzan/vant/issues/6862)
|
||||
- DropdownMenu: 默认选中态颜色调整为红色 [#6863](https://github.com/youzan/vant/issues/6863)
|
||||
- ActionSheet: 加载图标大小调整为 22px [#6847](https://github.com/youzan/vant/issues/6847)
|
||||
- ActionSheet: 取消按钮文字颜色调整为 @gray-7 [#6846](https://github.com/youzan/vant/issues/6846)
|
||||
- ActionSheet: 标题栏高度调整为 48px [#6856](https://github.com/youzan/vant/issues/6856)
|
||||
- Cell: 图标与文字的间距调整为 4px [#6844](https://github.com/youzan/vant/issues/6844)
|
||||
- Field: 图标与文字的间距调整为 4px [#6849](https://github.com/youzan/vant/issues/6849)
|
||||
- NumberKeyboard: 标题栏高度调整为 40px [#6845](https://github.com/youzan/vant/issues/6845)
|
||||
- Picker: 默认可见的选项个数调整为 6 个 [#6827](https://github.com/youzan/vant/issues/6827)
|
||||
- Sidebar: 宽度调整为 80px [#6861](https://github.com/youzan/vant/issues/6861)
|
||||
- Tag: 更新文字大小和标签大小 [#6828](https://github.com/youzan/vant/issues/6828)
|
||||
- Toast: 更新背景色 [#6848](https://github.com/youzan/vant/issues/6848)
|
||||
- Toast: 图标大小调整为 36px [#6857](https://github.com/youzan/vant/issues/6857)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Field: 修复 rule 的 message 为空时无法重置表单状态的问题 [#6867](https://github.com/youzan/vant/issues/6867)
|
||||
- Icon: 修复图片图标加载过程中高度异常的问题 [#6858](https://github.com/youzan/vant/issues/6858)
|
||||
- ImagePreview: 修复 iOS 下旋转屏幕时布局错误的问题 [#6825](https://github.com/youzan/vant/issues/6825)
|
||||
|
||||
### [v2.9.3](https://github.com/youzan/vant/compare/v2.9.2...v2.9.3)
|
||||
|
||||
`2020-07-19`
|
||||
|
||||
**Feature**
|
||||
|
||||
- Tabs: 新增 before-change 属性，用于在切换标签前执行校验逻辑 [#6817](https://github.com/youzan/vant/issues/6817)
|
||||
- Sticky: offset-top 属性支持传入 vw 单位 [#6816](https://github.com/youzan/vant/issues/6816)
|
||||
- Picker: item-height 属性支持传入 vw 单位 [#6816](https://github.com/youzan/vant/issues/6816)
|
||||
- Sku: 新增对手机号留言的格式化处理 [19e0d0](https://github.com/youzan/vant/commit/19e0d0df0e52cb9b683aef1f7f09d9c4ae425b97)
|
||||
- Tab: 新增 scrollTo 方法，用于在滚动导航模式下滚动到特定位置 [#6800](https://github.com/youzan/vant/issues/6800)
|
||||
- Uploader: 新增 preview-options 属性，用于自定义全屏图片预览的配置项 [#6810](https://github.com/youzan/vant/issues/6810)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Calendar: 修复在个别情况下内容渲染失败的问题 [#6812](https://github.com/youzan/vant/issues/6812)
|
||||
- ImagePreview: 修复在个别情况下图片错位的问题 [#6811](https://github.com/youzan/vant/issues/6811)
|
||||
- NumberKeyboard: 修复在旧版本 iOS 上按键内容不居中的问题 [#6804](https://github.com/youzan/vant/issues/6804)
|
||||
- Slider: 修复垂直模式下滑动动画失效的问题 [#6786](https://github.com/youzan/vant/issues/6786)
|
||||
|
||||
### [v2.9.2](https://github.com/youzan/vant/compare/v2.9.1...v2.9.2)
|
||||
|
||||
`2020-07-14`
|
||||
|
||||
@ -35,6 +35,7 @@ Modern browsers and Android 4.0+, iOS 8.0+.
|
||||
| --- | --- |
|
||||
| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection |
|
||||
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
|
||||
| [vant-react](https://github.com/mxdi9i7/vant-react) | Vant React (maintained by the community) |
|
||||
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
|
||||
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
|
||||
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
| --- | --- |
|
||||
| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
|
||||
| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 |
|
||||
| [vant-react](https://github.com/mxdi9i7/vant-react) | Vant React 版（由社区维护） |
|
||||
| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
|
||||
| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
|
||||
| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "2.9.2",
|
||||
"version": "2.10.0-beta.0",
|
||||
"description": "Mobile UI Components built on Vue",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
||||
@ -3487,9 +3487,9 @@ co@^4.6.0:
|
||||
integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
|
||||
|
||||
codecov@^3.7.0:
|
||||
version "3.7.0"
|
||||
resolved "https://registry.npm.taobao.org/codecov/download/codecov-3.7.0.tgz#4a09939cde24447a43f36d068e8b4e0188dc3f27"
|
||||
integrity sha1-SgmTnN4kRHpD820GjotOAYjcPyc=
|
||||
version "3.7.1"
|
||||
resolved "https://registry.yarnpkg.com/codecov/-/codecov-3.7.1.tgz#434cb8d55f18ef01672e5739d3d266696bebc202"
|
||||
integrity sha512-JHWxyPTkMLLJn9SmKJnwAnvY09kg2Os2+Ux+GG7LwZ9g8gzDDISpIN5wAsH1UBaafA/yGcd3KofMaorE8qd6Lw==
|
||||
dependencies:
|
||||
argv "0.0.2"
|
||||
ignore-walk "3.0.3"
|
||||
@ -7657,11 +7657,16 @@ lodash.templatesettings@^4.0.0:
|
||||
dependencies:
|
||||
lodash._reinterpolate "^3.0.0"
|
||||
|
||||
lodash@4.17.15, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4:
|
||||
lodash@4.17.15:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
|
||||
lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4:
|
||||
version "4.17.19"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
|
||||
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
|
||||
|
||||
log-symbols@^2.0.0, log-symbols@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
|
||||
|
||||
@ -813,9 +813,9 @@ locate-path@^2.0.0:
|
||||
path-exists "^3.0.0"
|
||||
|
||||
lodash@^4.17.14, lodash@^4.17.15:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
version "4.17.19"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
|
||||
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
|
||||
|
||||
mimic-fn@^2.1.0:
|
||||
version "2.1.0"
|
||||
|
||||
@ -1270,9 +1270,9 @@ locate-path@^2.0.0:
|
||||
path-exists "^3.0.0"
|
||||
|
||||
lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
version "4.17.19"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
|
||||
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
|
||||
|
||||
log-symbols@^2.0.0, log-symbols@^2.2.0:
|
||||
version "2.2.0"
|
||||
|
||||
@ -1609,9 +1609,9 @@ locate-path@^2.0.0:
|
||||
path-exists "^3.0.0"
|
||||
|
||||
lodash@^4.17.13:
|
||||
version "4.17.15"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
version "4.17.19"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
|
||||
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
|
||||
|
||||
loose-envify@^1.0.0:
|
||||
version "1.4.0"
|
||||
|
||||
@ -120,7 +120,7 @@ export default createComponent({
|
||||
|
||||
function OptionContent() {
|
||||
if (loading) {
|
||||
return <Loading size="20px" />;
|
||||
return <Loading class={bem('loading-icon')} />;
|
||||
}
|
||||
|
||||
return [
|
||||
|
||||
@ -41,6 +41,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
color: @action-sheet-cancel-text-color;
|
||||
}
|
||||
|
||||
&__subname {
|
||||
margin-top: @padding-xs;
|
||||
color: @action-sheet-subname-color;
|
||||
@ -74,6 +78,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__loading-icon .van-loading__spinner {
|
||||
width: @action-sheet-loading-icon-size;
|
||||
height: @action-sheet-loading-icon-size;
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
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"><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>
|
||||
<div class="van-loading van-loading--circular van-action-sheet__loading-icon"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
|
||||
<div class="van-action-sheet__subname">Subname</div></button>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
|
||||
@ -86,6 +86,7 @@ export default {
|
||||
| is-saving | Whether to show save button loading status | _boolean_ | `false` |
|
||||
| is-deleting | Whether to show delete button loading status | _boolean_ | `false` |
|
||||
| tel-validator | The method to validate tel | _(tel: string) => boolean_ | - |
|
||||
| tel-maxlength `v2.10.0` | Tel maxlength | _number \| string_ | - |
|
||||
| postal-validator `v2.1.2` | The method to validate postal | _(tel: string) => boolean_ | - |
|
||||
| validator | Custom validator | _(key, val) => string_ | - |
|
||||
|
||||
|
||||
@ -86,6 +86,7 @@ export default {
|
||||
| is-saving | 是否显示保存按钮加载动画 | _boolean_ | `false` |
|
||||
| is-deleting | 是否显示删除按钮加载动画 | _boolean_ | `false` |
|
||||
| tel-validator | 手机号格式校验函数 | _string => boolean_ | - |
|
||||
| tel-maxlength `v2.10.0` | 手机号最大长度 | _number \| string_ | - |
|
||||
| postal-validator `v2.1.2` | 邮政编码格式校验函数 | _string => boolean_ | - |
|
||||
| validator | 自定义校验函数 | _(key, val) => string_ | - |
|
||||
|
||||
|
||||
@ -40,11 +40,12 @@ export default createComponent({
|
||||
showDelete: Boolean,
|
||||
showPostal: Boolean,
|
||||
searchResult: Array,
|
||||
telMaxlength: [Number, String],
|
||||
showSetDefault: Boolean,
|
||||
showSearchResult: Boolean,
|
||||
saveButtonText: String,
|
||||
deleteButtonText: String,
|
||||
areaPlaceholder: String,
|
||||
deleteButtonText: String,
|
||||
showSearchResult: Boolean,
|
||||
showArea: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@ -283,6 +284,7 @@ export default createComponent({
|
||||
clearable
|
||||
type="tel"
|
||||
label={t('tel')}
|
||||
maxlength={this.telMaxlength}
|
||||
placeholder={t('telPlaceholder')}
|
||||
errorMessage={errorInfo.tel}
|
||||
onFocus={onFocus('tel')}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import AddressEdit from '..';
|
||||
import areaList from '../../area/demo/area-simple';
|
||||
import { mount, later } from '../../../test';
|
||||
import { mount, later, trigger } from '../../../test';
|
||||
|
||||
const addressInfo = {
|
||||
name: '测试',
|
||||
@ -306,3 +306,17 @@ test('click-area event', () => {
|
||||
field.trigger('click');
|
||||
expect(wrapper.emitted('click-area')[0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('tel-maxlength prop', () => {
|
||||
const wrapper = mount(AddressEdit, {
|
||||
propsData: {
|
||||
telMaxlength: 4,
|
||||
},
|
||||
});
|
||||
|
||||
const telInput = wrapper.find('input[type="tel"]');
|
||||
telInput.element.value = '123456';
|
||||
trigger(telInput, 'input');
|
||||
|
||||
expect(telInput.element.value).toEqual('1234');
|
||||
});
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
align-items: center;
|
||||
margin-bottom: @padding-xs;
|
||||
font-size: @font-size-lg;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-lg;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
|
||||
@ -64,9 +64,9 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
| area-list | Area list data | _object_ | - |
|
||||
| columns-placeholder `v2.2.5` | Placeholder of columns | _string[]_ | `[]` |
|
||||
| loading | Whether to show loading prompt | _boolean_ | `false` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| columns-num | Level of picker | _number \| string_ | `3` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `6` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
| is-oversea-code `v2.1.4` | The method to validate oversea code | _() => boolean_ | - |
|
||||
|
||||
|
||||
@ -64,9 +64,9 @@ Vue.use(Area);
|
||||
| area-list | 省市区数据，格式见下方 | _object_ | - |
|
||||
| columns-placeholder `v2.2.5` | 列占位提示文字 | _string[]_ | `[]` |
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
| is-oversea-code `v2.1.4` | 根据`code`校验海外地址，海外地址会划分至单独的分类 | _() => boolean_ | - |
|
||||
|
||||
|
||||
@ -8,9 +8,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -119,14 +119,14 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -177,7 +177,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -189,9 +189,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -330px, 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>
|
||||
@ -300,7 +300,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 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>
|
||||
@ -337,7 +337,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -373,7 +373,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -385,9 +385,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -496,13 +496,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -514,9 +514,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -628,12 +628,12 @@ exports[`renders demo correctly 1`] = `
|
||||
</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>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@ -4,9 +4,9 @@ exports[`change option 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -16,7 +16,7 @@ exports[`change option 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -26,7 +26,7 @@ exports[`change option 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -35,7 +35,7 @@ exports[`change option 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -46,9 +46,9 @@ exports[`change option 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 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>
|
||||
@ -58,7 +58,7 @@ exports[`change option 2`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -68,7 +68,7 @@ exports[`change option 2`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -77,7 +77,7 @@ exports[`change option 2`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -88,9 +88,9 @@ exports[`change option 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 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>
|
||||
@ -100,7 +100,7 @@ exports[`change option 3`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -110,7 +110,7 @@ exports[`change option 3`] = `
|
||||
</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;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 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>
|
||||
@ -119,7 +119,7 @@ exports[`change option 3`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -130,9 +130,9 @@ exports[`columns-num prop 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -142,7 +142,7 @@ exports[`columns-num prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -151,7 +151,7 @@ exports[`columns-num prop 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -161,17 +161,17 @@ exports[`columns-num prop 1`] = `
|
||||
exports[`columns-top、columns-bottom slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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;">
|
||||
<!---->Top<div class="van-picker__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>Bottom
|
||||
<!---->
|
||||
@ -182,9 +182,9 @@ exports[`reset method 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 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>
|
||||
@ -194,7 +194,7 @@ exports[`reset method 1`] = `
|
||||
</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;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 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>
|
||||
@ -204,13 +204,13 @@ exports[`reset method 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -221,9 +221,9 @@ exports[`reset method 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -233,7 +233,7 @@ exports[`reset method 2`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -243,7 +243,7 @@ exports[`reset method 2`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -252,7 +252,7 @@ exports[`reset method 2`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -263,17 +263,17 @@ exports[`title slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -284,9 +284,9 @@ exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -296,7 +296,7 @@ exports[`watch areaList & code 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -306,7 +306,7 @@ exports[`watch areaList & code 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -315,7 +315,7 @@ exports[`watch areaList & code 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -326,9 +326,9 @@ exports[`watch areaList & code 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -338,7 +338,7 @@ exports[`watch areaList & code 2`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -348,7 +348,7 @@ exports[`watch areaList & code 2`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -357,7 +357,7 @@ exports[`watch areaList & code 2`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -368,9 +368,9 @@ exports[`watch areaList & code 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -380,7 +380,7 @@ exports[`watch areaList & code 3`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -390,7 +390,7 @@ exports[`watch areaList & code 3`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -399,7 +399,7 @@ exports[`watch areaList & code 3`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@ -14,9 +14,9 @@ Vue.use(Button);
|
||||
### Type
|
||||
|
||||
```html
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="info">Info</van-button>
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="danger">Danger</van-button>
|
||||
<van-button type="warning">Warning</van-button>
|
||||
```
|
||||
@ -60,11 +60,11 @@ Vue.use(Button);
|
||||
### Icon
|
||||
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
<van-button icon="star-o" type="primary">Button</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
|
||||
>Button</van-button
|
||||
>
|
||||
<van-button icon="plus" type="primary" />
|
||||
<van-button icon="plus" type="primary">Button</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
|
||||
Button
|
||||
</van-button>
|
||||
```
|
||||
|
||||
### Size
|
||||
@ -94,9 +94,9 @@ Vue.use(Button);
|
||||
```html
|
||||
<van-button color="#7232dd">Pure</van-button>
|
||||
<van-button color="#7232dd" plain>Pure</van-button>
|
||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
|
||||
>Gradient</van-button
|
||||
>
|
||||
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
|
||||
Gradient
|
||||
</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@ -13,19 +13,19 @@ Vue.use(Button);
|
||||
|
||||
### 按钮类型
|
||||
|
||||
支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
|
||||
按钮支持 `default`、`primary`、`info`、`warning`、`danger` 五种类型，默认为 `default`。
|
||||
|
||||
```html
|
||||
<van-button type="default">默认按钮</van-button>
|
||||
<van-button type="primary">主要按钮</van-button>
|
||||
<van-button type="info">信息按钮</van-button>
|
||||
<van-button type="default">默认按钮</van-button>
|
||||
<van-button type="warning">警告按钮</van-button>
|
||||
<van-button type="danger">危险按钮</van-button>
|
||||
```
|
||||
|
||||
### 朴素按钮
|
||||
|
||||
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
|
||||
通过 `plain` 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
|
||||
|
||||
```html
|
||||
<van-button plain type="primary">朴素按钮</van-button>
|
||||
@ -34,7 +34,7 @@ Vue.use(Button);
|
||||
|
||||
### 细边框
|
||||
|
||||
设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
|
||||
设置 `hairline` 属性可以展示 0.5px 的细边框。
|
||||
|
||||
```html
|
||||
<van-button plain hairline type="primary">细边框按钮</van-button>
|
||||
@ -43,7 +43,7 @@ Vue.use(Button);
|
||||
|
||||
### 禁用状态
|
||||
|
||||
通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击
|
||||
通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
|
||||
|
||||
```html
|
||||
<van-button disabled type="primary">禁用状态</van-button>
|
||||
@ -52,7 +52,7 @@ Vue.use(Button);
|
||||
|
||||
### 加载状态
|
||||
|
||||
通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
|
||||
通过 `loading` 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 `loading-text` 设置加载状态下的文字。
|
||||
|
||||
```html
|
||||
<van-button loading type="primary" />
|
||||
@ -62,7 +62,7 @@ Vue.use(Button);
|
||||
|
||||
### 按钮形状
|
||||
|
||||
通过`square`设置方形按钮，通过`round`设置圆形按钮
|
||||
通过 `square` 设置方形按钮，通过 `round` 设置圆形按钮。
|
||||
|
||||
```html
|
||||
<van-button square type="primary">方形按钮</van-button>
|
||||
@ -71,19 +71,19 @@ Vue.use(Button);
|
||||
|
||||
### 图标按钮
|
||||
|
||||
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
|
||||
通过 `icon` 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。
|
||||
|
||||
```html
|
||||
<van-button icon="star-o" type="primary" />
|
||||
<van-button icon="star-o" type="primary">按钮</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
|
||||
>按钮</van-button
|
||||
>
|
||||
<van-button icon="plus" type="primary" />
|
||||
<van-button icon="plus" type="primary">按钮</van-button>
|
||||
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">
|
||||
按钮
|
||||
</van-button>
|
||||
```
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
支持 `large`、`normal`、`small`、`mini` 四种尺寸，默认为 `normal`。
|
||||
|
||||
```html
|
||||
<van-button type="primary" size="large">大号按钮</van-button>
|
||||
@ -94,7 +94,7 @@ Vue.use(Button);
|
||||
|
||||
### 块级元素
|
||||
|
||||
按钮在默认情况下为行内块级元素，通过`block`属性可以将按钮的元素类型设置为块级元素
|
||||
按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素。
|
||||
|
||||
```html
|
||||
<van-button type="primary" block>块级元素</van-button>
|
||||
@ -102,7 +102,7 @@ Vue.use(Button);
|
||||
|
||||
### 页面导航
|
||||
|
||||
可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
|
||||
可以通过 `url` 属性进行 URL 跳转，或通过 `to` 属性进行路由跳转。
|
||||
|
||||
```html
|
||||
<van-button type="primary" url="/vant/mobile.html">URL 跳转</van-button>
|
||||
@ -111,14 +111,14 @@ Vue.use(Button);
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
通过`color`属性可以自定义按钮的颜色
|
||||
通过 `color` 属性可以自定义按钮的颜色。
|
||||
|
||||
```html
|
||||
<van-button color="#7232dd">单色按钮</van-button>
|
||||
<van-button color="#7232dd" plain>单色按钮</van-button>
|
||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
|
||||
>渐变色按钮</van-button
|
||||
>
|
||||
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">
|
||||
渐变色按钮
|
||||
</van-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
<demo-section>
|
||||
<demo-block :title="t('type')">
|
||||
<div class="demo-button-row">
|
||||
<van-button type="default">{{ t('default') }}</van-button>
|
||||
<van-button type="primary">{{ t('primary') }}</van-button>
|
||||
<van-button type="info">{{ t('info') }}</van-button>
|
||||
<van-button type="default">{{ t('default') }}</van-button>
|
||||
</div>
|
||||
<van-button type="danger">{{ t('danger') }}</van-button>
|
||||
<van-button type="warning">{{ t('warning') }}</van-button>
|
||||
@ -37,12 +37,12 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('icon')">
|
||||
<van-button type="primary" icon="star-o" />
|
||||
<van-button type="primary" icon="star-o" :text="t('button')" />
|
||||
<van-button type="primary" icon="plus" />
|
||||
<van-button type="primary" icon="plus" :text="t('button')" />
|
||||
<van-button
|
||||
plain
|
||||
type="primary"
|
||||
icon="https://img.yzcdn.cn/vant/logo.png"
|
||||
type="info"
|
||||
icon="https://img.yzcdn.cn/vant/user-active.png"
|
||||
:text="t('button')"
|
||||
/>
|
||||
</demo-block>
|
||||
@ -71,7 +71,7 @@
|
||||
<van-button color="#7232dd" :text="t('pure')" />
|
||||
<van-button plain color="#7232dd" :text="t('pure')" />
|
||||
<van-button
|
||||
color="linear-gradient(to right, #4bb0ff, #6149f6)"
|
||||
color="linear-gradient(to right, #ff6034, #ee0a24)"
|
||||
:text="t('gradient')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<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="demo-button-row"><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> <button class="van-button van-button--default 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">
|
||||
@ -49,13 +49,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<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">
|
||||
<div class="van-button__content"><i class="van-icon van-icon-plus 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">
|
||||
<div class="van-button__content"><i class="van-icon van-icon-plus 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">
|
||||
</button> <button class="van-button van-button--info 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/user-active.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">
|
||||
|
||||
@ -254,7 +254,7 @@ Following props are supported when the poppable is true
|
||||
| v-model | Whether to show calendar | _boolean_ | `false` |
|
||||
| position | Popup position, can be set to `top` `right` `left` | _string_ | `bottom` |
|
||||
| round | Whether to show round corner | _boolean_ | `true` |
|
||||
| close-on-popstate `v2.4.4` | Whether to close when popstate | _boolean_ | `false` |
|
||||
| close-on-popstate `v2.4.4` | Whether to close when popstate | _boolean_ | `true` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
||||
| get-container `v2.4.4` | Return the mount node for Calendar | _string \| () => Element_ | - |
|
||||
|
||||
@ -256,7 +256,7 @@ export default {
|
||||
| v-model | 是否显示日历弹窗 | _boolean_ | `false` |
|
||||
| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
|
||||
| round | 是否显示圆角弹窗 | _boolean_ | `true` |
|
||||
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| close-on-popstate `v2.4.4` | 是否在页面回退时自动关闭 | _boolean_ | `true` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
|
||||
| get-container `v2.4.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
@ -33,48 +33,31 @@ export default createComponent({
|
||||
defaultDate: [Date, Array],
|
||||
getContainer: [String, Function],
|
||||
allowSameDay: Boolean,
|
||||
closeOnPopstate: Boolean,
|
||||
confirmDisabledText: String,
|
||||
firstDayOfWeek: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
validator: (val) => {
|
||||
return val >= 0 && val <= 6;
|
||||
},
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'single',
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
validator: isDate,
|
||||
default: () => new Date(),
|
||||
},
|
||||
maxDate: {
|
||||
type: Date,
|
||||
validator: isDate,
|
||||
default() {
|
||||
const now = new Date();
|
||||
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
|
||||
},
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
},
|
||||
rowHeight: {
|
||||
type: [Number, String],
|
||||
default: ROW_HEIGHT,
|
||||
},
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
position: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
},
|
||||
poppable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
rowHeight: {
|
||||
type: [Number, String],
|
||||
default: ROW_HEIGHT,
|
||||
},
|
||||
maxRange: {
|
||||
type: [Number, String],
|
||||
default: null,
|
||||
},
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@ -95,7 +78,7 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
closeOnPopstate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
@ -103,9 +86,27 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
maxRange: {
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
validator: isDate,
|
||||
default: () => new Date(),
|
||||
},
|
||||
maxDate: {
|
||||
type: Date,
|
||||
validator: isDate,
|
||||
default() {
|
||||
const now = new Date();
|
||||
return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
|
||||
},
|
||||
},
|
||||
firstDayOfWeek: {
|
||||
type: [Number, String],
|
||||
default: null,
|
||||
default: 0,
|
||||
validator: (val) => val >= 0 && val <= 6,
|
||||
},
|
||||
},
|
||||
|
||||
@ -244,14 +245,13 @@ export default createComponent({
|
||||
onScroll() {
|
||||
const { body, months } = this.$refs;
|
||||
const top = getScrollTop(body);
|
||||
const bottom = top + this.bodyHeight;
|
||||
const heights = months.map((item) => item.getHeight());
|
||||
const heightSum = heights.reduce((a, b) => a + b, 0);
|
||||
|
||||
// iOS scroll bounce may exceed the range
|
||||
/* istanbul ignore next */
|
||||
if (top < 0 || (bottom > heightSum && top > 0)) {
|
||||
return;
|
||||
let bottom = top + this.bodyHeight;
|
||||
if (bottom > heightSum && top > 0) {
|
||||
bottom = heightSum;
|
||||
}
|
||||
|
||||
let height = 0;
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
line-height: 20px;
|
||||
line-height: @line-height-md;
|
||||
}
|
||||
|
||||
&__price {
|
||||
|
||||
@ -62,9 +62,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-card__title van-multi-ellipsis--l2">商品名称</div>
|
||||
<div class="van-card__desc van-ellipsis">描述信息</div>
|
||||
<div><span class="van-tag van-tag--plain van-tag--danger van-hairline--surround" style="margin-right: 5px;">
|
||||
<div><span class="van-tag van-tag--plain van-tag--danger" style="margin-right: 5px;">
|
||||
标签
|
||||
</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">
|
||||
</span> <span class="van-tag van-tag--plain van-tag--danger">
|
||||
标签
|
||||
</span></div>
|
||||
</div>
|
||||
|
||||
@ -95,9 +95,21 @@ Vue.use(CellGroup);
|
||||
<van-cell title="单元格" icon="shop-o">
|
||||
<!-- Use the right-icon slot to customize the right icon -->
|
||||
<template #right-icon>
|
||||
<van-icon name="search" style="font-size: 16px; line-height: inherit;" />
|
||||
<van-icon name="search" class="search-icon" />
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<style>
|
||||
.custom-title {
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 16px;
|
||||
line-height: inherit;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Vertical Center
|
||||
|
||||
@ -14,7 +14,7 @@ Vue.use(CellGroup);
|
||||
|
||||
### 基础用法
|
||||
|
||||
`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框
|
||||
`Cell` 可以单独使用，也可以与 `CellGroup` 搭配使用，`CellGroup` 可以为 `Cell` 提供上下外边框。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@ -25,7 +25,7 @@ Vue.use(CellGroup);
|
||||
|
||||
### 单元格大小
|
||||
|
||||
通过`size`属性可以控制单元格的大小
|
||||
通过 `size` 属性可以控制单元格的大小。
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" value="内容" size="large" />
|
||||
@ -34,7 +34,7 @@ Vue.use(CellGroup);
|
||||
|
||||
### 展示图标
|
||||
|
||||
通过`icon`属性在标题左侧展示图标
|
||||
通过 `icon` 属性在标题左侧展示图标。
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" icon="location-o" />
|
||||
@ -42,7 +42,7 @@ Vue.use(CellGroup);
|
||||
|
||||
### 只设置 value
|
||||
|
||||
只设置`value`时，内容会靠左对齐
|
||||
只设置 `value` 时，内容会靠左对齐。
|
||||
|
||||
```html
|
||||
<van-cell value="内容" />
|
||||
@ -50,7 +50,7 @@ Vue.use(CellGroup);
|
||||
|
||||
### 展示箭头
|
||||
|
||||
设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向
|
||||
设置 `is-link` 属性后会在单元格右侧显示箭头，并且可以通过 `arrow-direction` 属性控制箭头方向。
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" is-link />
|
||||
@ -60,7 +60,7 @@ Vue.use(CellGroup);
|
||||
|
||||
### 页面导航
|
||||
|
||||
可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
|
||||
可以通过 `url` 属性进行 URL 跳转，或通过 `to` 属性进行路由跳转。
|
||||
|
||||
```html
|
||||
<van-cell title="URL 跳转" is-link url="/vant/mobile.html" />
|
||||
@ -69,7 +69,7 @@ Vue.use(CellGroup);
|
||||
|
||||
### 分组标题
|
||||
|
||||
通过`CellGroup`的`title`属性可以指定分组标题
|
||||
通过 `CellGroup` 的 `title` 属性可以指定分组标题。
|
||||
|
||||
```html
|
||||
<van-cell-group title="分组1">
|
||||
@ -82,7 +82,7 @@ Vue.use(CellGroup);
|
||||
|
||||
### 使用插槽
|
||||
|
||||
如以上用法不能满足你的需求，可以使用插槽来自定义内容
|
||||
如以上用法不能满足你的需求，可以使用插槽来自定义内容。
|
||||
|
||||
```html
|
||||
<van-cell value="内容" is-link>
|
||||
@ -96,14 +96,26 @@ Vue.use(CellGroup);
|
||||
<van-cell title="单元格" icon="shop-o">
|
||||
<!-- 使用 right-icon 插槽来自定义右侧图标 -->
|
||||
<template #right-icon>
|
||||
<van-icon name="search" style="font-size: 16px; line-height: inherit;" />
|
||||
<van-icon name="search" class="search=icon" />
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<style>
|
||||
.custom-title {
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 16px;
|
||||
line-height: inherit;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### 垂直居中
|
||||
|
||||
通过`center`属性可以让`Cell`的左右内容都垂直居中
|
||||
通过 `center` 属性可以让 `Cell` 的左右内容都垂直居中。
|
||||
|
||||
```html
|
||||
<van-cell center title="单元格" value="内容" label="描述信息" />
|
||||
|
||||
@ -60,10 +60,7 @@
|
||||
|
||||
<van-cell icon="shop-o" :title="t('cell')">
|
||||
<template #right-icon>
|
||||
<van-icon
|
||||
name="search"
|
||||
style="font-size: 16px; line-height: inherit;"
|
||||
/>
|
||||
<van-icon name="search" class="search-icon" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
@ -117,8 +114,13 @@ export default {
|
||||
<style lang="less">
|
||||
.demo-cell {
|
||||
.custom-title {
|
||||
margin-right: 5px;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 16px;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -57,11 +57,11 @@
|
||||
}
|
||||
|
||||
&__left-icon {
|
||||
margin-right: 5px;
|
||||
margin-right: @padding-base;
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
margin-left: 5px;
|
||||
margin-left: @padding-base;
|
||||
color: @cell-right-icon-color;
|
||||
}
|
||||
|
||||
|
||||
@ -94,7 +94,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell"><i class="van-icon van-icon-shop-o van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-search" style="font-size: 16px; line-height: inherit;">
|
||||
<div class="van-cell__title"><span>单元格</span></div><i class="search-icon van-icon van-icon-search">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -115,7 +115,7 @@ export default {
|
||||
|
||||
if (this.isEdit) {
|
||||
this.list = this.list.map((item) =>
|
||||
(item.id === info.id ? info : item)
|
||||
item.id === info.id ? info : item
|
||||
);
|
||||
} else {
|
||||
this.list.push(info);
|
||||
@ -135,10 +135,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-contact-card {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
background-color: #f2f2f2;
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
font-size: @coupon-name-font-size;
|
||||
line-height: 20px;
|
||||
line-height: @line-height-md;
|
||||
}
|
||||
|
||||
&__valid {
|
||||
|
||||
@ -259,8 +259,8 @@ export default {
|
||||
| filter | Option filter | _(type, vals) => vals_ | - |
|
||||
| formatter | Option text formatter | _(type, val) => val_ | - |
|
||||
| columns-order `v2.9.2` | Array for ordering columns, where item can be set to<br> `year`, `month`, `day`, `hour` and `minute` | _string[]_ | - |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `6` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
### DatePicker Props
|
||||
|
||||
@ -268,8 +268,8 @@ export default {
|
||||
| filter | 选项过滤函数 | _(type, vals) => vals_ | - |
|
||||
| formatter | 选项格式化函数 | _(type, val) => val_ | - |
|
||||
| columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为<br> `year`、`month`、`day`、`hour`、`minute` | _string[]_ | - |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
|
||||
### DatePicker Props
|
||||
|
||||
@ -4,16 +4,16 @@ exports[`filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -23,7 +23,7 @@ exports[`filter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -45,7 +45,7 @@ exports[`filter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -64,7 +64,7 @@ exports[`filter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -103,7 +103,7 @@ exports[`filter prop 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -114,9 +114,9 @@ exports[`formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -126,7 +126,7 @@ exports[`formatter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -136,7 +136,7 @@ exports[`formatter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -158,7 +158,7 @@ exports[`formatter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -177,7 +177,7 @@ exports[`formatter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -216,7 +216,7 @@ exports[`formatter prop 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@ -4,9 +4,9 @@ exports[`time type 1`] = `
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -16,7 +16,7 @@ exports[`time type 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -25,7 +25,7 @@ exports[`time type 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@ -8,9 +8,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01</div>
|
||||
</li>
|
||||
@ -72,7 +72,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01</div>
|
||||
</li>
|
||||
@ -168,7 +168,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -180,9 +180,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -204,7 +204,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01月</div>
|
||||
</li>
|
||||
@ -243,7 +243,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -255,9 +255,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01月</div>
|
||||
</li>
|
||||
@ -297,7 +297,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01日</div>
|
||||
</li>
|
||||
@ -393,7 +393,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -405,9 +405,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
@ -444,7 +444,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -627,7 +627,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -639,9 +639,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -663,7 +663,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01</div>
|
||||
</li>
|
||||
@ -703,7 +703,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01</div>
|
||||
</li>
|
||||
@ -800,7 +800,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -876,7 +876,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -1059,7 +1059,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -1071,9 +1071,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -1095,7 +1095,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01</div>
|
||||
</li>
|
||||
@ -1135,7 +1135,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01</div>
|
||||
</li>
|
||||
@ -1232,7 +1232,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -1307,7 +1307,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -1319,9 +1319,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -440px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -418px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
@ -1397,7 +1397,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -1436,7 +1436,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -1448,9 +1448,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01月</div>
|
||||
</li>
|
||||
@ -1490,7 +1490,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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">01日</div>
|
||||
</li>
|
||||
@ -1587,7 +1587,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -1608,7 +1608,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@ -4,9 +4,9 @@ exports[`filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -25,7 +25,7 @@ exports[`filter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -46,7 +46,7 @@ exports[`filter prop 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -57,9 +57,9 @@ exports[`format initial value 1`] = `
|
||||
<div class="van-picker">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -69,7 +69,7 @@ exports[`format initial value 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -78,7 +78,7 @@ exports[`format initial value 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -89,9 +89,9 @@ exports[`formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -110,7 +110,7 @@ exports[`formatter prop 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -131,7 +131,7 @@ exports[`formatter prop 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -142,9 +142,9 @@ exports[`max-hour & max-minute 1`] = `
|
||||
<div class="van-picker">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -157,7 +157,7 @@ exports[`max-hour & max-minute 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -169,7 +169,7 @@ exports[`max-hour & max-minute 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@ -21,6 +21,14 @@ export default createComponent({
|
||||
confirmButtonText: String,
|
||||
confirmButtonColor: String,
|
||||
showCancelButton: Boolean,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
allowHtml: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'van-dialog-bounce',
|
||||
@ -29,7 +37,7 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
overlay: {
|
||||
closeOnPopstate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
@ -37,10 +45,6 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
allowHtml: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
|
||||
@ -130,7 +130,7 @@ export default {
|
||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||
| overlayClass `v2.2.7` | Custom overlay class | _string_ | - |
|
||||
| overlayStyle `v2.2.7` | Custom overlay style | _object_ | - |
|
||||
| closeOnPopstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` |
|
||||
| closeOnPopstate `v2.0.5` | Whether to close when popstate | _boolean_ | `true` |
|
||||
| closeOnClickOverlay | Whether to close when click overlay | _boolean_ | `false` |
|
||||
| lockScroll | Whether to lock body scroll | _boolean_ | `true` |
|
||||
| allowHtml `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` |
|
||||
@ -156,7 +156,7 @@ export default {
|
||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
||||
| overlay-class `v2.2.7` | Custom overlay class | _string_ | - |
|
||||
| overlay-style `v2.2.7` | Custom overlay style | _object_ | - |
|
||||
| close-on-popstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` |
|
||||
| close-on-popstate `v2.0.5` | Whether to close when popstate | _boolean_ | `true` |
|
||||
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `false` |
|
||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||
|
||||
@ -160,7 +160,7 @@ export default {
|
||||
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
|
||||
| overlayClass `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
|
||||
| overlayStyle `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
|
||||
| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `true` |
|
||||
| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
|
||||
| lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
| allowHtml `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
| overlay | 是否展示遮罩层 | _boolean_ | `true` |
|
||||
| overlay-class `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
|
||||
| overlay-style `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
|
||||
| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `true` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
|
||||
| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
|
||||
@ -65,7 +65,7 @@ Dialog.defaultOptions = {
|
||||
confirmButtonColor: null,
|
||||
showConfirmButton: true,
|
||||
showCancelButton: false,
|
||||
closeOnPopstate: false,
|
||||
closeOnPopstate: true,
|
||||
closeOnClickOverlay: false,
|
||||
callback: (action) => {
|
||||
instance[action === 'confirm' ? 'resolve' : 'reject'](action);
|
||||
|
||||
@ -50,7 +50,11 @@ export default {
|
||||
<van-dropdown-item title="Title" ref="item">
|
||||
<van-switch-cell v-model="switch1" title="Title" />
|
||||
<van-switch-cell v-model="switch2" title="Title" />
|
||||
<van-button block type="info" @click="onConfirm">Confirm</van-button>
|
||||
<div style="padding: 5px 16px;">
|
||||
<van-button type="danger" block round @click="onConfirm">
|
||||
Confirm
|
||||
</van-button>
|
||||
</div>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
@ -112,7 +116,7 @@ Use `active-color` prop to custom active color of the title and options
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| active-color | Active color of title and option | _string_ | `#1989fa` |
|
||||
| active-color | Active color of title and option | _string_ | `#ee0a24` |
|
||||
| direction `v2.0.1` | Expand direction, can be set to `up` | _string_ | `down` |
|
||||
| z-index | z-index of menu item | _number \| string_ | `10` |
|
||||
| duration | Transition duration, unit second | _number \| string_ | `0.2` |
|
||||
|
||||
@ -52,7 +52,11 @@ export default {
|
||||
<van-dropdown-item title="筛选" ref="item">
|
||||
<van-switch-cell v-model="switch1" title="包邮" />
|
||||
<van-switch-cell v-model="switch2" title="团购" />
|
||||
<van-button block type="info" @click="onConfirm">确认</van-button>
|
||||
<div style="padding: 5px 16px;">
|
||||
<van-button type="danger" block round @click="onConfirm">
|
||||
确认
|
||||
</van-button>
|
||||
</div>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
```
|
||||
@ -116,7 +120,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#1989fa` |
|
||||
| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#ee0a24` |
|
||||
| direction `v2.0.1` | 菜单展开方向，可选值为`up` | _string_ | `down` |
|
||||
| z-index | 菜单栏 z-index 层级 | _number \| string_ | `10` |
|
||||
| duration | 动画时长，单位秒 | _number \| string_ | `0.2` |
|
||||
|
||||
@ -13,9 +13,17 @@
|
||||
<van-dropdown-item :title="t('itemTitle')" ref="item">
|
||||
<van-switch-cell v-model="switch1" :title="t('switchTitle1')" />
|
||||
<van-switch-cell v-model="switch2" :title="t('switchTitle2')" />
|
||||
<van-button type="info" block @click="onConfirm">
|
||||
{{ t('confirm') }}
|
||||
</van-button>
|
||||
<div style="padding: 5px 16px;">
|
||||
<van-button
|
||||
type="danger"
|
||||
block
|
||||
round
|
||||
style="height: 40px;"
|
||||
@click="onConfirm"
|
||||
>
|
||||
{{ t('confirm') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</demo-block>
|
||||
|
||||
@ -282,7 +282,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
resetValidation() {
|
||||
if (this.validateMessage) {
|
||||
if (this.validateFailed) {
|
||||
this.validateFailed = false;
|
||||
this.validateMessage = '';
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@
|
||||
}
|
||||
|
||||
&__left-icon {
|
||||
margin-right: 5px;
|
||||
margin-right: @padding-base;
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`resetValidation method - reset one field 1`] = `
|
||||
<form class="van-form">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="A" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--error">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">B failed</div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content"></div>
|
||||
</button>
|
||||
</form>
|
||||
`;
|
||||
@ -50,12 +50,12 @@ test('validate method - validate one field and passed', (done) => {
|
||||
|
||||
test('validate method - validate one field and failed', (done) => {
|
||||
mountForm({
|
||||
template: `
|
||||
<van-form ref="form" @failed="onFailed">
|
||||
<van-field name="A" :rules="rulesA" value="123" />
|
||||
<van-field name="B" :rules="rulesB" value="" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
template: `
|
||||
<van-form ref="form" @failed="onFailed">
|
||||
<van-field name="A" :rules="rulesA" value="123" />
|
||||
<van-field name="B" :rules="rulesB" value="" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data: getSimpleRules,
|
||||
mounted() {
|
||||
@ -90,7 +90,27 @@ test('resetValidation method - reset one field', (done) => {
|
||||
mounted() {
|
||||
this.$refs.form.validate().catch(() => {
|
||||
this.$refs.form.resetValidation('A');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.findAll('.van-field--error').length).toEqual(1);
|
||||
this.$refs.form.resetValidation('B');
|
||||
expect(wrapper.findAll('.van-field--error').length).toEqual(0);
|
||||
done();
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('resetValidation method - reset when rule message is empty', (done) => {
|
||||
const wrapper = mountSimpleRulesForm({
|
||||
data() {
|
||||
return {
|
||||
rulesA: [{ required: true, message: '' }],
|
||||
rulesB: [{ required: true, message: '' }],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.form.validate().catch(() => {
|
||||
this.$refs.form.resetValidation('A');
|
||||
expect(wrapper.findAll('.van-field--error').length).toEqual(1);
|
||||
done();
|
||||
});
|
||||
},
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
|
||||
.van-icon {
|
||||
&__image {
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
object-fit: contain;
|
||||
|
||||
@ -20,6 +20,7 @@ export default createComponent({
|
||||
}),
|
||||
BindEventMixin(function (bind) {
|
||||
bind(window, 'resize', this.resize, true);
|
||||
bind(window, 'orientationchange', this.resize, true);
|
||||
}),
|
||||
],
|
||||
|
||||
@ -36,22 +37,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
swipeDuration: {
|
||||
type: [Number, String],
|
||||
default: 500,
|
||||
},
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showIndex: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
startPosition: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
minZoom: {
|
||||
type: [Number, String],
|
||||
default: 1 / 3,
|
||||
@ -60,6 +49,18 @@ export default createComponent({
|
||||
type: [Number, String],
|
||||
default: 3,
|
||||
},
|
||||
showIndex: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
swipeDuration: {
|
||||
type: [Number, String],
|
||||
default: 500,
|
||||
},
|
||||
startPosition: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
overlayClass: {
|
||||
type: String,
|
||||
default: bem('overlay'),
|
||||
@ -68,6 +69,10 @@ export default createComponent({
|
||||
type: String,
|
||||
default: 'clear',
|
||||
},
|
||||
closeOnPopstate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
closeIconPosition: {
|
||||
type: String,
|
||||
default: 'top-right',
|
||||
|
||||
@ -109,7 +109,7 @@ export default {
|
||||
| onClose | Triggered when close | _Function_ | - |
|
||||
| onChange `v2.0.3` | Triggered when current image change | _Function_ | - |
|
||||
| onScale | Triggered when current image scale | _Function_ | - |
|
||||
| closeOnPopstate | Whether to close when popstate | _boolean_ | `false` |
|
||||
| closeOnPopstate | Whether to close when popstate | _boolean_ | `true` |
|
||||
| asyncClose | Whether to enable async close | _boolean_ | `false` |
|
||||
| className | Custom className | _any_ | - |
|
||||
| maxZoom | Max zoom | _number \| string_ | `3` |
|
||||
@ -130,7 +130,7 @@ export default {
|
||||
| show-indicators | Whether to show indicators | _boolean_ | `false` |
|
||||
| loop | Whether to enable loop | _boolean_ | `true` |
|
||||
| async-close | Whether to enable async close | _boolean_ | `false` |
|
||||
| close-on-popstate | Whether to close when popstate | _boolean_ | `false` |
|
||||
| close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
|
||||
| class-name | Custom className | _any_ | - |
|
||||
| max-zoom | Max zoom | _number \| string_ | `3` |
|
||||
| min-zoom | Min zoom | _number \| string_ | `1/3` |
|
||||
|
||||
@ -144,7 +144,7 @@ export default {
|
||||
| onChange `v2.0.3` | 切换图片时的回调函数，回调参数为当前索引 | _Function_ | - |
|
||||
| onScale | 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象 | _Function_ | - |
|
||||
| asyncClose | 是否开启异步关闭 | _boolean_ | `false` |
|
||||
| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| closeOnPopstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
|
||||
| className | 自定义类名 | _any_ | - |
|
||||
| maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
|
||||
| minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
|
||||
@ -166,7 +166,7 @@ export default {
|
||||
| show-indicators | 是否显示轮播指示器 | _boolean_ | `false` |
|
||||
| loop | 是否开启循环播放 | _boolean_ | `true` |
|
||||
| async-close | 是否开启异步关闭 | _boolean_ | `false` |
|
||||
| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
|
||||
| class-name | 自定义类名 | _any_ | - |
|
||||
| max-zoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
|
||||
| min-zoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
|
||||
|
||||
@ -88,7 +88,6 @@ export default {
|
||||
swipeDuration: 300,
|
||||
asyncClose: !!timer,
|
||||
closeable,
|
||||
closeOnPopstate: true,
|
||||
startPosition: typeof position === 'number' ? position : 0,
|
||||
});
|
||||
|
||||
|
||||
@ -6,23 +6,23 @@ let instance;
|
||||
|
||||
const defaultConfig = {
|
||||
loop: true,
|
||||
images: [],
|
||||
value: true,
|
||||
minZoom: 1 / 3,
|
||||
images: [],
|
||||
maxZoom: 3,
|
||||
className: '',
|
||||
minZoom: 1 / 3,
|
||||
onClose: null,
|
||||
onChange: null,
|
||||
className: '',
|
||||
showIndex: true,
|
||||
closeable: false,
|
||||
closeIcon: 'clear',
|
||||
asyncClose: false,
|
||||
getContainer: 'body',
|
||||
startPosition: 0,
|
||||
swipeDuration: 500,
|
||||
showIndicators: false,
|
||||
closeOnPopstate: false,
|
||||
closeOnPopstate: true,
|
||||
closeIconPosition: 'top-right',
|
||||
getContainer: 'body',
|
||||
};
|
||||
|
||||
const initInstance = () => {
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
47
src/mixins/portal.js
Normal file
47
src/mixins/portal.js
Normal file
@ -0,0 +1,47 @@
|
||||
function getElement(selector) {
|
||||
if (typeof selector === 'string') {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
|
||||
return selector();
|
||||
}
|
||||
|
||||
export function PortalMixin({ ref, afterPortal } = {}) {
|
||||
return {
|
||||
props: {
|
||||
getContainer: [String, Function],
|
||||
},
|
||||
|
||||
watch: {
|
||||
getContainer: 'portal',
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.getContainer) {
|
||||
this.portal();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
portal() {
|
||||
const { getContainer } = this;
|
||||
const el = ref ? this.$refs[ref] : this.$el;
|
||||
|
||||
let container;
|
||||
if (getContainer) {
|
||||
container = getElement(getContainer);
|
||||
} else if (this.$parent) {
|
||||
container = this.$parent.$el;
|
||||
}
|
||||
|
||||
if (container && container !== el.parentNode) {
|
||||
container.appendChild(el);
|
||||
}
|
||||
|
||||
if (afterPortal) {
|
||||
afterPortal.call(this);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -78,8 +78,9 @@ export default createComponent({
|
||||
render() {
|
||||
return (
|
||||
<div class={bem('wrapper', { wider: this.wider })}>
|
||||
<button
|
||||
type="button"
|
||||
<div
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class={bem([
|
||||
this.color,
|
||||
{
|
||||
@ -90,7 +91,7 @@ export default createComponent({
|
||||
])}
|
||||
>
|
||||
{this.genContent()}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@ -160,6 +160,7 @@ export default {
|
||||
| close-button-loading `v2.7.0` | Whether to show loading close button in custom theme | _boolean_ | `false` |
|
||||
| show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` |
|
||||
| hide-on-click-outside | Whether to hide keyboard when click outside | _boolean_ | `true` |
|
||||
| get-container `v2.10.0` | Return the mount node for NumberKeyboard | _string \| () => Element_ | - |
|
||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
@ -173,6 +173,7 @@ export default {
|
||||
| close-button-loading `v2.7.0` | 是否将关闭按钮设置为加载中状态，仅在 `theme="custom"` 时有效 | _boolean_ | `false` |
|
||||
| show-delete-key `v2.5.9` | 是否展示删除图标 | _boolean_ | `true` |
|
||||
| hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` |
|
||||
| get-container `v2.10.0` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { stopPropagation } from '../utils/dom/event';
|
||||
import { PortalMixin } from '../mixins/portal';
|
||||
import { BindEventMixin } from '../mixins/bind-event';
|
||||
import Key from './Key';
|
||||
|
||||
@ -7,6 +8,7 @@ const [createComponent, bem] = createNamespace('number-keyboard');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
PortalMixin(),
|
||||
BindEventMixin(function (bind) {
|
||||
if (this.hideOnClickOutside) {
|
||||
bind(document.body, 'touchstart', this.onBlur);
|
||||
|
||||
@ -79,13 +79,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: @number-keyboard-key-height;
|
||||
padding: 0;
|
||||
font-size: @number-keyboard-key-font-size;
|
||||
line-height: 1.5;
|
||||
background-color: @white;
|
||||
border: none;
|
||||
border-radius: @border-radius-lg;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@ -41,45 +41,95 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-number-keyboard" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper van-key__wrapper--wider"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">.</button></div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper van-key__wrapper--wider">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard__sidebar">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--blue van-key--large">完成</button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--blue van-key--large">完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,20 +137,44 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-number-keyboard__header"><button type="button" class="van-number-keyboard__close">完成</button></div>
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">X</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">X</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -110,66 +184,142 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">.</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">.</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">00</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">.</button></div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">00</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard__sidebar">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--blue van-key--large">完成</button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--blue van-key--large">完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,20 +4,44 @@ exports[`extra-key slot 1`] = `
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">Custom Extra Key</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">Custom Extra Key</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,22 +51,46 @@ exports[`focus on key 1`] = `
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--active">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,22 +100,46 @@ exports[`focus on key 2`] = `
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -77,22 +149,46 @@ exports[`move and blur key 1`] = `
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--active">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -102,22 +198,46 @@ exports[`move and blur key 2`] = `
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--active">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -127,22 +247,46 @@ exports[`move and blur key 3`] = `
|
||||
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -155,22 +299,46 @@ exports[`render title 1`] = `
|
||||
</div>
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -181,22 +349,46 @@ exports[`title-left slot 1`] = `
|
||||
<div class="van-number-keyboard__header"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,22 +19,46 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-number-keyboard" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body">
|
||||
<div class="van-number-keyboard__keys">
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">1</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">2</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">3</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">4</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">5</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">6</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">7</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">8</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">9</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
|
||||
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
|
||||
<div class="van-key__wrapper"><button type="button" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
</svg></div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key">0</div>
|
||||
</div>
|
||||
<div class="van-key__wrapper">
|
||||
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
|
||||
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
|
||||
</svg></button></div>
|
||||
</svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -252,8 +252,8 @@ export default {
|
||||
| show-toolbar | Whether to show toolbar | _boolean_ | `false` |
|
||||
| allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` |
|
||||
| default-index | Default value index of single column picker | _number \| string_ | `0` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `6` |
|
||||
| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
### Events
|
||||
|
||||
@ -174,7 +174,7 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
const citys = {
|
||||
const cities = {
|
||||
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
|
||||
};
|
||||
@ -182,12 +182,12 @@ const citys = {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [{ values: Object.keys(citys) }, { values: citys['浙江'] }],
|
||||
columns: [{ values: Object.keys(cities) }, { values: cities['浙江'] }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
picker.setColumnValues(1, cities[values[0]]);
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -275,8 +275,8 @@ export default {
|
||||
| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
|
||||
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
|
||||
| default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
|
||||
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` |
|
||||
|
||||
### Events
|
||||
|
||||
@ -23,7 +23,7 @@ export const pickerProps = {
|
||||
},
|
||||
visibleItemCount: {
|
||||
type: [Number, String],
|
||||
default: 5,
|
||||
default: 6,
|
||||
},
|
||||
swipeDuration: {
|
||||
type: [Number, String],
|
||||
|
||||
@ -8,9 +8,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -40,9 +40,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 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>
|
||||
@ -60,7 +60,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -72,9 +72,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 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>
|
||||
@ -93,7 +93,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 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>
|
||||
@ -105,7 +105,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -117,9 +117,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -139,7 +139,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</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 class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -148,7 +148,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -160,9 +160,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
@ -174,7 +174,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -186,9 +186,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column column1">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -198,7 +198,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column column2">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 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>
|
||||
@ -216,7 +216,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -228,9 +228,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker__columns" style="height: 264px;">
|
||||
<div class="van-picker-column column1">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>
|
||||
@ -240,7 +240,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column column2">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 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>
|
||||
@ -258,7 +258,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
|
||||
@ -59,11 +59,11 @@ exports[`column watch default index 2`] = `
|
||||
exports[`columns-top、columns-bottom prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;">
|
||||
<!---->Custom Columns Top<div class="van-picker__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>Custom Columns Bottom
|
||||
<!---->
|
||||
@ -73,15 +73,15 @@ exports[`columns-top、columns-bottom prop 1`] = `
|
||||
exports[`not allow html 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 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>option</div></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -92,11 +92,11 @@ exports[`render title slot 1`] = `
|
||||
<div class="van-picker">
|
||||
<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__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -106,9 +106,9 @@ exports[`render title slot 1`] = `
|
||||
exports[`set rem item-height 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 800px;">
|
||||
<div class="van-picker__columns" style="height: 960px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 320px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 400px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 160px;">
|
||||
<div class="van-ellipsis">1990</div>
|
||||
</li>
|
||||
@ -117,7 +117,7 @@ exports[`set rem item-height 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 320px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 400px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 160px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
@ -128,11 +128,11 @@ exports[`toolbar-position prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker__columns" style="height: 264px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
|
||||
@ -542,7 +542,6 @@ export default createComponent({
|
||||
ImagePreview({
|
||||
images: this.imageList,
|
||||
startPosition: index,
|
||||
closeOnPopstate: true,
|
||||
onClose: () => {
|
||||
this.$emit('close-preview', params);
|
||||
},
|
||||
|
||||
@ -111,6 +111,21 @@ export default createComponent({
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* The phone number copied from IOS mobile phone address book
|
||||
* will add spaces and invisible Unicode characters
|
||||
* which cannot pass the /^\d+$/ verification
|
||||
* so keep numbers and dots
|
||||
*/
|
||||
getFormatter(message) {
|
||||
return function formatter(value) {
|
||||
if (message.type === 'mobile' || message.type === 'tel') {
|
||||
return value.replace(/[^\d.]/g, '');
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
},
|
||||
|
||||
genMessage(message, index) {
|
||||
if (message.type === 'image') {
|
||||
@ -157,6 +172,7 @@ export default createComponent({
|
||||
required={String(message.required) === '1'}
|
||||
placeholder={this.getPlaceholder(message)}
|
||||
type={this.getType(message)}
|
||||
formatter={this.getFormatter(message)}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
@ -32,6 +32,49 @@ test('resetSelectedSku method', () => {
|
||||
expect(wrapper.emitted('buy-clicked').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('message formatter', () => {
|
||||
const skuData = getSkuData();
|
||||
|
||||
skuData.sku.messages = skuData.sku.messages.filter(
|
||||
message => message.type === 'tel'
|
||||
);
|
||||
|
||||
const wrapper = mount(Sku, {
|
||||
propsData: {
|
||||
value: true,
|
||||
initialSku,
|
||||
sku: skuData.sku,
|
||||
quota: skuData.quota,
|
||||
goods: skuData.goods_info,
|
||||
goodsId: skuData.goods_id,
|
||||
quotaUsed: skuData.quota_used,
|
||||
hideStock: skuData.sku.hide_stock,
|
||||
startSaleNum: skuData.start_sale_num,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
const correctValue = '15000000000';
|
||||
|
||||
// \u202c
|
||||
input.element.value = '15000000000';
|
||||
input.trigger('input');
|
||||
|
||||
expect(input.element.value).toEqual(correctValue);
|
||||
|
||||
// \u0020
|
||||
input.element.value = '150 0000 0000';
|
||||
input.trigger('input');
|
||||
|
||||
expect(input.element.value).toEqual(correctValue);
|
||||
|
||||
// /[a-zA-z]/
|
||||
input.element.value = 'a-zA-z';
|
||||
input.trigger('input');
|
||||
|
||||
expect(input.element.value).toEqual('');
|
||||
});
|
||||
|
||||
test('stringToDate', () => {
|
||||
expect(dateToString(stringToDate(''))).toEqual('');
|
||||
expect(dateToString(stringToDate('2020-07-01'))).toEqual('2020-07-01');
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 10px 10px 10px 0;
|
||||
line-height: 18px;
|
||||
line-height: @line-height-sm;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
border-bottom-width: 1px;
|
||||
|
||||
@ -167,3 +167,15 @@ export default {
|
||||
| minus | 点击减少按钮时触发 | - |
|
||||
| focus | 输入框聚焦时触发 | _event: Event_ |
|
||||
| blur | 输入框失焦时触发 | _event: Event_ |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 为什么 value 有时候会变成 string 类型？
|
||||
|
||||
这是因为用户输入过程中可能出现小数点或空值，比如 `1.`，这种情况下组件会抛出字符串类型。
|
||||
|
||||
如果希望 value 保持 number 类型，可以在 v-model 上添加 `number` 修饰符：
|
||||
|
||||
```html
|
||||
<van-stepper v-model.number="value" />
|
||||
```
|
||||
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| offset-top `v2.8.7` | Offset top, supports `px` ans `rem` unit, default `px` | _number \| string_ | `0` |
|
||||
| offset-top `v2.8.7` | Offset top, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
|
||||
| z-index | z-index when sticky | _number \| string_ | `99` |
|
||||
| container | Container DOM | _Element_ | - |
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `0` |
|
||||
| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
|
||||
| z-index | 吸顶时的 z-index | _number \| string_ | `99` |
|
||||
| container | 容器对应的 HTML 节点 | _Element_ | - |
|
||||
|
||||
|
||||
@ -36,6 +36,14 @@ exports[`offset-top with rem unit 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`offset-top with vw unit 1`] = `
|
||||
<div style="height: 10px;">
|
||||
<div class="van-sticky van-sticky--fixed" style="top: 30px;">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`sticky to top 1`] = `
|
||||
<div style="height: 10px;">
|
||||
<div class="van-sticky">
|
||||
|
||||
@ -63,6 +63,22 @@ test('offset-top with rem unit', () => {
|
||||
window.getComputedStyle = originGetComputedStyle;
|
||||
});
|
||||
|
||||
test('offset-top with vw unit', () => {
|
||||
window.innerWidth = 300;
|
||||
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-sticky style="height: 10px;" offset-top="10vw">
|
||||
Content
|
||||
</van-sticky>
|
||||
`,
|
||||
});
|
||||
|
||||
mockScrollTop(100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
mockScrollTop(0);
|
||||
});
|
||||
|
||||
test('should not trigger scroll event when hidden', () => {
|
||||
const scroll = jest.fn();
|
||||
mount({
|
||||
|
||||
@ -43,6 +43,10 @@
|
||||
@font-size-md: 14px;
|
||||
@font-size-lg: 16px;
|
||||
@font-weight-bold: 500;
|
||||
@line-height-xs: 14px;
|
||||
@line-height-sm: 18px;
|
||||
@line-height-md: 20px;
|
||||
@line-height-lg: 22px;
|
||||
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft Yahei', sans-serif;
|
||||
@ -65,25 +69,27 @@
|
||||
|
||||
// ActionSheet
|
||||
@action-sheet-max-height: 80%;
|
||||
@action-sheet-header-height: 44px;
|
||||
@action-sheet-header-height: 48px;
|
||||
@action-sheet-header-font-size: @font-size-lg;
|
||||
@action-sheet-description-color: @gray-6;
|
||||
@action-sheet-description-font-size: @font-size-md;
|
||||
@action-sheet-description-line-height: 20px;
|
||||
@action-sheet-description-line-height: @line-height-md;
|
||||
@action-sheet-item-background: @white;
|
||||
@action-sheet-item-font-size: @font-size-lg;
|
||||
@action-sheet-item-line-height: 22px;
|
||||
@action-sheet-item-line-height: @line-height-lg;
|
||||
@action-sheet-item-text-color: @text-color;
|
||||
@action-sheet-item-disabled-text-color: @gray-5;
|
||||
@action-sheet-subname-color: @gray-6;
|
||||
@action-sheet-subname-font-size: @font-size-sm;
|
||||
@action-sheet-subname-line-height: 20px;
|
||||
@action-sheet-subname-line-height: @line-height-sm;
|
||||
@action-sheet-close-icon-size: 22px;
|
||||
@action-sheet-close-icon-color: @gray-5;
|
||||
@action-sheet-close-icon-active-color: @gray-6;
|
||||
@action-sheet-close-icon-padding: 0 @padding-md;
|
||||
@action-sheet-cancel-text-color: @gray-7;
|
||||
@action-sheet-cancel-padding-top: @padding-xs;
|
||||
@action-sheet-cancel-padding-color: @background-color;
|
||||
@action-sheet-loading-icon-size: 22px;
|
||||
|
||||
// AddressEdit
|
||||
@address-edit-padding: @padding-sm;
|
||||
@ -97,13 +103,13 @@
|
||||
@address-list-disabled-text-color: @gray-6;
|
||||
@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
|
||||
@address-list-disabled-text-font-size: @font-size-md;
|
||||
@address-list-disabled-text-line-height: 20px;
|
||||
@address-list-disabled-text-line-height: @line-height-md;
|
||||
@address-list-add-button-z-index: 999;
|
||||
@address-list-item-padding: @padding-sm;
|
||||
@address-list-item-text-color: @text-color;
|
||||
@address-list-item-disabled-text-color: @gray-5;
|
||||
@address-list-item-font-size: 13px;
|
||||
@address-list-item-line-height: 18px;
|
||||
@address-list-item-line-height: @line-height-sm;
|
||||
@address-list-item-radio-icon-color: @red;
|
||||
@address-list-edit-icon-size: 20px;
|
||||
|
||||
@ -159,7 +165,7 @@
|
||||
@calendar-selected-day-size: 54px;
|
||||
@calendar-selected-day-color: @white;
|
||||
@calendar-info-font-size: @font-size-xs;
|
||||
@calendar-info-line-height: 14px;
|
||||
@calendar-info-line-height: @line-height-xs;
|
||||
@calendar-selected-day-background-color: @red;
|
||||
@calendar-day-disabled-color: @gray-5;
|
||||
@calendar-confirm-button-height: 36px;
|
||||
@ -174,7 +180,7 @@
|
||||
@card-thumb-border-radius: @border-radius-lg;
|
||||
@card-title-line-height: 16px;
|
||||
@card-desc-color: @gray-7;
|
||||
@card-desc-line-height: 20px;
|
||||
@card-desc-line-height: @line-height-md;
|
||||
@card-price-color: @gray-8;
|
||||
@card-origin-price-color: @gray-6;
|
||||
@card-num-color: @gray-6;
|
||||
@ -195,7 +201,7 @@
|
||||
@cell-required-color: @red;
|
||||
@cell-label-color: @gray-6;
|
||||
@cell-label-font-size: @font-size-sm;
|
||||
@cell-label-line-height: 18px;
|
||||
@cell-label-line-height: @line-height-sm;
|
||||
@cell-label-margin-top: @padding-base;
|
||||
@cell-value-color: @gray-6;
|
||||
@cell-icon-size: 16px;
|
||||
@ -226,12 +232,12 @@
|
||||
@circle-text-color: @text-color;
|
||||
@circle-text-font-weight: @font-weight-bold;
|
||||
@circle-text-font-size: @font-size-md;
|
||||
@circle-text-line-height: 18px;
|
||||
@circle-text-line-height: @line-height-md;
|
||||
|
||||
// Collapse
|
||||
@collapse-item-transition-duration: @animation-duration-base;
|
||||
@collapse-item-content-padding: @padding-sm @padding-md;
|
||||
@collapse-item-content-font-size: 14px;
|
||||
@collapse-item-content-font-size: @font-size-md;
|
||||
@collapse-item-content-line-height: 1.5;
|
||||
@collapse-item-content-text-color: @gray-6;
|
||||
@collapse-item-content-background-color: @white;
|
||||
@ -241,7 +247,7 @@
|
||||
@contact-card-padding: @padding-md;
|
||||
@contact-card-add-icon-size: 40px;
|
||||
@contact-card-add-icon-color: @blue;
|
||||
@contact-card-value-line-height: 20px;
|
||||
@contact-card-value-line-height: @line-height-md;
|
||||
|
||||
// ContactEdit
|
||||
@contact-edit-padding: @padding-md;
|
||||
@ -259,7 +265,7 @@
|
||||
// CountDown
|
||||
@count-down-text-color: @text-color;
|
||||
@count-down-font-size: @font-size-md;
|
||||
@count-down-line-height: 20px;
|
||||
@count-down-line-height: @line-height-md;
|
||||
|
||||
// Coupon
|
||||
@coupon-margin: 0 @padding-sm @padding-sm;
|
||||
@ -289,7 +295,7 @@
|
||||
@coupon-list-empty-image-size: 200px;
|
||||
@coupon-list-empty-tip-color: @gray-6;
|
||||
@coupon-list-empty-tip-font-size: @font-size-md;
|
||||
@coupon-list-empty-tip-line-height: 20px;
|
||||
@coupon-list-empty-tip-line-height: @line-height-md;
|
||||
|
||||
// Dialog
|
||||
@dialog-width: 320px;
|
||||
@ -304,7 +310,7 @@
|
||||
@dialog-header-isolated-padding: @padding-lg 0;
|
||||
@dialog-message-padding: @padding-lg;
|
||||
@dialog-message-font-size: @font-size-md;
|
||||
@dialog-message-line-height: 20px;
|
||||
@dialog-message-line-height: @line-height-md;
|
||||
@dialog-message-max-height: 60vh;
|
||||
@dialog-has-title-message-text-color: @gray-7;
|
||||
@dialog-has-title-message-padding-top: @padding-sm;
|
||||
@ -325,11 +331,11 @@
|
||||
@dropdown-menu-background-color: @white;
|
||||
@dropdown-menu-title-font-size: 15px;
|
||||
@dropdown-menu-title-text-color: @text-color;
|
||||
@dropdown-menu-title-active-text-color: @blue;
|
||||
@dropdown-menu-title-active-text-color: @red;
|
||||
@dropdown-menu-title-disabled-text-color: @gray-6;
|
||||
@dropdown-menu-title-padding: 0 @padding-xs;
|
||||
@dropdown-menu-title-line-height: 22px;
|
||||
@dropdown-menu-option-active-color: @blue;
|
||||
@dropdown-menu-title-line-height: @line-height-lg;
|
||||
@dropdown-menu-option-active-color: @red;
|
||||
@dropdown-menu-content-max-height: 80%;
|
||||
@dropdown-item-z-index: 10;
|
||||
|
||||
@ -339,8 +345,8 @@
|
||||
@empty-description-margin-top: @padding-md;
|
||||
@empty-description-padding: 0 60px;
|
||||
@empty-description-color: @gray-6;
|
||||
@empty-description-font-size: 14px;
|
||||
@empty-description-line-height: 20px;
|
||||
@empty-description-font-size: @font-size-md;
|
||||
@empty-description-line-height: @line-height-md;
|
||||
@empty-bottom-margin-top: 24px;
|
||||
|
||||
// Field
|
||||
@ -399,7 +405,7 @@
|
||||
// IndexBar
|
||||
@index-bar-sidebar-z-index: 2;
|
||||
@index-bar-index-font-size: @font-size-xs;
|
||||
@index-bar-index-line-height: 14px;
|
||||
@index-bar-index-line-height: @line-height-xs;
|
||||
@index-bar-index-active-color: @green;
|
||||
|
||||
// Info
|
||||
@ -424,7 +430,7 @@
|
||||
// ImagePreview
|
||||
@image-preview-index-text-color: @white;
|
||||
@image-preview-index-font-size: @font-size-md;
|
||||
@image-preview-index-line-height: 22px;
|
||||
@image-preview-index-line-height: @line-height-md;
|
||||
@image-preview-index-text-shadow: 0 1px 1px @gray-8;
|
||||
@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
|
||||
@image-preview-close-icon-size: 22px;
|
||||
@ -471,7 +477,7 @@
|
||||
@notify-text-color: @white;
|
||||
@notify-padding: @padding-xs @padding-md;
|
||||
@notify-font-size: @font-size-md;
|
||||
@notify-line-height: 20px;
|
||||
@notify-line-height: @line-height-md;
|
||||
@notify-primary-background-color: @blue;
|
||||
@notify-success-background-color: @green;
|
||||
@notify-danger-background-color: @red;
|
||||
@ -484,8 +490,8 @@
|
||||
@number-keyboard-key-active-color: @gray-3;
|
||||
@number-keyboard-delete-font-size: @font-size-lg;
|
||||
@number-keyboard-title-color: @gray-7;
|
||||
@number-keyboard-title-height: 30px;
|
||||
@number-keyboard-title-font-size: @font-size-md;
|
||||
@number-keyboard-title-height: 34px;
|
||||
@number-keyboard-title-font-size: @font-size-lg;
|
||||
@number-keyboard-close-padding: 0 @padding-md;
|
||||
@number-keyboard-close-color: @text-link-color;
|
||||
@number-keyboard-close-font-size: @font-size-md;
|
||||
@ -533,7 +539,7 @@
|
||||
@picker-background-color: @white;
|
||||
@picker-toolbar-height: 44px;
|
||||
@picker-title-font-size: @font-size-lg;
|
||||
@picker-title-line-height: 20px;
|
||||
@picker-title-line-height: @line-height-md;
|
||||
@picker-action-padding: 0 @padding-md;
|
||||
@picker-action-font-size: @font-size-md;
|
||||
@picker-confirm-action-color: @text-link-color;
|
||||
@ -591,7 +597,7 @@
|
||||
@share-sheet-header-padding: @padding-sm @padding-md @padding-base;
|
||||
@share-sheet-title-color: @text-color;
|
||||
@share-sheet-title-font-size: @font-size-md;
|
||||
@share-sheet-title-line-height: 20px;
|
||||
@share-sheet-title-line-height: @line-height-md;
|
||||
@share-sheet-description-color: @gray-6;
|
||||
@share-sheet-description-font-size: @font-size-sm;
|
||||
@share-sheet-description-line-height: 16px;
|
||||
@ -618,11 +624,9 @@
|
||||
@search-action-font-size: @font-size-md;
|
||||
|
||||
// Sidebar
|
||||
@sidebar-width: 85px;
|
||||
|
||||
// SidebarItem
|
||||
@sidebar-width: 80px;
|
||||
@sidebar-font-size: @font-size-md;
|
||||
@sidebar-line-height: 20px;
|
||||
@sidebar-line-height: @line-height-md;
|
||||
@sidebar-text-color: @text-color;
|
||||
@sidebar-disabled-text-color: @gray-5;
|
||||
@sidebar-padding: 20px @padding-sm;
|
||||
@ -766,12 +770,15 @@
|
||||
@tabs-bottom-bar-color: @tabs-default-color;
|
||||
|
||||
// Tag
|
||||
@tag-padding: 0.2em 0.5em;
|
||||
@tag-font-size: @font-size-xs;
|
||||
@tag-medium-font-size: @font-size-sm;
|
||||
@tag-large-font-size: @font-size-md;
|
||||
@tag-padding: 0 @padding-base;
|
||||
@tag-text-color: @white;
|
||||
@tag-border-radius: 0.2em;
|
||||
@tag-font-size: @font-size-sm;
|
||||
@tag-border-radius: 2px;
|
||||
@tag-line-height: 16px;
|
||||
@tag-medium-padding: 2px 6px;
|
||||
@tag-large-padding: @padding-base @padding-xs;
|
||||
@tag-large-border-radius: @border-radius-md;
|
||||
@tag-large-font-size: @font-size-md;
|
||||
@tag-round-border-radius: @border-radius-max;
|
||||
@tag-danger-color: @red;
|
||||
@tag-primary-color: @blue;
|
||||
@ -785,10 +792,10 @@
|
||||
@toast-font-size: @font-size-md;
|
||||
@toast-text-color: @white;
|
||||
@toast-loading-icon-color: @white;
|
||||
@toast-line-height: 20px;
|
||||
@toast-line-height: @line-height-md;
|
||||
@toast-border-radius: @border-radius-lg;
|
||||
@toast-background-color: fade(@text-color, 88%);
|
||||
@toast-icon-size: 40px;
|
||||
@toast-background-color: fade(@black, 70%);
|
||||
@toast-icon-size: 36px;
|
||||
@toast-text-min-width: 96px;
|
||||
@toast-text-padding: @padding-xs @padding-sm;
|
||||
@toast-default-padding: @padding-md;
|
||||
@ -828,7 +835,7 @@
|
||||
@uploader-mask-background-color: fade(@gray-8, 88%);
|
||||
@uploader-mask-icon-size: 22px;
|
||||
@uploader-mask-message-font-size: @font-size-sm;
|
||||
@uploader-mask-message-line-height: 14px;
|
||||
@uploader-mask-message-line-height: @line-height-xs;
|
||||
@uploader-loading-icon-size: 22px;
|
||||
@uploader-loading-icon-color: @white;
|
||||
@uploader-disabled-opacity: @disabled-opacity;
|
||||
|
||||
@ -18,6 +18,7 @@ export default createComponent({
|
||||
ParentMixin('vanSwipe'),
|
||||
BindEventMixin(function (bind, isBind) {
|
||||
bind(window, 'resize', this.resize, true);
|
||||
bind(window, 'orientationchange', this.resize, true);
|
||||
bind(window, 'visibilitychange', this.onVisibilityChange);
|
||||
|
||||
if (isBind) {
|
||||
|
||||
@ -126,7 +126,7 @@ export default {
|
||||
|
||||
### Sticky
|
||||
|
||||
In sticky mode, the tab will be fixed to top when scroll to top
|
||||
In sticky mode, the tab will be fixed to top when scroll to top.
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" sticky>
|
||||
@ -138,7 +138,7 @@ In sticky mode, the tab will be fixed to top when scroll to top
|
||||
|
||||
### Custom title
|
||||
|
||||
Use title slot to custom tab title
|
||||
Use title slot to custom tab title.
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active">
|
||||
@ -151,7 +151,7 @@ Use title slot to custom tab title
|
||||
|
||||
### Switch Animation
|
||||
|
||||
Use `animated` props to change tabs with animation
|
||||
Use `animated` props to change tabs with animation.
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" animated>
|
||||
@ -163,7 +163,7 @@ Use `animated` props to change tabs with animation
|
||||
|
||||
### Swipeable
|
||||
|
||||
In swipeable mode, you can switch tabs with swipe gestrue in the content
|
||||
In swipeable mode, you can switch tabs with swipe gestrue in the content.
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" swipeable>
|
||||
@ -175,7 +175,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
|
||||
|
||||
### Scrollspy
|
||||
|
||||
In scrollspy mode, the list of content will be tiled
|
||||
In scrollspy mode, the list of content will be tiled.
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" scrollspy sticky>
|
||||
@ -185,6 +185,34 @@ In scrollspy mode, the list of content will be tiled
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### Before Change
|
||||
|
||||
```html
|
||||
<van-tabs :before-change="beforeChange">
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
beforeChange(index) {
|
||||
// prevent change
|
||||
if (index === 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// async
|
||||
return new Promise((resolve) => {
|
||||
resolve(index !== 3);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Tabs Props
|
||||
@ -205,10 +233,11 @@ In scrollspy mode, the list of content will be tiled
|
||||
| swipeable | Whether to switch tabs with swipe gestrue in the content | _boolean_ | `false` |
|
||||
| lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
|
||||
| scrollspy `v2.3.0` | Whether to use scrollspy mode | _boolean_ | `false` |
|
||||
| offset-top `v2.8.7` | Sticky offset top , supports `px` ans `rem` unit, default `px` | _number \| string_ | `0` |
|
||||
| offset-top `v2.8.7` | Sticky offset top , supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
|
||||
| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `4` | - |
|
||||
| title-active-color | Title active color | _string_ | - |
|
||||
| title-inactive-color | Title inactive color | _string_ | - |
|
||||
| before-change `v2.9.3` | Callback function before changing tabs，return `false` to prevent change，support return Promise | _(name) => boolean \| Promise_ | - |
|
||||
|
||||
### Tab Props
|
||||
|
||||
@ -241,6 +270,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
| resize | Resize Tabs when container element resized | - | void |
|
||||
| scrollTo `v2.9.3` | Go to specified tab in scrollspy mode | name | void |
|
||||
|
||||
### Tabs Slots
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ Vue.use(Tabs);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定当前激活标签对应的索引值，默认情况下启用第一个标签
|
||||
通过 `v-model` 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active">
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
### 通过名称匹配
|
||||
|
||||
在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name`（此时无法通过索引值来匹配标签）
|
||||
在标签指定 `name` 属性的情况下，`v-model` 的值为当前标签的 `name`（此时无法通过索引值来匹配标签）。
|
||||
|
||||
```html
|
||||
<van-tabs v-model="activeName">
|
||||
@ -59,7 +59,7 @@ export default {
|
||||
|
||||
### 标签栏滚动
|
||||
|
||||
标签数量超过 4 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中
|
||||
标签数量超过 4 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。
|
||||
|
||||
```html
|
||||
<van-tabs>
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
|
||||
### 禁用标签
|
||||
|
||||
设置`disabled`属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在`van-tabs`上监听`disabled`事件
|
||||
设置 `disabled` 属性即可禁用标签，如果需要监听禁用标签的点击事件，可以在 `van-tabs` 上监听`disabled` 事件。
|
||||
|
||||
```html
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
@ -95,7 +95,7 @@ export default {
|
||||
|
||||
### 样式风格
|
||||
|
||||
`Tab`支持两种样式风格：`line`和`card`，默认为`line`样式，可以通过`type`属性修改样式风格
|
||||
`Tab` 支持两种样式风格：`line` 和`card`，默认为 `line` 样式，可以通过 `type` 属性切换样式风格。
|
||||
|
||||
```html
|
||||
<van-tabs type="card">
|
||||
@ -107,7 +107,7 @@ export default {
|
||||
|
||||
### 点击事件
|
||||
|
||||
可以在`van-tabs`上绑定`click`事件，事件传参为标签对应的索引和标题
|
||||
可以在 `van-tabs` 上绑定 `click` 事件，事件传参为标签对应的标识符和标题。
|
||||
|
||||
```html
|
||||
<van-tabs @click="onClick">
|
||||
@ -130,7 +130,7 @@ export default {
|
||||
|
||||
### 粘性布局
|
||||
|
||||
通过`sticky`属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶
|
||||
通过 `sticky` 属性可以开启粘性布局，粘性布局下，标签页滚动到顶部时会自动吸顶。
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" sticky>
|
||||
@ -142,7 +142,7 @@ export default {
|
||||
|
||||
### 自定义标签
|
||||
|
||||
通过 title 插槽可以自定义标签内容
|
||||
通过 `title` 插槽可以自定义标签内容。
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active">
|
||||
@ -155,7 +155,7 @@ export default {
|
||||
|
||||
### 切换动画
|
||||
|
||||
通过`animated`属性可以开启切换标签内容时的转场动画
|
||||
通过 `animated` 属性可以开启切换标签内容时的转场动画。
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" animated>
|
||||
@ -167,7 +167,7 @@ export default {
|
||||
|
||||
### 滑动切换
|
||||
|
||||
通过`swipeable`属性可以开启滑动切换标签页
|
||||
通过 `swipeable` 属性可以开启滑动切换标签页。
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" swipeable>
|
||||
@ -179,7 +179,7 @@ export default {
|
||||
|
||||
### 滚动导航
|
||||
|
||||
通过`scrollspy`属性可以开启滚动导航模式，该模式下，内容将会平铺展示
|
||||
通过 `scrollspy` 属性可以开启滚动导航模式，该模式下，内容将会平铺展示。
|
||||
|
||||
```html
|
||||
<van-tabs v-model="active" scrollspy sticky>
|
||||
@ -189,6 +189,37 @@ export default {
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### 异步切换
|
||||
|
||||
通过 `before-change` 属性可以在切换标签前执行特定的逻辑。
|
||||
|
||||
```html
|
||||
<van-tabs :before-change="beforeChange">
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
beforeChange(index) {
|
||||
// 返回 false 表示阻止此次切换
|
||||
if (index === 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 返回 Promise 来执行异步逻辑
|
||||
return new Promise((resolve) => {
|
||||
// 在 resolve 函数中返回 true 或 false
|
||||
resolve(index !== 3);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Tabs Props
|
||||
@ -209,10 +240,11 @@ export default {
|
||||
| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` |
|
||||
| lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
|
||||
| scrollspy `v2.3.0` | 是否开启滚动导航 | _boolean_ | `false` |
|
||||
| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `0` |
|
||||
| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
|
||||
| swipe-threshold | 滚动阈值，标签数量超过阈值时开始横向滚动 | _number \| string_ | `4` |
|
||||
| title-active-color | 标题选中态颜色 | _string_ | - |
|
||||
| title-inactive-color | 标题默认态颜色 | _string_ | - |
|
||||
| before-change `v2.9.3` | 切换标签前的回调函数，返回 `false` 可阻止切换，支持返回 Promise | _(name) => boolean \| Promise_ | - |
|
||||
|
||||
### Tab Props
|
||||
|
||||
@ -243,9 +275,10 @@ export default {
|
||||
|
||||
通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | -------------------------------------------- | ---- | ------ |
|
||||
| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void |
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | void |
|
||||
| scrollTo `v2.9.3` | 滚动到指定的标签页，在滚动导航模式下可用 | name: 标识符 | void |
|
||||
|
||||
### Tabs Slots
|
||||
|
||||
|
||||
@ -93,6 +93,14 @@
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('beforeChange')">
|
||||
<van-tabs :before-change="beforeChange">
|
||||
<van-tab :title="t('tab') + index" v-for="index in 4" :key="index">
|
||||
{{ t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -112,6 +120,7 @@ export default {
|
||||
title10: '滚动导航',
|
||||
disabled: ' 已被禁用',
|
||||
matchByName: '通过名称匹配',
|
||||
beforeChange: '异步切换',
|
||||
},
|
||||
'en-US': {
|
||||
tab: 'Tab ',
|
||||
@ -127,6 +136,7 @@ export default {
|
||||
title10: 'Scrollspy',
|
||||
disabled: ' is disabled',
|
||||
matchByName: 'Match By Name',
|
||||
beforeChange: 'Before Change',
|
||||
},
|
||||
},
|
||||
|
||||
@ -146,6 +156,16 @@ export default {
|
||||
onClick(index, title) {
|
||||
this.$toast(title);
|
||||
},
|
||||
|
||||
beforeChange(name) {
|
||||
if (name === 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
resolve(name !== 3);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -318,5 +318,32 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div role="tabpanel" class="van-tab__pane" style="">
|
||||
内容 1
|
||||
</div>
|
||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -229,7 +229,7 @@ exports[`render nav-left & nav-right slot 1`] = `
|
||||
|
||||
exports[`rendered event 1`] = `<div role="tabpanel" class="van-tab__pane" style="">Text</div>`;
|
||||
|
||||
exports[`scrollspy 1`] = `
|
||||
exports[`scrollspy prop 1`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div>
|
||||
<div class="van-sticky">
|
||||
@ -251,7 +251,7 @@ exports[`scrollspy 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`scrollspy 2`] = `
|
||||
exports[`scrollspy prop 2`] = `
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div>
|
||||
<div class="van-sticky">
|
||||
|
||||
@ -258,7 +258,7 @@ test('info prop', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('scrollspy', async () => {
|
||||
test('scrollspy prop', async () => {
|
||||
const onChange = jest.fn();
|
||||
window.scrollTo = jest.fn();
|
||||
|
||||
@ -288,6 +288,30 @@ test('scrollspy', async () => {
|
||||
expect(onChange).toHaveBeenCalledWith('c', 'title3');
|
||||
});
|
||||
|
||||
test('scrollTo method', async () => {
|
||||
const onChange = jest.fn();
|
||||
window.scrollTo = jest.fn();
|
||||
|
||||
mount({
|
||||
template: `
|
||||
<van-tabs scrollspy sticky @change="onChange" ref="root">
|
||||
<van-tab name="a" title="title1">Text</van-tab>
|
||||
<van-tab name="b" title="title2">Text</van-tab>
|
||||
<van-tab name="c" title="title3">Text</van-tab>
|
||||
</van-tabs>
|
||||
`,
|
||||
methods: {
|
||||
onChange,
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.root.scrollTo('b');
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(onChange).toHaveBeenCalledWith('b', 'title2');
|
||||
});
|
||||
|
||||
test('rendered event', async () => {
|
||||
const onRendered = jest.fn();
|
||||
|
||||
@ -338,3 +362,51 @@ test('should not trigger rendered event when disable lazy-render', async () => {
|
||||
await later();
|
||||
expect(onRendered).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('before-change prop', async () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-tabs @change="onChange" :before-change="beforeChange">
|
||||
<van-tab title="title1">Text</van-tab>
|
||||
<van-tab title="title2">Text</van-tab>
|
||||
<van-tab title="title3">Text</van-tab>
|
||||
<van-tab title="title4">Text</van-tab>
|
||||
<van-tab title="title5">Text</van-tab>
|
||||
</van-tabs>
|
||||
`,
|
||||
methods: {
|
||||
onChange,
|
||||
beforeChange(name) {
|
||||
switch (name) {
|
||||
case 1:
|
||||
return false;
|
||||
case 2:
|
||||
return true;
|
||||
case 3:
|
||||
return Promise.resolve(false);
|
||||
case 4:
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const tabs = wrapper.findAll('.van-tab');
|
||||
tabs.at(1).trigger('click');
|
||||
expect(onChange).toHaveBeenCalledTimes(0);
|
||||
|
||||
tabs.at(2).trigger('click');
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
expect(onChange).toHaveBeenLastCalledWith(2, 'title3');
|
||||
|
||||
tabs.at(3).trigger('click');
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
|
||||
tabs.at(4).trigger('click');
|
||||
await later();
|
||||
expect(onChange).toHaveBeenCalledTimes(2);
|
||||
expect(onChange).toHaveBeenLastCalledWith(4, 'title5');
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace, isDef, addUnit } from '../utils';
|
||||
import { createNamespace, isDef, addUnit, isPromise } from '../utils';
|
||||
import { scrollLeftTo, scrollTopTo } from './utils';
|
||||
import { route } from '../utils/router';
|
||||
import { isHidden } from '../utils/dom/style';
|
||||
@ -53,6 +53,7 @@ export default createComponent({
|
||||
background: String,
|
||||
lineWidth: [Number, String],
|
||||
lineHeight: [Number, String],
|
||||
beforeChange: Function,
|
||||
titleActiveColor: String,
|
||||
titleInactiveColor: String,
|
||||
type: {
|
||||
@ -266,14 +267,34 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
callBeforeChange(name, done) {
|
||||
if (this.beforeChange) {
|
||||
const returnVal = this.beforeChange(name);
|
||||
|
||||
if (isPromise(returnVal)) {
|
||||
returnVal.then((value) => {
|
||||
if (value) {
|
||||
done();
|
||||
}
|
||||
});
|
||||
} else if (returnVal) {
|
||||
done();
|
||||
}
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
|
||||
// emit event when clicked
|
||||
onClick(item, index) {
|
||||
const { title, disabled, computedName } = this.children[index];
|
||||
if (disabled) {
|
||||
this.$emit('disabled', computedName, title);
|
||||
} else {
|
||||
this.setCurrentIndex(index);
|
||||
this.scrollToCurrentContent();
|
||||
this.callBeforeChange(computedName, () => {
|
||||
this.setCurrentIndex(index);
|
||||
this.scrollToCurrentContent();
|
||||
});
|
||||
this.$emit('click', computedName, title);
|
||||
route(item.$router, item);
|
||||
}
|
||||
@ -299,7 +320,15 @@ export default createComponent({
|
||||
this.$emit('scroll', params);
|
||||
},
|
||||
|
||||
scrollToCurrentContent() {
|
||||
// @exposed-api
|
||||
scrollTo(name) {
|
||||
this.$nextTick(() => {
|
||||
this.setCurrentIndexByName(name);
|
||||
this.scrollToCurrentContent(true);
|
||||
});
|
||||
},
|
||||
|
||||
scrollToCurrentContent(immediate = false) {
|
||||
if (this.scrollspy) {
|
||||
const target = this.children[this.currentIndex];
|
||||
const el = target?.$el;
|
||||
@ -308,7 +337,7 @@ export default createComponent({
|
||||
const to = getElementTop(el, this.scroller) - this.scrollOffset;
|
||||
|
||||
this.lockScroll = true;
|
||||
scrollTopTo(this.scroller, to, +this.duration, () => {
|
||||
scrollTopTo(this.scroller, to, immediate ? 0 : +this.duration, () => {
|
||||
this.lockScroll = false;
|
||||
});
|
||||
}
|
||||
|
||||
@ -14,7 +14,6 @@ Vue.use(Tag);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-tag>Tag</van-tag>
|
||||
<van-tag type="primary">Tag</van-tag>
|
||||
<van-tag type="success">Tag</van-tag>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
@ -24,7 +23,6 @@ Vue.use(Tag);
|
||||
### Round style
|
||||
|
||||
```html
|
||||
<van-tag round>Tag</van-tag>
|
||||
<van-tag round type="primary">Tag</van-tag>
|
||||
<van-tag round type="success">Tag</van-tag>
|
||||
<van-tag round type="danger">Tag</van-tag>
|
||||
@ -34,7 +32,6 @@ Vue.use(Tag);
|
||||
### Mark style
|
||||
|
||||
```html
|
||||
<van-tag mark>Tag</van-tag>
|
||||
<van-tag mark type="primary">Tag</van-tag>
|
||||
<van-tag mark type="success">Tag</van-tag>
|
||||
<van-tag mark type="danger">Tag</van-tag>
|
||||
@ -44,7 +41,6 @@ Vue.use(Tag);
|
||||
### Plain style
|
||||
|
||||
```html
|
||||
<van-tag plain>Tag</van-tag>
|
||||
<van-tag plain type="primary">Tag</van-tag>
|
||||
<van-tag plain type="success">Tag</van-tag>
|
||||
<van-tag plain type="danger">Tag</van-tag>
|
||||
@ -55,7 +51,6 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag color="#f2826a">Tag</van-tag>
|
||||
<van-tag color="#f2826a" plain>Tag</van-tag>
|
||||
<van-tag color="#7232dd">Tag</van-tag>
|
||||
<van-tag color="#7232dd" plain>Tag</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">Tag</van-tag>
|
||||
|
||||
@ -13,10 +13,9 @@ Vue.use(Tag);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`type`属性控制标签颜色，默认为灰色
|
||||
通过 `type` 属性控制标签颜色。
|
||||
|
||||
```html
|
||||
<van-tag>标签</van-tag>
|
||||
<van-tag type="primary">标签</van-tag>
|
||||
<van-tag type="success">标签</van-tag>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
@ -25,10 +24,9 @@ Vue.use(Tag);
|
||||
|
||||
### 圆角样式
|
||||
|
||||
通过`round`设置为圆角样式
|
||||
通过 `round` 设置为圆角样式。
|
||||
|
||||
```html
|
||||
<van-tag round>标签</van-tag>
|
||||
<van-tag round type="primary">标签</van-tag>
|
||||
<van-tag round type="success">标签</van-tag>
|
||||
<van-tag round type="danger">标签</van-tag>
|
||||
@ -37,10 +35,9 @@ Vue.use(Tag);
|
||||
|
||||
### 标记样式
|
||||
|
||||
通过`mark`设置为标记样式(半圆角)
|
||||
通过 `mark` 设置为标记样式(半圆角)。
|
||||
|
||||
```html
|
||||
<van-tag mark>标签</van-tag>
|
||||
<van-tag mark type="primary">标签</van-tag>
|
||||
<van-tag mark type="success">标签</van-tag>
|
||||
<van-tag mark type="danger">标签</van-tag>
|
||||
@ -49,10 +46,9 @@ Vue.use(Tag);
|
||||
|
||||
### 空心样式
|
||||
|
||||
设置`plain`属性设置为空心样式
|
||||
设置 `plain` 属性设置为空心样式。
|
||||
|
||||
```html
|
||||
<van-tag plain>标签</van-tag>
|
||||
<van-tag plain type="primary">标签</van-tag>
|
||||
<van-tag plain type="success">标签</van-tag>
|
||||
<van-tag plain type="danger">标签</van-tag>
|
||||
@ -63,7 +59,6 @@ Vue.use(Tag);
|
||||
|
||||
```html
|
||||
<van-tag color="#f2826a">标签</van-tag>
|
||||
<van-tag color="#f2826a" plain>标签</van-tag>
|
||||
<van-tag color="#7232dd">标签</van-tag>
|
||||
<van-tag color="#7232dd" plain>标签</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
|
||||
@ -79,7 +74,7 @@ Vue.use(Tag);
|
||||
|
||||
### 可关闭标签
|
||||
|
||||
添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑
|
||||
添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
|
||||
|
||||
```html
|
||||
<van-tag
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-tag>{{ t('tag') }}</van-tag>
|
||||
<van-tag type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag type="danger">{{ t('tag') }}</van-tag>
|
||||
@ -9,7 +8,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('round')">
|
||||
<van-tag round>{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag round type="danger">{{ t('tag') }}</van-tag>
|
||||
@ -17,7 +15,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('mark')">
|
||||
<van-tag mark>{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag mark type="danger">{{ t('tag') }}</van-tag>
|
||||
@ -25,7 +22,6 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('plain')">
|
||||
<van-tag plain>{{ t('tag') }}</van-tag>
|
||||
<van-tag plain type="primary">{{ t('tag') }}</van-tag>
|
||||
<van-tag plain type="success">{{ t('tag') }}</van-tag>
|
||||
<van-tag plain type="danger">{{ t('tag') }}</van-tag>
|
||||
@ -34,7 +30,6 @@
|
||||
|
||||
<demo-block :title="t('customColor')">
|
||||
<van-tag color="#f2826a">{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#f2826a" plain>{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#7232dd">{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
|
||||
<van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { BORDER_SURROUND } from '../utils/constant';
|
||||
|
||||
// Components
|
||||
import Icon from '../icon';
|
||||
@ -56,7 +55,7 @@ export default createComponent({
|
||||
<span
|
||||
key="content"
|
||||
style={style}
|
||||
class={[bem([classes, type]), { [BORDER_SURROUND]: plain }]}
|
||||
class={bem([classes, type])}
|
||||
>
|
||||
{slots.default?.()}
|
||||
{CloseIcon}
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-tag {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: @tag-padding;
|
||||
color: @tag-text-color;
|
||||
font-size: @tag-font-size;
|
||||
line-height: normal;
|
||||
line-height: @tag-line-height;
|
||||
border-radius: @tag-border-radius;
|
||||
|
||||
&::after {
|
||||
border-color: currentColor;
|
||||
border-radius: @tag-border-radius * 2;
|
||||
}
|
||||
|
||||
&--default {
|
||||
background-color: @tag-default-color;
|
||||
|
||||
@ -56,30 +52,42 @@
|
||||
|
||||
&--plain {
|
||||
background-color: @tag-plain-background-color;
|
||||
}
|
||||
|
||||
&--mark {
|
||||
padding-right: 0.7em;
|
||||
|
||||
&,
|
||||
&::after {
|
||||
border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
&,
|
||||
&::after {
|
||||
border-radius: @tag-round-border-radius;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--medium {
|
||||
font-size: @tag-medium-font-size;
|
||||
padding: @tag-medium-padding;
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding: @tag-large-padding;
|
||||
font-size: @tag-large-font-size;
|
||||
border-radius: @tag-large-border-radius;
|
||||
}
|
||||
|
||||
&--mark {
|
||||
border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
width: 2px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&--round {
|
||||
border-radius: @tag-round-border-radius;
|
||||
}
|
||||
|
||||
&__close {
|
||||
|
||||
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