Merge branch 'dev' into next
This commit is contained in:
chenjiahan
@@ -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 {
|
||||
|
||||
+2
-2
@@ -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
|
||||
|
||||
+20
-20
@@ -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_ | - |
|
||||
|
||||
+36
-36
@@ -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;
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
+13
-1
@@ -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
|
||||
|
||||
+22
-10
@@ -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>
|
||||
|
||||
+2
-2
@@ -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` |
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
+1
-1
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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');
|
||||
|
||||
+1
-1
@@ -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({
|
||||
|
||||
+47
-40
@@ -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) {
|
||||
|
||||
+36
-6
@@ -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
|
||||
|
||||
|
||||
+48
-15
@@ -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');
|
||||
});
|
||||
|
||||
+34
-5
@@ -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>
|
||||
|
||||
+5
-10
@@ -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
-2
@@ -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}
|
||||
|
||||
+29
-21
@@ -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 {
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
|
||||
<div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
|
||||
<div><span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--plain van-tag--primary">标签</span> <span class="van-tag van-tag--plain van-tag--success">标签</span> <span class="van-tag van-tag--plain van-tag--danger">标签</span> <span class="van-tag van-tag--plain van-tag--warning">标签</span></div>
|
||||
<div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
|
||||
<div><span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--medium van-tag--success">标签</span> <span class="van-tag van-tag--large van-tag--success">标签</span></div>
|
||||
<div><span class="van-tag van-tag--medium van-tag--primary" name="van-fade">
|
||||
标签
|
||||
|
||||
@@ -203,6 +203,7 @@ Use `disabled` prop to disable uploader.
|
||||
| preview-size | Size of preview image | _number \| string_ | `80px` |
|
||||
| preview-image `v2.1.5` | Whether to show image preview | _boolean_ | `true` |
|
||||
| preview-full-image | Whethe to show full screen image preview when click image | _boolean_ | `true` |
|
||||
| preview-options `v2.9.3` | Options of full screen image preview，see [ImagePreview](#/en-US/image-preview) | _object_ | - |
|
||||
| multiple | Whether to enable multiple selection pictures | _boolean_ | `false` |
|
||||
| disabled | Whether to disabled the upload | _boolean_ | `false` |
|
||||
| deletable `v2.2.12` | Whether to show delete icon | _boolean_ | `true` |
|
||||
|
||||
@@ -227,6 +227,7 @@ export default {
|
||||
| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | _number \| string_ | `80px` |
|
||||
| preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` |
|
||||
| preview-full-image `v2.1.5` | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` |
|
||||
| preview-options `v2.9.3` | 全屏图片预览的配置项，可选值见 [ImagePreview](#/zh-CN/image-preview) | _object_ | - |
|
||||
| multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用文件上传 | _boolean_ | `false` |
|
||||
| deletable `v2.2.12` | 是否展示删除按钮 | _boolean_ | `true` |
|
||||
|
||||
@@ -30,6 +30,7 @@ export default createComponent({
|
||||
beforeRead: Function,
|
||||
beforeDelete: Function,
|
||||
previewSize: [Number, String],
|
||||
previewOptions: Object,
|
||||
name: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
@@ -256,11 +257,11 @@ export default createComponent({
|
||||
|
||||
this.imagePreview = ImagePreview({
|
||||
images: imageContents,
|
||||
closeOnPopstate: true,
|
||||
startPosition: imageFiles.indexOf(item),
|
||||
onClose: () => {
|
||||
this.$emit('close-preview');
|
||||
},
|
||||
...this.previewOptions,
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@@ -406,6 +406,23 @@ test('click to preview image', async () => {
|
||||
expect(images.length).toEqual(1);
|
||||
});
|
||||
|
||||
test('preview-options prop', async () => {
|
||||
const wrapper = mount(Uploader, {
|
||||
propsData: {
|
||||
fileList: [{ url: IMAGE }],
|
||||
previewOptions: {
|
||||
closeable: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-image').trigger('click');
|
||||
await later();
|
||||
|
||||
const closeIcon = document.querySelectorAll('.van-image-preview__close-icon');
|
||||
expect(closeIcon.length).toEqual(1);
|
||||
});
|
||||
|
||||
test('closeImagePreview method', () => {
|
||||
const close = jest.fn();
|
||||
const wrapper = mount(Uploader, {
|
||||
|
||||
@@ -40,7 +40,10 @@ export function getScroller(el: HTMLElement, root: ScrollElement = window) {
|
||||
}
|
||||
|
||||
export function getScrollTop(el: ScrollElement): number {
|
||||
return 'scrollTop' in el ? el.scrollTop : el.pageYOffset;
|
||||
const top = 'scrollTop' in el ? el.scrollTop : el.pageYOffset;
|
||||
|
||||
// iOS scroll bounce cause minus scrollTop
|
||||
return Math.max(top, 0);
|
||||
}
|
||||
|
||||
export function setScrollTop(el: ScrollElement, value: number) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { isDef } from '..';
|
||||
import { isDef, inBrowser } from '..';
|
||||
import { isNumeric } from '../validate/number';
|
||||
|
||||
export function addUnit(value?: string | number): string | undefined {
|
||||
@@ -30,13 +30,24 @@ function convertRem(value: string) {
|
||||
return +value * getRootFontSize();
|
||||
}
|
||||
|
||||
function convertVw(value: string) {
|
||||
value = value.replace(/vw/g, '');
|
||||
return (+value * window.innerWidth) / 100;
|
||||
}
|
||||
|
||||
export function unitToPx(value: string | number): number {
|
||||
if (typeof value === 'number') {
|
||||
return value;
|
||||
}
|
||||
|
||||
if (value.indexOf('rem') !== -1) {
|
||||
return convertRem(value);
|
||||
if (inBrowser) {
|
||||
if (value.indexOf('rem') !== -1) {
|
||||
return convertRem(value);
|
||||
}
|
||||
|
||||
if (value.indexOf('vw') !== -1) {
|
||||
return convertVw(value);
|
||||
}
|
||||
}
|
||||
|
||||
return parseFloat(value);
|
||||
|
||||
Reference in New Issue
Block a user