Merge branch 'dev' into next
This commit is contained in:
chenjiahan
+40
-13
@@ -16,6 +16,7 @@ Vue.use(ActionSheet);
|
||||
Use `actions` prop to set options of action-sheet.
|
||||
|
||||
```html
|
||||
<van-cell is-link title="Basic Usage" @click="show = true" />
|
||||
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
||||
```
|
||||
|
||||
@@ -27,9 +28,9 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option' },
|
||||
{ name: 'Option', subname: 'Description' },
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3' },
|
||||
],
|
||||
};
|
||||
},
|
||||
@@ -49,6 +50,7 @@ export default {
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
close-on-click-action
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
@@ -60,11 +62,15 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3' },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.show = false;
|
||||
Toast('cancel');
|
||||
},
|
||||
},
|
||||
@@ -73,18 +79,13 @@ export default {
|
||||
|
||||
### Show Description
|
||||
|
||||
```html
|
||||
<van-action-sheet v-model="show" :actions="actions" description="Description" />
|
||||
```
|
||||
|
||||
### Option Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
@cancel="onCancel"
|
||||
description="Description"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -94,9 +95,35 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: 'Option 1' },
|
||||
{ name: 'Option 2' },
|
||||
{ name: 'Option 3', subname: 'Description' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Option Status
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="Cancel"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Colored Option', color: '#07c160' },
|
||||
{ name: 'Disabled Option', disabled: true },
|
||||
{ name: 'Loading Option', loading: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -17,9 +17,10 @@ Vue.use(ActionSheet);
|
||||
|
||||
### 基础用法
|
||||
|
||||
动作面板通过`actions`属性来定义选项，数组的每一项是一个对象，对象格式见文档下方表格。
|
||||
动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-cell is-link title="基础用法" @click="show = true" />
|
||||
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
||||
```
|
||||
|
||||
@@ -30,11 +31,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项' },
|
||||
{ name: '选项' },
|
||||
{ name: '选项', subname: '描述信息' },
|
||||
],
|
||||
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -50,13 +47,14 @@ export default {
|
||||
|
||||
### 展示取消按钮
|
||||
|
||||
设置`cancel-text`属性后，会在底部展示取消按钮，点击后关闭当前面板
|
||||
设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
close-on-click-action
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
```
|
||||
@@ -68,12 +66,12 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.show = false;
|
||||
Toast('cancel');
|
||||
Toast('取消');
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -81,26 +79,15 @@ export default {
|
||||
|
||||
### 展示描述信息
|
||||
|
||||
设置`description`属性后，会在选项上方显示描述信息
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
description="这是一段描述信息"
|
||||
/>
|
||||
```
|
||||
|
||||
### 选项状态
|
||||
|
||||
可以将选项设置为加载状态或禁用状态，或者通过`color`设置选项颜色
|
||||
通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
@cancel="onCancel"
|
||||
description="这是一段描述信息"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -110,9 +97,37 @@ export default {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '选项', color: '#07c160' },
|
||||
{ loading: true },
|
||||
{ name: '选项一' },
|
||||
{ name: '选项二' },
|
||||
{ name: '选项三', subname: '描述信息' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选项状态
|
||||
|
||||
可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色
|
||||
|
||||
```html
|
||||
<van-action-sheet
|
||||
v-model="show"
|
||||
:actions="actions"
|
||||
cancel-text="取消"
|
||||
close-on-click-action
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '着色选项', color: '#07c160' },
|
||||
{ name: '禁用选项', disabled: true },
|
||||
{ name: '加载选项', loading: true },
|
||||
],
|
||||
};
|
||||
},
|
||||
@@ -160,7 +175,7 @@ export default {
|
||||
|
||||
### Action 数据结构
|
||||
|
||||
`actions`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --------- | ------------------------ | --------- |
|
||||
|
||||
@@ -28,13 +28,6 @@
|
||||
@select="onSelect"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.status"
|
||||
close-on-click-action
|
||||
:actions="statusActions"
|
||||
:cancel-text="t('cancel')"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.cancel"
|
||||
:actions="simpleActions"
|
||||
@@ -45,11 +38,19 @@
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.description"
|
||||
:actions="simpleActions"
|
||||
:actions="actionsWithDescription"
|
||||
close-on-click-action
|
||||
:cancel-text="t('cancel')"
|
||||
:description="t('description')"
|
||||
/>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="show.status"
|
||||
close-on-click-action
|
||||
:actions="statusActions"
|
||||
:cancel-text="t('cancel')"
|
||||
/>
|
||||
|
||||
<van-action-sheet v-model="show.title" :title="t('title')">
|
||||
<div class="demo-action-sheet-content">{{ t('content') }}</div>
|
||||
</van-action-sheet>
|
||||
@@ -62,22 +63,30 @@ import { GREEN } from '../../utils/constant';
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
subname: '副文本',
|
||||
option1: '选项一',
|
||||
option2: '选项二',
|
||||
option3: '选项三',
|
||||
subname: '描述信息',
|
||||
showCancel: '展示取消按钮',
|
||||
buttonText: '弹出菜单',
|
||||
customPanel: '自定义面板',
|
||||
description: '这是一段描述信息',
|
||||
optionStatus: '选项状态',
|
||||
coloredOption: '着色选项',
|
||||
disabledOption: '禁用选项',
|
||||
showDescription: '展示描述信息',
|
||||
},
|
||||
'en-US': {
|
||||
subname: 'Subname',
|
||||
option1: 'Option 1',
|
||||
option2: 'Option 2',
|
||||
option3: 'Option 3',
|
||||
subname: 'Description',
|
||||
showCancel: 'Show Cancel Button',
|
||||
buttonText: 'Show ActionSheet',
|
||||
customPanel: 'Custom Panel',
|
||||
description: 'Description',
|
||||
optionStatus: 'Option Status',
|
||||
coloredOption: 'Colored Option',
|
||||
disabledOption: 'Disabled Option',
|
||||
showDescription: 'Show Description',
|
||||
},
|
||||
@@ -98,17 +107,25 @@ export default {
|
||||
computed: {
|
||||
simpleActions() {
|
||||
return [
|
||||
{ name: this.t('option') },
|
||||
{ name: this.t('option') },
|
||||
{ name: this.t('option'), subname: this.t('subname') },
|
||||
{ name: this.t('option1') },
|
||||
{ name: this.t('option2') },
|
||||
{ name: this.t('option3') },
|
||||
];
|
||||
},
|
||||
|
||||
actionsWithDescription() {
|
||||
return [
|
||||
{ name: this.t('option1') },
|
||||
{ name: this.t('option2') },
|
||||
{ name: this.t('option3'), subname: this.t('subname') },
|
||||
];
|
||||
},
|
||||
|
||||
statusActions() {
|
||||
return [
|
||||
{ name: this.t('option'), color: GREEN },
|
||||
{ loading: true },
|
||||
{ name: this.t('coloredOption'), color: GREEN },
|
||||
{ name: this.t('disabledOption'), disabled: true },
|
||||
{ loading: true },
|
||||
];
|
||||
},
|
||||
},
|
||||
@@ -120,7 +137,7 @@ export default {
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
this.$toast('cancel');
|
||||
this.$toast(this.t('cancel'));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import '../style/var';
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
.van-action-sheet {
|
||||
max-height: @action-sheet-max-height;
|
||||
@@ -8,10 +9,10 @@
|
||||
&__cancel {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @action-sheet-item-height;
|
||||
padding: 0;
|
||||
font-size: @action-sheet-item-font-size;
|
||||
line-height: @action-sheet-item-height;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
background-color: @action-sheet-item-background;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -22,8 +23,6 @@
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: @action-sheet-item-height;
|
||||
|
||||
&--loading,
|
||||
&--disabled {
|
||||
color: @action-sheet-item-disabled-text-color;
|
||||
@@ -48,11 +47,10 @@
|
||||
font-size: @action-sheet-subname-font-size;
|
||||
}
|
||||
|
||||
&__cancel::before {
|
||||
&__gap {
|
||||
display: block;
|
||||
height: @action-sheet-cancel-padding-top;
|
||||
background-color: @action-sheet-cancel-padding-color;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&__header {
|
||||
@@ -63,11 +61,16 @@
|
||||
}
|
||||
|
||||
&__description {
|
||||
position: relative;
|
||||
padding: @padding-md;
|
||||
color: @action-sheet-description-color;
|
||||
font-size: @action-sheet-description-font-size;
|
||||
line-height: @action-sheet-description-line-height;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
import { BORDER_TOP } from '../utils/constant';
|
||||
|
||||
// Mixins
|
||||
import { popupMixinProps } from '../mixins/popup';
|
||||
@@ -110,7 +109,7 @@ function ActionSheet(
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
class={[bem('item', { disabled, loading }), item.className, BORDER_TOP]}
|
||||
class={[bem('item', { disabled, loading }), item.className]}
|
||||
style={{ color: item.color }}
|
||||
onClick={onClickOption}
|
||||
>
|
||||
@@ -121,11 +120,12 @@ function ActionSheet(
|
||||
|
||||
function CancelText() {
|
||||
if (cancelText) {
|
||||
return (
|
||||
return [
|
||||
<div class={bem('gap')} />,
|
||||
<button type="button" class={bem('cancel')} onClick={onCancel}>
|
||||
{cancelText}
|
||||
</button>
|
||||
);
|
||||
</button>,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`callback events 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading van-hairline--top">
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>
|
||||
</button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`close-icon prop 1`] = `
|
||||
@@ -13,15 +15,19 @@ exports[`close-icon prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
|
||||
exports[`description prop 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
<div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button>
|
||||
<div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>`;
|
||||
exports[`disable lazy-render 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
|
||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render title and default slot 1`] = `
|
||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
||||
@@ -31,4 +37,4 @@ exports[`render title and default slot 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>`;
|
||||
|
||||
@@ -51,7 +51,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button><button class="van-button van-button--default van-button--normal van-button--block van-button--round"><span class="van-button__text">删除</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button><button class="van-button van-button--default van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">删除</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,7 +35,9 @@ exports[`create a AddressEdit 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -88,7 +90,9 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -141,7 +145,9 @@ exports[`set-default 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -194,7 +200,9 @@ exports[`show area component 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -247,7 +255,9 @@ exports[`show area component 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -286,6 +296,8 @@ exports[`valid area placeholder confirm 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -38,6 +38,7 @@ export default {
|
||||
name: 'John Snow',
|
||||
tel: '13000000000',
|
||||
address: 'Somewhere',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
|
||||
@@ -38,6 +38,7 @@ export default {
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
|
||||
@@ -12,12 +12,15 @@
|
||||
z-index: @address-list-add-button-z-index;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 5px @padding-md;
|
||||
padding: 0 @padding-md;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
background-color: @white;
|
||||
}
|
||||
|
||||
&__add {
|
||||
height: 40px;
|
||||
margin: 5px 0;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
|
||||
@@ -40,7 +40,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新增地址</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,6 +22,8 @@ exports[`unswitchable 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
|
||||
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新增地址</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
+4
-4
@@ -20,7 +20,7 @@ Vue.use(Area);
|
||||
To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
<van-area title="Title" :area-list="areaList" />
|
||||
```
|
||||
|
||||
### Initial Value
|
||||
@@ -28,7 +28,7 @@ To initailize `Area` component, `area-list` property is required. Data structure
|
||||
To have a selected value，simply pass the `code` of target area to `value` property.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101" />
|
||||
<van-area title="Title" :area-list="areaList" value="110101" />
|
||||
```
|
||||
|
||||
### Columns Number
|
||||
@@ -36,7 +36,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="Title" />
|
||||
<van-area title="Title" :area-list="areaList" :columns-num="2" />
|
||||
```
|
||||
|
||||
### Columns Placeholder
|
||||
@@ -45,9 +45,9 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
|
||||
```html
|
||||
<van-area
|
||||
title="Title"
|
||||
:area-list="areaList"
|
||||
:columns-placeholder="['Choose', 'Choose', 'Choose']"
|
||||
title="Title"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ Vue.use(Area);
|
||||
要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
<van-area title="标题" :area-list="areaList" />
|
||||
```
|
||||
|
||||
### 选中省市区
|
||||
@@ -28,7 +28,7 @@ Vue.use(Area);
|
||||
如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101" />
|
||||
<van-area title="标题" :area-list="areaList" value="110101" />
|
||||
```
|
||||
|
||||
### 配置显示列
|
||||
@@ -36,7 +36,7 @@ Vue.use(Area);
|
||||
可以通过`columns-num`属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为`2`，则只会显示省市选择
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="标题" />
|
||||
<van-area title="标题" :area-list="areaList" :columns-num="2" />
|
||||
```
|
||||
|
||||
### 配置列占位提示文字
|
||||
@@ -45,9 +45,9 @@ Vue.use(Area);
|
||||
|
||||
```html
|
||||
<van-area
|
||||
title="标题"
|
||||
:area-list="areaList"
|
||||
:columns-placeholder="['请选择', '请选择', '请选择']"
|
||||
title="标题"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-area :area-list="t('areaList')" />
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<van-area :area-list="t('areaList')" :value="value" />
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
:columns-num="2"
|
||||
:title="t('title')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title4')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
:columns-placeholder="t('columnsPlaceholder')"
|
||||
:title="t('title')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
|
||||
+19
-7
@@ -197,17 +197,29 @@ export default createComponent({
|
||||
this.$emit('confirm', values, index);
|
||||
},
|
||||
|
||||
getDefaultCode() {
|
||||
if (this.columnsPlaceholder.length) {
|
||||
return PLACEHOLDER_CODE;
|
||||
}
|
||||
|
||||
const countyCodes = Object.keys(this.county);
|
||||
if (countyCodes[0]) {
|
||||
return countyCodes[0];
|
||||
}
|
||||
|
||||
const cityCodes = Object.keys(this.city);
|
||||
if (cityCodes[0]) {
|
||||
return cityCodes[0];
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
|
||||
setValues() {
|
||||
let { code } = this;
|
||||
|
||||
if (!code) {
|
||||
if (this.columnsPlaceholder.length) {
|
||||
code = PLACEHOLDER_CODE;
|
||||
} else if (Object.keys(this.county)[0]) {
|
||||
code = Object.keys(this.county)[0];
|
||||
} else {
|
||||
code = '';
|
||||
}
|
||||
code = this.getDefaultCode();
|
||||
}
|
||||
|
||||
const { picker } = this.$refs;
|
||||
|
||||
@@ -4,208 +4,177 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">丰台区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">石景山区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海淀区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">门头沟区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">房山区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">通州区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">顺义区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">昌平区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">大兴区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">怀柔区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">平谷区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">密云区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">延庆区</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">绍兴市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">金华市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">衢州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">舟山市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台州市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">丽水市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">鹿城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">龙湾区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">洞头区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">永嘉县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">平阳县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">苍南县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">文成县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">泰顺县</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">瑞安市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">乐清市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">朝阳区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">丰台区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">石景山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海淀区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">门头沟区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">房山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">通州区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">顺义区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">昌平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">大兴区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">怀柔区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">平谷区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">密云区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">延庆区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -216,56 +185,453 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">请选择</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">绍兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">金华市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">衢州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">舟山市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">丽水市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">鹿城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">龙湾区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">瓯海区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">洞头区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">永嘉县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">平阳县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">苍南县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">文成县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">泰顺县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">瑞安市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">乐清市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
|
||||
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">请选择</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
|
||||
@@ -2,25 +2,37 @@
|
||||
|
||||
exports[`change option 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -32,25 +44,37 @@ exports[`change option 1`] = `
|
||||
|
||||
exports[`change option 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">和平区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -62,25 +86,37 @@ exports[`change option 2`] = `
|
||||
|
||||
exports[`change option 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -92,19 +128,27 @@ exports[`change option 3`] = `
|
||||
|
||||
exports[`columns-num prop 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -116,16 +160,16 @@ exports[`columns-num prop 1`] = `
|
||||
|
||||
exports[`columns-top、columns-bottom slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->Top<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
@@ -136,24 +180,34 @@ exports[`columns-top、columns-bottom slot 1`] = `
|
||||
|
||||
exports[`reset method 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">蓟县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">蓟县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -165,25 +219,37 @@ exports[`reset method 1`] = `
|
||||
|
||||
exports[`reset method 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -195,17 +261,17 @@ exports[`reset method 2`] = `
|
||||
|
||||
exports[`title slot 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom Title<button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom Title<button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></ul>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
@@ -216,25 +282,37 @@ exports[`title slot 1`] = `
|
||||
|
||||
exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -246,25 +324,37 @@ exports[`watch areaList & code 1`] = `
|
||||
|
||||
exports[`watch areaList & code 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -276,25 +366,37 @@ exports[`watch areaList & code 2`] = `
|
||||
|
||||
exports[`watch areaList & code 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
|
||||
+9
-10
@@ -14,7 +14,6 @@
|
||||
cursor: pointer;
|
||||
transition: opacity @animation-duration-fast;
|
||||
-webkit-appearance: none;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@@ -95,7 +94,6 @@
|
||||
&--large {
|
||||
width: 100%;
|
||||
height: @button-large-height;
|
||||
line-height: @button-large-line-height;
|
||||
}
|
||||
|
||||
&--normal {
|
||||
@@ -108,21 +106,16 @@
|
||||
height: @button-small-height;
|
||||
padding: 0 @padding-xs;
|
||||
font-size: @button-small-font-size;
|
||||
line-height: @button-small-line-height;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
display: inline-block;
|
||||
min-width: @button-mini-min-width;
|
||||
height: @button-mini-height;
|
||||
font-size: @button-mini-font-size;
|
||||
line-height: @button-mini-line-height;
|
||||
|
||||
& + .van-button--mini {
|
||||
margin-left: @padding-base;
|
||||
@@ -151,18 +144,24 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// align-items are ignored when flex container is a button in legacy safari
|
||||
// see: https://bugs.webkit.org/show_bug.cgi?id=169700
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
min-width: 1em;
|
||||
font-size: 1.2em;
|
||||
line-height: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__icon + &__text,
|
||||
&__loading + &__text {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&--hairline {
|
||||
|
||||
@@ -149,7 +149,7 @@ function Button(
|
||||
onTouchstart={onTouchstart}
|
||||
{...inherit(ctx)}
|
||||
>
|
||||
{Content()}
|
||||
<div class={bem('content')}>{Content()}</div>
|
||||
</tag>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,26 +3,84 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
|
||||
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">主要按钮</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">信息按钮</span></div>
|
||||
</button></div> <button class="van-button van-button--danger van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">危险按钮</span></div>
|
||||
</button> <button class="van-button van-button--warning van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">警告按钮</span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain">
|
||||
<div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--plain">
|
||||
<div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround">
|
||||
<div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround">
|
||||
<div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
|
||||
</button></div>
|
||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled">
|
||||
<div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
|
||||
</button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled">
|
||||
<div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-button__content">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
||||
<div class="van-button__content">
|
||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
||||
</div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
|
||||
<div class="van-button__content">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
|
||||
</div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--square">
|
||||
<div class="van-button__content"><span class="van-button__text">方形按钮</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">圆形按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i><span class="van-button__text">按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal van-button--plain">
|
||||
<div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
|
||||
<!----></i><span class="van-button__text">按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--large">
|
||||
<div class="van-button__content"><span class="van-button__text">大号按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">普通按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--small">
|
||||
<div class="van-button__content"><span class="van-button__text">小型按钮</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--mini">
|
||||
<div class="van-button__content"><span class="van-button__text">迷你按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--block">
|
||||
<div class="van-button__content"><span class="van-button__text">块级元素</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">URL 跳转</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">路由跳转</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
|
||||
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
|
||||
</button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
|
||||
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
|
||||
</button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
|
||||
<div class="van-button__content"><span class="van-button__text">渐变色按钮</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
|
||||
<!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
|
||||
<!----></i><span class="van-button__text">按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">块级元素</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
|
||||
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">单色按钮</span></button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;"><span class="van-button__text">渐变色按钮</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`icon-prefix prop 1`] = `
|
||||
<button class="van-button van-button--default van-button--normal"><i class="my-icon my-icon-success van-button__icon">
|
||||
<!----></i></button>
|
||||
<button class="van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content"><i class="my-icon my-icon-success van-button__icon">
|
||||
<!----></i></div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`loading-size prop 1`] = `
|
||||
<button class="van-button van-button--default van-button--normal van-button--loading">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-button__content">
|
||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
+13
-1
@@ -228,6 +228,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
|
||||
| row-height | Row height | _number \| string_ | `64` |
|
||||
| formatter | Day formatter | _(day: Day) => Day_ | - |
|
||||
| poppable | Whether to show the calendar inside a popup | _boolean_ | `true` |
|
||||
| lazy-render `v2.8.1` | Whether to enable lazy render | _boolean_ | `true` |
|
||||
| show-mark | Whether to show background month mark | _boolean_ | `true` |
|
||||
| show-title `v2.5.5` | Whether to show title | _boolean_ | `true` |
|
||||
| show-subtitle `v2.5.5` | Whether to show subtitle | _boolean_ | `true` |
|
||||
@@ -255,10 +256,19 @@ Following props are supported when the type is range
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range `v2.4.3` | Number of selectable days | _number \| string_ | - |
|
||||
| max-range `v2.4.3` | Number of selectable days | _number \| string_ | Unlimitied |
|
||||
| range-prompt `v2.4.3` | Error message when exceeded max range | _string_ | `Choose no more than xx days` |
|
||||
| allow-same-day `v2.5.6` | Whether the start and end time of the range is allowed on the same day | _boolean_ | `fasle` |
|
||||
|
||||
### Multiple Props
|
||||
|
||||
Following props are supported when the type is multiple
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range `v2.7.2` | Max count of selectable days | _number \| string_ | Unlimitied |
|
||||
| range-prompt `v2.4.3` | Error message when exceeded max count | _string_ | `Choose no more than xx days` |
|
||||
|
||||
### Data Structure of Day
|
||||
|
||||
| Key | Description | Type |
|
||||
@@ -280,6 +290,8 @@ Following props are supported when the type is range
|
||||
| close `v2.5.2` | Triggered when close Popup | - |
|
||||
| opened `v2.5.2` | Triggered when opened Popup | - |
|
||||
| closed `v2.5.2` | Triggered when closed Popup | - |
|
||||
| unselect `v2.7.2` | Triggered when unselect date when type is multiple | _value: Date_ |
|
||||
| month-show `v2.8.2` | Triggered when a month enters the visible area | _{ date: Date, title: string }_ |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -230,6 +230,7 @@ export default {
|
||||
| row-height | 日期行高 | _number \| string_ | `64` |
|
||||
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
|
||||
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
|
||||
| lazy-render `v2.8.1` | 是否只渲染可视区域的内容 | _boolean_ | `true` |
|
||||
| show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
|
||||
| show-title `v2.5.5` | 是否展示日历标题 | _boolean_ | `true` |
|
||||
| show-subtitle `v2.5.5` | 是否展示日历副标题（年月） | _boolean_ | `true` |
|
||||
@@ -257,10 +258,19 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range `v2.4.3` | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
|
||||
| max-range `v2.4.3` | 日期区间最多可选天数 | _number \| string_ | 无限制 |
|
||||
| range-prompt `v2.4.3` | 范围选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
|
||||
| allow-same-day `v2.5.6` | 是否允许日期范围的起止时间为同一天 | _boolean_ | `fasle` |
|
||||
|
||||
### Multiple Props
|
||||
|
||||
当 Canlendar 的 `type` 为 `multiple` 时，支持以下 props:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range `v2.7.2` | 日期最多可选天数 | _number \| string_ | 无限制 |
|
||||
| range-prompt `v2.4.3` | 选择超过最多可选天数时的提示文案 | _string_ | `选择天数不能超过 xx 天` |
|
||||
|
||||
### Day 数据结构
|
||||
|
||||
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容
|
||||
@@ -278,12 +288,14 @@ export default {
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| select | 点击任意日期时触发 | _value: Date \| Date[]_ |
|
||||
| select | 点击并选中任意日期时触发 | _value: Date \| Date[]_ |
|
||||
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
|
||||
| open `v2.5.2` | 打开弹出层时触发 | - |
|
||||
| close `v2.5.2` | 关闭弹出层时触发 | - |
|
||||
| opened `v2.5.2` | 打开弹出层且动画结束后触发 | - |
|
||||
| closed `v2.5.2` | 关闭弹出层且动画结束后触发 | - |
|
||||
| unselect `v2.7.2` | 当日历组件的 `type` 为 `multiple` 时，取消选中日期时触发 | _value: Date_ |
|
||||
| month-show `v2.8.2` | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@ export default createComponent({
|
||||
showMark: Boolean,
|
||||
rowHeight: [Number, String],
|
||||
formatter: Function,
|
||||
lazyRender: Boolean,
|
||||
currentDate: [Date, Array],
|
||||
allowSameDay: Boolean,
|
||||
showSubtitle: Boolean,
|
||||
@@ -47,8 +48,12 @@ export default createComponent({
|
||||
return getMonthEndDay(this.date.getFullYear(), this.date.getMonth() + 1);
|
||||
},
|
||||
|
||||
shouldRender() {
|
||||
return this.visible || !this.lazyRender;
|
||||
},
|
||||
|
||||
monthStyle() {
|
||||
if (!this.visible) {
|
||||
if (!this.shouldRender) {
|
||||
const padding =
|
||||
Math.ceil((this.totalDay + this.offset) / 7) * this.rowHeight;
|
||||
|
||||
@@ -201,6 +206,7 @@ export default createComponent({
|
||||
if (
|
||||
type === 'start' ||
|
||||
type === 'end' ||
|
||||
type === 'start-end' ||
|
||||
type === 'multiple-selected' ||
|
||||
type === 'multiple-middle'
|
||||
) {
|
||||
@@ -226,7 +232,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genDays() {
|
||||
if (this.visible) {
|
||||
if (this.shouldRender) {
|
||||
return (
|
||||
<div ref="days" role="grid" class={bem('days')}>
|
||||
{this.genMark()}
|
||||
|
||||
+17
-1
@@ -4,6 +4,7 @@ import { getScrollTop } from '../utils/dom/scroll';
|
||||
import {
|
||||
t,
|
||||
bem,
|
||||
copyDate,
|
||||
copyDates,
|
||||
getNextDay,
|
||||
compareDay,
|
||||
@@ -67,6 +68,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showMark: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@@ -248,6 +253,13 @@ export default createComponent({
|
||||
currentMonth = months[i];
|
||||
}
|
||||
|
||||
if (!months[i].visible && visible) {
|
||||
this.$emit('month-show', {
|
||||
date: months[i].date,
|
||||
title: months[i].title,
|
||||
});
|
||||
}
|
||||
|
||||
months[i].visible = visible;
|
||||
height += heights[i];
|
||||
}
|
||||
@@ -290,7 +302,10 @@ export default createComponent({
|
||||
});
|
||||
|
||||
if (selected) {
|
||||
currentDate.splice(selectedIndex, 1);
|
||||
const [unselectedDate] = currentDate.splice(selectedIndex, 1);
|
||||
this.$emit('unselect', copyDate(unselectedDate));
|
||||
} else if (this.maxRange && currentDate.length >= this.maxRange) {
|
||||
Toast(this.rangePrompt || t('rangePrompt', this.maxRange));
|
||||
} else {
|
||||
this.select([...currentDate, date]);
|
||||
}
|
||||
@@ -359,6 +374,7 @@ export default createComponent({
|
||||
showMark={this.showMark}
|
||||
formatter={this.formatter}
|
||||
rowHeight={this.rowHeight}
|
||||
lazyRender={this.lazyRender}
|
||||
currentDate={this.currentDate}
|
||||
showSubtitle={this.showSubtitle}
|
||||
allowSameDay={this.allowSameDay}
|
||||
|
||||
@@ -184,6 +184,5 @@
|
||||
&__confirm {
|
||||
height: @calendar-confirm-button-height;
|
||||
margin: @calendar-confirm-button-margin;
|
||||
line-height: @calendar-confirm-button-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,7 +47,9 @@ exports[`color prop when type is range 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -98,7 +100,9 @@ exports[`color prop when type is single 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -152,7 +156,9 @@ exports[`formatter prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -206,7 +212,9 @@ exports[`popup wrapper 2`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
|
||||
<!----></i>
|
||||
</div>
|
||||
@@ -259,7 +267,9 @@ exports[`row-height prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确定</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`lazy-render prop 1`] = `
|
||||
<div class="van-calendar">
|
||||
<div class="van-calendar__header">
|
||||
<div class="van-calendar__header-title">日期选择</div>
|
||||
<div class="van-calendar__header-subtitle"></div>
|
||||
<div class="van-calendar__weekdays"><span class="van-calendar__weekday">日</span><span class="van-calendar__weekday">一</span><span class="van-calendar__weekday">二</span><span class="van-calendar__weekday">三</span><span class="van-calendar__weekday">四</span><span class="van-calendar__weekday">五</span><span class="van-calendar__weekday">六</span></div>
|
||||
</div>
|
||||
<div class="van-calendar__body">
|
||||
<div class="van-calendar__month">
|
||||
<div role="grid" class="van-calendar__days">
|
||||
<div class="van-calendar__month-mark">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled" style="margin-left: 71.42857142857143%;">1</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">2</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">3</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">4</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">5</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">6</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">7</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">8</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">9</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
|
||||
<div role="gridcell" tabindex="-1" class="van-calendar__day">
|
||||
<div class="van-calendar__selected-day">20</div>
|
||||
</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
|
||||
<div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -87,6 +87,27 @@ test('select event when type is multiple', async () => {
|
||||
);
|
||||
});
|
||||
|
||||
test('select event when type is multiple', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'multiple',
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false,
|
||||
defaultDate: [minDate],
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(15).trigger('click');
|
||||
await later();
|
||||
days.at(15).trigger('click');
|
||||
|
||||
expect(formatDate(wrapper.emitted('unselect')[0][0])).toEqual('2010/1/16');
|
||||
});
|
||||
|
||||
test('should not trigger select event when click disabled day', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
|
||||
@@ -2,7 +2,7 @@ import Calendar from '..';
|
||||
import { mount, later } from '../../../test';
|
||||
import { minDate, maxDate, formatRange, formatDate } from './utils';
|
||||
|
||||
test('max-range prop when showConfirm is false', async () => {
|
||||
test('max-range prop when type is range and showConfirm is false', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'range',
|
||||
@@ -27,7 +27,7 @@ test('max-range prop when showConfirm is false', async () => {
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('max-range prop when showConfirm is true', async () => {
|
||||
test('max-range prop when type is range and showConfirm is true', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'range',
|
||||
@@ -51,6 +51,27 @@ test('max-range prop when showConfirm is true', async () => {
|
||||
expect(wrapper.emitted('confirm')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('max-range prop when type is multiple', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
type: 'multiple',
|
||||
minDate,
|
||||
maxDate,
|
||||
maxRange: 2,
|
||||
poppable: false,
|
||||
showConfirm: false,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const days = wrapper.findAll('.van-calendar__day');
|
||||
days.at(13).trigger('click');
|
||||
days.at(14).trigger('click');
|
||||
|
||||
expect(wrapper.emitted('select').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('show-title prop', () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
@@ -146,3 +167,27 @@ test('min-date before current time', () => {
|
||||
wrapper.find('.van-calendar__confirm').trigger('click');
|
||||
expect(formatDate(wrapper.emitted('confirm')[0][0])).toEqual('1800/1/2');
|
||||
});
|
||||
|
||||
test('lazy-render prop', () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
minDate,
|
||||
maxDate,
|
||||
poppable: false,
|
||||
lazyRender: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test.only('month-show event', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
await later();
|
||||
|
||||
expect(wrapper.emitted('month-show')).toBeTruthy();
|
||||
});
|
||||
|
||||
@@ -57,6 +57,10 @@ export function calcDateNum(date: [Date, Date]) {
|
||||
return (day2 - day1) / (1000 * 60 * 60 * 24) + 1;
|
||||
}
|
||||
|
||||
export function copyDate(dates: Date) {
|
||||
return new Date(dates);
|
||||
}
|
||||
|
||||
export function copyDates(dates: Date | Date[]) {
|
||||
if (Array.isArray(dates)) {
|
||||
return dates.map((date) => {
|
||||
@@ -64,9 +68,9 @@ export function copyDates(dates: Date | Date[]) {
|
||||
return date;
|
||||
}
|
||||
|
||||
return new Date(date);
|
||||
return copyDate(date);
|
||||
});
|
||||
}
|
||||
|
||||
return new Date(dates);
|
||||
return copyDate(dates);
|
||||
}
|
||||
|
||||
@@ -77,11 +77,15 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-card__footer">
|
||||
<div><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||
<div><button class="van-button van-button--default van-button--mini van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
按钮
|
||||
</span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--default van-button--mini van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
按钮
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+8
-7
@@ -154,10 +154,11 @@ Vue.use(CellGroup);
|
||||
|
||||
### Cell Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---------- | ----------------- |
|
||||
| default | Custom value |
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| label | Custom label |
|
||||
| right-icon | Custom right icon |
|
||||
| Name | Description |
|
||||
| ---------- | --------------------------------- |
|
||||
| default | Custom value |
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| label | Custom label |
|
||||
| right-icon | Custom right icon |
|
||||
| extra | Custom extra content on the right |
|
||||
|
||||
@@ -159,8 +159,9 @@ Vue.use(CellGroup);
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ---------- | ----------------------------- |
|
||||
| default | 自定义右侧内容 |
|
||||
| title | 自定义左侧标题 |
|
||||
| label | 自定义标题下方描述 |
|
||||
| default | 自定义右侧 value 的内容 |
|
||||
| title | 自定义左侧 title 的内容 |
|
||||
| label | 自定义标题下方 label 的内容 |
|
||||
| icon | 自定义左侧图标 |
|
||||
| right-icon | 自定义右侧按钮，默认为`arrow` |
|
||||
| extra | 自定义单元格最右侧的额外内容 |
|
||||
|
||||
+2
-1
@@ -13,10 +13,11 @@
|
||||
line-height: @cell-line-height;
|
||||
background-color: @cell-background-color;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
&::after {
|
||||
.hairline-bottom(@cell-border-color, @padding-md);
|
||||
}
|
||||
|
||||
&:last-child::after,
|
||||
&--borderless::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
height: 1.25em;
|
||||
color: transparent;
|
||||
font-size: 0.8em;
|
||||
line-height: inherit;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
border: 1px solid @checkbox-border-color;
|
||||
transition-duration: @checkbox-transition-duration;
|
||||
|
||||
@@ -116,11 +116,15 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i></div><span class="van-checkbox__label">复选框 c</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
<div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
全选
|
||||
</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--info van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
反选
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-checkbox-group">
|
||||
|
||||
@@ -48,6 +48,10 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-circle__text">大小定制</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">增加</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">减少</span></button></div>
|
||||
<div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small">
|
||||
<div class="van-button__content"><span class="van-button__text">增加</span></div>
|
||||
</button> <button class="van-button van-button--danger van-button--small">
|
||||
<div class="van-button__content"><span class="van-button__text">减少</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
+13
-6
@@ -1,8 +1,11 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { ChildrenMixin } from '../mixins/relation';
|
||||
|
||||
const [createComponent, bem] = createNamespace('col');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [ChildrenMixin('vanRow')],
|
||||
|
||||
props: {
|
||||
span: [Number, String],
|
||||
offset: [Number, String],
|
||||
@@ -13,13 +16,17 @@ export default createComponent({
|
||||
},
|
||||
|
||||
computed: {
|
||||
gutter() {
|
||||
return (this.$parent && Number(this.$parent.gutter)) || 0;
|
||||
},
|
||||
|
||||
style() {
|
||||
const padding = `${this.gutter / 2}px`;
|
||||
return this.gutter ? { paddingLeft: padding, paddingRight: padding } : {};
|
||||
const { index } = this;
|
||||
const { spaces } = this.parent || {};
|
||||
|
||||
if (spaces && spaces[index]) {
|
||||
const { left, right } = spaces[index];
|
||||
return {
|
||||
paddingLeft: left ? `${left}px` : null,
|
||||
paddingRight: right ? `${right}px` : null,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -21,10 +21,10 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
|
||||
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">span: 8</div>
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`gutter prop 1`] = `
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--24">24</div>
|
||||
<div class="van-col van-col--12" style="padding-right: 12px;">12</div>
|
||||
<div class="van-col van-col--12" style="padding-left: 12px;">12</div>
|
||||
<div class="van-col van-col--8" style="padding-right: 16px;">8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 16px;">8</div>
|
||||
<div class="van-col van-col--6" style="padding-right: 18px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 18px;">6</div>
|
||||
<div class="van-col van-col--7" style="padding-right: 18px;">7</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
||||
<div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
|
||||
<div class="van-col van-col--4" style="padding-left: 18px;">4</div>
|
||||
<div class="van-col van-col--3" style="padding-right: 12px;">3</div>
|
||||
<div class="van-col van-col--2" style="padding-left: 12px;">2</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -15,3 +15,34 @@ test('Row click event', () => {
|
||||
|
||||
expect(wrapper.emitted('click')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('gutter prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-row gutter="24">
|
||||
<van-col span="24">24</van-col>
|
||||
|
||||
<van-col span="12">12</van-col>
|
||||
<van-col span="12">12</van-col>
|
||||
|
||||
<van-col span="8">8</van-col>
|
||||
<van-col span="8">8</van-col>
|
||||
<van-col span="8">8</van-col>
|
||||
|
||||
<van-col span="6">6</van-col>
|
||||
<van-col span="6">6</van-col>
|
||||
<van-col span="6">6</van-col>
|
||||
<van-col span="6">6</van-col>
|
||||
|
||||
<van-col span="7">7</van-col>
|
||||
<van-col span="6">6</van-col>
|
||||
<van-col span="5">5</van-col>
|
||||
<van-col span="4">4</van-col>
|
||||
<van-col span="3">3</van-col>
|
||||
<van-col span="2">2</van-col>
|
||||
</van-row>
|
||||
`,
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { BORDER_TOP } from '../utils/constant';
|
||||
import { raf, doubleRaf } from '../utils/dom/raf';
|
||||
|
||||
// Mixins
|
||||
@@ -173,7 +172,7 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={[bem(), { [BORDER_TOP]: this.index }]}>
|
||||
<div class={[bem({ border: this.index })]}>
|
||||
{this.genTitle()}
|
||||
{this.genContent()}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
@import '../style/var';
|
||||
@import '../style/mixins/hairline';
|
||||
|
||||
.van-collapse-item {
|
||||
position: relative;
|
||||
|
||||
&--border {
|
||||
&::after {
|
||||
.hairline-top(@cell-border-color, @padding-md, @padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
.van-cell__right-icon::before {
|
||||
transform: rotate(90deg);
|
||||
@@ -8,7 +17,8 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
visibility: hidden;
|
||||
right: @padding-md;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
@@ -17,7 +27,7 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -15,13 +15,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="-1" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled">
|
||||
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@@ -42,13 +42,13 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题2</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>标题3</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@@ -66,7 +66,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title"><i class="van-icon van-icon-shop-o van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>标题2</span></div>
|
||||
|
||||
@@ -8,13 +8,13 @@ exports[`disable border 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top">
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
|
||||
<div class="van-cell__title"><span>c</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
@@ -31,7 +31,7 @@ exports[`lazy render collapse content 1`] = `
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-hairline--top" style="padding: 0px;">
|
||||
<div class="van-collapse-item van-collapse-item--border" style="padding: 0px;">
|
||||
<div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
|
||||
<div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
|
||||
@@ -20,7 +20,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-popup van-popup--bottom" style="display: none;" name="van-popup-slide-bottom">
|
||||
@@ -47,7 +49,9 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round"><span class="van-button__text">保存</span></button></div>
|
||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">保存</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,8 @@ exports[`ContactList render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"><span class="van-button__text">新建联系人</span></button></div>
|
||||
<div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
|
||||
<div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -44,21 +44,27 @@ export default {
|
||||
```html
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="timeData">
|
||||
<span class="item">{{ timeData.hours }}</span>
|
||||
<span class="item">{{ timeData.minutes }}</span>
|
||||
<span class="item">{{ timeData.seconds }}</span>
|
||||
<span class="block">{{ timeData.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.seconds }}</span>
|
||||
</template>
|
||||
</van-count-down>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #1989fa;
|
||||
background-color: #ee0a24;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -52,21 +52,27 @@ export default {
|
||||
```html
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="timeData">
|
||||
<span class="item">{{ timeData.hours }}</span>
|
||||
<span class="item">{{ timeData.minutes }}</span>
|
||||
<span class="item">{{ timeData.seconds }}</span>
|
||||
<span class="block">{{ timeData.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ timeData.seconds }}</span>
|
||||
</template>
|
||||
</van-count-down>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: #ee0a24;
|
||||
}
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #1989fa;
|
||||
background-color: #ee0a24;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -15,9 +15,13 @@
|
||||
<demo-block :title="t('customStyle')">
|
||||
<van-count-down :time="time">
|
||||
<template v-slot="currentTime">
|
||||
<span class="item">{{ currentTime.hours }}</span>
|
||||
<span class="item">{{ currentTime.minutes }}</span>
|
||||
<span class="item">{{ currentTime.seconds }}</span>
|
||||
<div>
|
||||
<span class="block">{{ currentTime.hours }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ currentTime.minutes }}</span>
|
||||
<span class="colon">:</span>
|
||||
<span class="block">{{ currentTime.seconds }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-count-down>
|
||||
</demo-block>
|
||||
@@ -103,15 +107,20 @@ export default {
|
||||
margin-left: @padding-md;
|
||||
}
|
||||
|
||||
.item {
|
||||
.colon {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
color: @red;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: @blue;
|
||||
border-radius: 2px;
|
||||
background-color: @red;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.van-grid {
|
||||
|
||||
@@ -67,8 +67,7 @@
|
||||
}
|
||||
|
||||
&__close {
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
height: @coupon-list-close-button-height;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
|
||||
@@ -7,13 +7,15 @@ exports[`empty-image prop 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">可用 (0)<!----></span></div>
|
||||
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">不可用 (0)<!----></span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,7 +32,9 @@ exports[`empty-image prop 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -57,13 +61,15 @@ exports[`render coupon list 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">可用 (6)<!----></span></div>
|
||||
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">不可用 (2)<!----></span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (6)</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (2)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -176,7 +182,9 @@ exports[`render coupon list 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -203,13 +211,15 @@ exports[`render empty coupon list 1`] = `
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button>
|
||||
</div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange">
|
||||
<div class="van-button__content"><span class="van-button__text">兑换</span></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--line van-coupon-list__tab">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
||||
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">可用 (0)<!----></span></div>
|
||||
<div role="tab" class="van-tab van-tab--active van-ellipsis" aria-selected="true"><span class="van-tab__text">不可用 (0)<!----></span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
|
||||
<div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
|
||||
<div class="van-tabs__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -230,6 +240,8 @@ exports[`render empty coupon list 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button></div>
|
||||
<div class="van-coupon-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-coupon-list__close">
|
||||
<div class="van-button__content"><span class="van-button__text">不使用优惠券</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { createNamespace, get } from '../utils';
|
||||
import { isDate } from '../utils/validate/date';
|
||||
import { padZero } from '../utils/format/string';
|
||||
import { getTrueValue, getMonthEndDay } from './utils';
|
||||
@@ -60,7 +60,7 @@ export default createComponent({
|
||||
minMinute,
|
||||
} = this.getBoundary('min', this.innerValue);
|
||||
|
||||
const result = [
|
||||
let result = [
|
||||
{
|
||||
type: 'year',
|
||||
range: [minYear, maxYear],
|
||||
@@ -83,8 +83,18 @@ export default createComponent({
|
||||
},
|
||||
];
|
||||
|
||||
if (this.type === 'date') result.splice(3, 2);
|
||||
if (this.type === 'year-month') result.splice(2, 3);
|
||||
if (this.type === 'date') {
|
||||
result = result.slice(0, 3);
|
||||
}
|
||||
|
||||
if (this.type === 'year-month') {
|
||||
result = result.slice(0, 2);
|
||||
}
|
||||
|
||||
if (this.type === 'month-day') {
|
||||
result = result.slice(1, 3);
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
},
|
||||
@@ -139,35 +149,39 @@ export default createComponent({
|
||||
},
|
||||
|
||||
updateInnerValue() {
|
||||
const { type } = this;
|
||||
const indexes = this.getPicker().getIndexes();
|
||||
|
||||
const getValue = (index) => {
|
||||
const { values } = this.originColumns[index];
|
||||
return getTrueValue(values[indexes[index]]);
|
||||
};
|
||||
|
||||
const year = getValue(0);
|
||||
const month = getValue(1);
|
||||
const maxDate = getMonthEndDay(year, month);
|
||||
let year;
|
||||
let month;
|
||||
let day;
|
||||
|
||||
let date;
|
||||
if (this.type === 'year-month') {
|
||||
date = 1;
|
||||
if (type === 'month-day') {
|
||||
year = this.innerValue.getFullYear();
|
||||
month = getValue(0);
|
||||
day = getValue(1);
|
||||
} else {
|
||||
date = getValue(2);
|
||||
year = getValue(0);
|
||||
month = getValue(1);
|
||||
day = type === 'year-month' ? 1 : getValue(2);
|
||||
}
|
||||
|
||||
date = date > maxDate ? maxDate : date;
|
||||
const maxDay = getMonthEndDay(year, month);
|
||||
day = day > maxDay ? maxDay : day;
|
||||
|
||||
let hour = 0;
|
||||
let minute = 0;
|
||||
|
||||
if (this.type === 'datetime') {
|
||||
if (type === 'datetime') {
|
||||
hour = getValue(3);
|
||||
minute = getValue(4);
|
||||
}
|
||||
|
||||
const value = new Date(year, month - 1, date, hour, minute);
|
||||
const value = new Date(year, month - 1, day, hour, minute);
|
||||
|
||||
this.innerValue = this.formatValue(value);
|
||||
},
|
||||
@@ -203,6 +217,10 @@ export default createComponent({
|
||||
values = values.slice(0, 2);
|
||||
}
|
||||
|
||||
if (this.type === 'month-day') {
|
||||
values = values.slice(1, 3);
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getPicker().setValues(values);
|
||||
});
|
||||
|
||||
@@ -15,35 +15,13 @@ Vue.use(DatetimePicker);
|
||||
|
||||
## Usage
|
||||
|
||||
### Choose DateTime
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Choose Date
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
title="Choose Date"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
@@ -67,6 +45,7 @@ export default {
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
title="Choose Year-Month"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
@@ -95,12 +74,48 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Choose Month-Day
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="month-day"
|
||||
title="Choose Month-Day"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'month') {
|
||||
return `${val} Month`;
|
||||
} else if (type === 'day') {
|
||||
return `${val} Day`;
|
||||
}
|
||||
return val;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Choose Time
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
title="Choose Time"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
@@ -116,10 +131,39 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Choose DateTime
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
title="Choose DateTime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Option Filter
|
||||
|
||||
```html
|
||||
<van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
title="Option Filter"
|
||||
:filter="filter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -134,7 +178,6 @@ export default {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
@@ -147,7 +190,7 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| type | Can be set to `date` `time`<br> `year-month` | _string_ | `datetime` |
|
||||
| type | Can be set to `date` `time`<br> `year-month` `month-day` | _string_ | `datetime` |
|
||||
| title | Toolbar title | _string_ | `''` |
|
||||
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
|
||||
| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
|
||||
|
||||
@@ -15,35 +15,15 @@ Vue.use(DatetimePicker);
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 选择完整时间
|
||||
### 选择年月日
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选择日期（年月日）
|
||||
DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为 `date` 表示选择年月日。通过 min-date 和 max-date 属性可以确定可选的时间范围。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
title="选择年月日"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
@@ -61,14 +41,15 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 选择日期（年月）
|
||||
### 选择年月
|
||||
|
||||
通过传入`formatter`函数，可以对选项文字进行格式化处理
|
||||
将 type 设置为 `year-month` 即可选择年份和月份。通过传入`formatter`函数，可以对选项文字进行格式化处理
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="year-month"
|
||||
title="选择年月"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
@@ -97,12 +78,52 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 选择年月
|
||||
|
||||
将 type 设置为 `month-day` 即可选择月份和日期（从 2.8.4 版本开始支持）
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="month-day"
|
||||
title="选择月日"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(type, val) {
|
||||
if (type === 'month') {
|
||||
return `${val}月`;
|
||||
} else if (type === 'day') {
|
||||
return `${val}日`;
|
||||
}
|
||||
return val;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选择时间
|
||||
|
||||
将 type 设置为 `time` 即可选择时间（小时和分钟）
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentTime"
|
||||
type="time"
|
||||
title="选择时间"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
@@ -118,6 +139,32 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 选择完整时间
|
||||
|
||||
将 type 设置为 `datetime` 即可选择完整时间，包括年月日和小时、分钟。
|
||||
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
title="选择完整时间"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate: new Date(),
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 选项过滤器
|
||||
|
||||
通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔
|
||||
@@ -138,7 +185,6 @@ export default {
|
||||
if (type === 'minute') {
|
||||
return options.filter((option) => option % 5 === 0);
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
},
|
||||
@@ -151,7 +197,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 类型，可选值为 `date` <br> `time` `year-month` | _string_ | `datetime` |
|
||||
| type | 时间类型，可选值为 `date` `time` <br> `year-month` `month-day` | _string_ | `datetime` |
|
||||
| title | 顶部栏标题 | _string_ | `''` |
|
||||
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
|
||||
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
|
||||
|
||||
@@ -1,46 +1,62 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('title1')">
|
||||
<demo-block :title="t('dateType')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate1"
|
||||
type="datetime"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
v-model="value.date"
|
||||
type="date"
|
||||
:title="t('dateType')"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<demo-block :title="t('yearMonthType')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
v-model="value.yearMonth"
|
||||
type="year-month"
|
||||
:title="t('yearMonthType')"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title4')">
|
||||
<demo-block :title="t('monthDayType')">
|
||||
<van-datetime-picker
|
||||
v-model="currentTime1"
|
||||
v-model="value.monthDayType"
|
||||
type="month-day"
|
||||
:title="t('monthDayType')"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:formatter="formatter"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('timeType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.time"
|
||||
type="time"
|
||||
:title="t('timeType')"
|
||||
:min-hour="10"
|
||||
:max-hour="20"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('datetimeType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.datetime"
|
||||
type="datetime"
|
||||
:title="t('datetimeType')"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('optionFilter')">
|
||||
<van-datetime-picker
|
||||
v-model="currentTime2"
|
||||
v-model="value.optionFilter"
|
||||
type="time"
|
||||
:title="t('optionFilter')"
|
||||
:filter="filter"
|
||||
/>
|
||||
</demo-block>
|
||||
@@ -51,21 +67,25 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '选择完整时间',
|
||||
title2: '选择日期（年月日）',
|
||||
title3: '选择日期（年月）',
|
||||
title4: '选择时间',
|
||||
day: '日',
|
||||
year: '年',
|
||||
month: '月',
|
||||
timeType: '选择时间',
|
||||
dateType: '选择年月日',
|
||||
datetimeType: '选择完整时间',
|
||||
monthDayType: '选择月日',
|
||||
yearMonthType: '选择年月',
|
||||
optionFilter: '选项过滤器',
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Choose DateTime',
|
||||
title2: 'Choose Date',
|
||||
title3: 'Choose Year-Month',
|
||||
title4: 'Choose Time',
|
||||
day: 'Day',
|
||||
year: ' Year',
|
||||
month: ' Month',
|
||||
timeType: 'Choose Time',
|
||||
dateType: 'Choose Date',
|
||||
datetimeType: 'Choose DateTime',
|
||||
monthDayType: 'Choose Month-Day',
|
||||
yearMonthType: 'Choose Year-Month',
|
||||
optionFilter: 'Option Filter',
|
||||
},
|
||||
},
|
||||
@@ -74,11 +94,14 @@ export default {
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
currentDate1: new Date(2020, 0, 1),
|
||||
currentDate2: null,
|
||||
currentDate3: new Date(2020, 0, 1),
|
||||
currentTime1: '12:00',
|
||||
currentTime2: '12:00',
|
||||
value: {
|
||||
date: null,
|
||||
time: '12:00',
|
||||
datetime: new Date(2020, 0, 1),
|
||||
monthDay: new Date(2020, 0, 1),
|
||||
yearMonth: new Date(2020, 0, 1),
|
||||
optionFilter: '12:00',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
@@ -90,6 +113,9 @@ export default {
|
||||
if (type === 'month') {
|
||||
return value + this.t('month');
|
||||
}
|
||||
if (type === 'day') {
|
||||
return value + this.t('day');
|
||||
}
|
||||
return value;
|
||||
},
|
||||
|
||||
|
||||
@@ -2,53 +2,105 @@
|
||||
|
||||
exports[`filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2020</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">35</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">45</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">55</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -60,54 +112,108 @@ exports[`filter prop 1`] = `
|
||||
|
||||
exports[`formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010 year</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020 year</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2010 year</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020 year</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 month</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 month</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 month</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 month</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25 day</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 day</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 day</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 hour</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">35 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">45 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55 minute</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">35 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">45 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">55 minute</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
|
||||
@@ -2,19 +2,27 @@
|
||||
|
||||
exports[`time type 1`] = `
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">59</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,26 +2,48 @@
|
||||
|
||||
exports[`filter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -33,19 +55,27 @@ exports[`filter prop 1`] = `
|
||||
|
||||
exports[`format initial value 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">59</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -57,26 +87,48 @@ exports[`format initial value 1`] = `
|
||||
|
||||
exports[`formatter prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 hour</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
@@ -88,21 +140,33 @@ exports[`formatter prop 1`] = `
|
||||
|
||||
exports[`max-hour & max-minute 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
|
||||
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
|
||||
@@ -68,6 +68,60 @@ test('confirm event', () => {
|
||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
||||
});
|
||||
|
||||
test('year-month type', () => {
|
||||
const date = new Date(2020, 10, 1, 0, 0);
|
||||
|
||||
const wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
type: 'year-month',
|
||||
value: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getFullYear()).toEqual(2020);
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(0);
|
||||
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getFullYear()).toEqual(2025);
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(10);
|
||||
});
|
||||
|
||||
test('month-day type', () => {
|
||||
const date = new Date(2020, 10, 1, 0, 0);
|
||||
|
||||
const wrapper = mount(DatePicker, {
|
||||
propsData: {
|
||||
type: 'month-day',
|
||||
value: date,
|
||||
minDate: new Date(2020, 0, 1),
|
||||
maxDate: new Date(2025, 10, 1),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -100);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
||||
});
|
||||
|
||||
test('cancel event', () => {
|
||||
const wrapper = mount(DatePicker);
|
||||
|
||||
|
||||
@@ -2,24 +2,38 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗
|
||||
</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button> <button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提示弹窗（无标题）
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
确认弹窗
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
异步关闭
|
||||
</span></button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||
</span></div>
|
||||
</button></div>
|
||||
<div><button class="van-button van-button--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
组件调用
|
||||
</span></button>
|
||||
</span></div>
|
||||
</button>
|
||||
<div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
|
||||
<div class="van-dialog__header">标题</div>
|
||||
<div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">确认弹窗</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
|
||||
<div class="van-button__content"><span class="van-button__text">取消</span></div>
|
||||
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
|
||||
<div class="van-button__content"><span class="van-button__text">确认弹窗</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,26 +2,38 @@
|
||||
|
||||
exports[`button color 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;"><span class="van-button__text">取消</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;"><span class="van-button__text">确认</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
|
||||
<div class="van-button__content"><span class="van-button__text">取消</span></div>
|
||||
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
|
||||
<div class="van-button__content"><span class="van-button__text">确认</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`button text 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">Custom cancel</span></button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">Custom confirm</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
|
||||
<div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
|
||||
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
|
||||
<div class="van-button__content"><span class="van-button__text">Custom confirm</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`default slot 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-dialog__content">Custom Message</div>
|
||||
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm"><span class="van-button__text">确认</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确认</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`title slot 1`] = `
|
||||
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
|
||||
<div class="van-dialog__header van-dialog__header--isolated">Custom Title</div>
|
||||
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm"><span class="van-button__text">确认</span></button></div>
|
||||
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
|
||||
<div class="van-button__content"><span class="van-button__text">确认</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { BORDER_TOP_BOTTOM } from '../utils/constant';
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { getScroller } from '../utils/dom/scroll';
|
||||
|
||||
// Mixins
|
||||
@@ -49,15 +48,27 @@ export default createComponent({
|
||||
scroller() {
|
||||
return getScroller(this.$el);
|
||||
},
|
||||
|
||||
opened() {
|
||||
return this.children.some((item) => item.showWrapper);
|
||||
},
|
||||
|
||||
barStyle() {
|
||||
if (this.opened && isDef(this.zIndex)) {
|
||||
return {
|
||||
zIndex: 1 + this.zIndex,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateOffset() {
|
||||
if (!this.$refs.menu) {
|
||||
if (!this.$refs.bar) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = this.$refs.menu.getBoundingClientRect();
|
||||
const rect = this.$refs.bar.getBoundingClientRect();
|
||||
|
||||
if (this.direction === 'down') {
|
||||
this.offset = rect.bottom;
|
||||
@@ -113,8 +124,14 @@ export default createComponent({
|
||||
));
|
||||
|
||||
return (
|
||||
<div ref="menu" class={[bem(), BORDER_TOP_BOTTOM]}>
|
||||
{Titles}
|
||||
<div class={bem()}>
|
||||
<div
|
||||
ref="bar"
|
||||
style={this.barStyle}
|
||||
class={bem('bar', { opened: this.opened })}
|
||||
>
|
||||
{Titles}
|
||||
</div>
|
||||
{this.slots('default')}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,20 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-dropdown-menu {
|
||||
display: flex;
|
||||
height: @dropdown-menu-height;
|
||||
background-color: @dropdown-menu-background-color;
|
||||
user-select: none;
|
||||
|
||||
&__bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: @dropdown-menu-height;
|
||||
background-color: @dropdown-menu-background-color;
|
||||
box-shadow: 0 2px 12px fade(@gray-7, 8);
|
||||
|
||||
&--opened {
|
||||
z-index: @dropdown-item-z-index + 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
@@ -44,7 +53,7 @@
|
||||
right: -4px;
|
||||
margin-top: -5px;
|
||||
border: 3px solid;
|
||||
border-color: transparent transparent currentColor currentColor;
|
||||
border-color: transparent transparent @gray-4 @gray-4;
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0.8;
|
||||
content: '';
|
||||
@@ -52,6 +61,10 @@
|
||||
|
||||
&--active {
|
||||
color: @dropdown-menu-title-active-text-color;
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent currentColor currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&--down {
|
||||
|
||||
@@ -3,9 +3,11 @@
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -19,9 +21,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -35,9 +39,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -51,9 +57,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -67,9 +75,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`click option 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
|
||||
@@ -28,9 +30,11 @@ exports[`click option 1`] = `
|
||||
`;
|
||||
|
||||
exports[`close-on-click-outside 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
|
||||
@@ -54,8 +58,10 @@ exports[`close-on-click-outside 1`] = `
|
||||
`;
|
||||
|
||||
exports[`destroy one item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
@@ -66,9 +72,11 @@ exports[`destroy one item 1`] = `
|
||||
`;
|
||||
|
||||
exports[`didn\`t find matched option 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -83,9 +91,11 @@ exports[`didn\`t find matched option 1`] = `
|
||||
`;
|
||||
|
||||
exports[`direction up 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -100,9 +110,11 @@ exports[`direction up 1`] = `
|
||||
`;
|
||||
|
||||
exports[`direction up 2`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px;">
|
||||
<div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
|
||||
@@ -126,9 +138,11 @@ exports[`direction up 2`] = `
|
||||
`;
|
||||
|
||||
exports[`disable close-on-click-outside 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
@@ -152,8 +166,10 @@ exports[`disable close-on-click-outside 1`] = `
|
||||
`;
|
||||
|
||||
exports[`disable dropdown item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -163,9 +179,11 @@ exports[`disable dropdown item 1`] = `
|
||||
`;
|
||||
|
||||
exports[`render option icon 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
@@ -191,9 +209,11 @@ exports[`render option icon 1`] = `
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
@@ -217,9 +237,11 @@ exports[`show dropdown item 1`] = `
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 2`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
|
||||
@@ -252,9 +274,11 @@ exports[`show dropdown item 2`] = `
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 3`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
|
||||
@@ -287,9 +311,11 @@ exports[`show dropdown item 3`] = `
|
||||
`;
|
||||
|
||||
exports[`title prop 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -304,10 +330,12 @@ exports[`title prop 1`] = `
|
||||
`;
|
||||
|
||||
exports[`title slot 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
|
||||
Custom Title
|
||||
</div></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
|
||||
<!---->
|
||||
@@ -315,26 +343,3 @@ exports[`title slot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`toggle method 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`toggle method 2`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
|
||||
<div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -224,12 +224,14 @@ test('toggle method', async (done) => {
|
||||
// show
|
||||
this.$refs.item.toggle(true, { immediate: true });
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
const content = wrapper.find('.van-dropdown-item__content');
|
||||
expect(content.element.style.display).toEqual('');
|
||||
|
||||
// hide
|
||||
this.$refs.item.toggle(false, { immediate: true });
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(content.element.style.display).toEqual('none');
|
||||
|
||||
done();
|
||||
},
|
||||
|
||||
@@ -58,6 +58,7 @@ Use the image prop to display different placeholder images
|
||||
<style>
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -67,6 +67,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
<style>
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -82,6 +82,7 @@ export default {
|
||||
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,9 +12,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<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 van-ellipsis"><span class="van-tab__text">通用错误<!----></span></div>
|
||||
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">网络错误<!----></span></div>
|
||||
<div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">搜索提示<!----></span></div>
|
||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
|
||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">搜索提示</span></div>
|
||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,9 +44,11 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
|
||||
<p class="van-empty__description">描述文字</p>
|
||||
<div class="van-empty__bottom"><button class="bottom-button van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">
|
||||
<div class="van-empty__bottom"><button class="bottom-button van-button van-button--danger van-button--normal van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
按钮
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+11
-8
@@ -17,7 +17,7 @@ The value of field is bound with v-model.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="Text" />
|
||||
<van-field v-model="value" label="Label" placeholder="Text" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
@@ -220,6 +220,7 @@ Use `input-align` prop to align the input value
|
||||
| border | Whether to show inner border | _boolean_ | `true` |
|
||||
| disabled | Whether to disable field | _boolean_ | `false` |
|
||||
| readonly | Whether to be readonly | _boolean_ | `false` |
|
||||
| colon `v2.7.2` | Whether to display colon after label | _boolean_ | `false` |
|
||||
| required | Whether to show required mark | _boolean_ | `false` |
|
||||
| clearable | Whether to be clearable | _boolean_ | `false` |
|
||||
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
|
||||
@@ -252,6 +253,7 @@ Field support all native events of input tag
|
||||
| blur | Triggered when input loses focus | _event: Event_ |
|
||||
| clear | Triggered when click clear icon | _event: Event_ |
|
||||
| click | Triggered when click Field | _event: Event_ |
|
||||
| click-input `v2.8.1` | Triggered when click input | _event: Event_ |
|
||||
| click-left-icon | Triggered when click the left icon of Field | _event: Event_ |
|
||||
| click-right-icon | Triggered when click the right icon of Field | _event: Event_ |
|
||||
|
||||
@@ -266,10 +268,11 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ---------- | ----------------- |
|
||||
| label | Custom label |
|
||||
| input | Custom input |
|
||||
| left-icon | Custom left icon |
|
||||
| right-icon | Custom right icon |
|
||||
| button | Insert button |
|
||||
| Name | Description |
|
||||
| -------------- | --------------------------- |
|
||||
| label | Custom label |
|
||||
| input | Custom input |
|
||||
| left-icon | Custom left icon |
|
||||
| right-icon | Custom right icon |
|
||||
| button | Insert button |
|
||||
| extra `v2.8.2` | Custom content on the right |
|
||||
|
||||
+21
-18
@@ -22,7 +22,7 @@ Vue.use(Field);
|
||||
```html
|
||||
<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="请输入用户名" />
|
||||
<van-field v-model="value" label="文本" placeholder="请输入用户名" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
@@ -245,6 +245,7 @@ export default {
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| disabled | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
| colon `v2.7.2` | 是否在 label 后面添加冒号 | _boolean_ | `false` |
|
||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `false` |
|
||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||
@@ -270,15 +271,16 @@ export default {
|
||||
|
||||
除下列事件外，Field 默认支持 Input 标签所有的原生事件
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| ---------------- | -------------------- | ------------------------------ |
|
||||
| input | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
|
||||
| focus | 输入框获得焦点时触发 | _event: Event_ |
|
||||
| blur | 输入框失去焦点时触发 | _event: Event_ |
|
||||
| clear | 点击清除按钮时触发 | _event: Event_ |
|
||||
| click | 点击时触发 | _event: Event_ |
|
||||
| click-left-icon | 点击左侧图标时触发 | _event: Event_ |
|
||||
| click-right-icon | 点击右侧图标时触发 | _event: Event_ |
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| -------------------- | -------------------- | ------------------------------ |
|
||||
| input | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
|
||||
| focus | 输入框获得焦点时触发 | _event: Event_ |
|
||||
| blur | 输入框失去焦点时触发 | _event: Event_ |
|
||||
| clear | 点击清除按钮时触发 | _event: Event_ |
|
||||
| click | 点击 Field 时触发 | _event: Event_ |
|
||||
| click-input `v2.8.1` | 点击输入区域时触发 | _event: Event_ |
|
||||
| click-left-icon | 点击左侧图标时触发 | _event: Event_ |
|
||||
| click-right-icon | 点击右侧图标时触发 | _event: Event_ |
|
||||
|
||||
### 方法
|
||||
|
||||
@@ -291,16 +293,17 @@ export default {
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ---------- | ---------------------------------------------------------- |
|
||||
| label | 自定义输入框标签 |
|
||||
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
|
||||
| left-icon | 自定义输入框头部图标 |
|
||||
| right-icon | 自定义输入框尾部图标 |
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
| 名称 | 说明 |
|
||||
| -------------- | ---------------------------------------------------------- |
|
||||
| label | 自定义输入框 label 标签 |
|
||||
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
|
||||
| left-icon | 自定义输入框头部图标 |
|
||||
| right-icon | 自定义输入框尾部图标 |
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
| extra `v2.8.2` | 自定义输入框最右侧的额外内容 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端点击清除按钮无效？
|
||||
|
||||
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||
清除按钮监听是的移动端 Touch 事件，参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" :placeholder="t('placeholder')" />
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="t('label')"
|
||||
:placeholder="t('placeholder')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
@@ -10,9 +14,11 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
label: '文本',
|
||||
placeholder: '请输入文本',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Label',
|
||||
placeholder: 'Text',
|
||||
},
|
||||
},
|
||||
|
||||
+44
-16
@@ -1,6 +1,6 @@
|
||||
// Utils
|
||||
import { formatNumber } from './utils';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { formatNumber } from '../utils/format/number';
|
||||
import { resetScroll } from '../utils/dom/reset-scroll';
|
||||
import {
|
||||
createNamespace,
|
||||
@@ -37,7 +37,6 @@ export default createComponent({
|
||||
...cellProps,
|
||||
name: String,
|
||||
rules: Array,
|
||||
error: Boolean,
|
||||
disabled: Boolean,
|
||||
readonly: Boolean,
|
||||
autosize: [Boolean, Object],
|
||||
@@ -58,6 +57,14 @@ export default createComponent({
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
error: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
colon: {
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -102,24 +109,23 @@ export default createComponent({
|
||||
},
|
||||
|
||||
showError() {
|
||||
if (this.error !== null) {
|
||||
return this.error;
|
||||
}
|
||||
if (this.vanForm && this.vanForm.showError && this.validateMessage) {
|
||||
return true;
|
||||
}
|
||||
return this.error;
|
||||
},
|
||||
|
||||
listeners() {
|
||||
const listeners = {
|
||||
return {
|
||||
...this.$listeners,
|
||||
input: this.onInput,
|
||||
keypress: this.onKeypress,
|
||||
focus: this.onFocus,
|
||||
blur: this.onBlur,
|
||||
focus: this.onFocus,
|
||||
input: this.onInput,
|
||||
click: this.onClickInput,
|
||||
keypress: this.onKeypress,
|
||||
};
|
||||
|
||||
delete listeners.click;
|
||||
|
||||
return listeners;
|
||||
},
|
||||
|
||||
labelStyle() {
|
||||
@@ -333,6 +339,10 @@ export default createComponent({
|
||||
this.$emit('click', event);
|
||||
},
|
||||
|
||||
onClickInput(event) {
|
||||
this.$emit('click-input', event);
|
||||
},
|
||||
|
||||
onClickLeftIcon(event) {
|
||||
this.$emit('click-left-icon', event);
|
||||
},
|
||||
@@ -348,10 +358,18 @@ export default createComponent({
|
||||
},
|
||||
|
||||
onKeypress(event) {
|
||||
// trigger blur after click keyboard search button
|
||||
/* istanbul ignore next */
|
||||
if (this.type === 'search' && event.keyCode === 13) {
|
||||
this.blur();
|
||||
const ENTER_CODE = 13;
|
||||
|
||||
if (event.keyCode === ENTER_CODE) {
|
||||
const submitOnEnter = this.getProp('submitOnEnter');
|
||||
if (!submitOnEnter && this.type !== 'textarea') {
|
||||
preventDefault(event);
|
||||
}
|
||||
|
||||
// trigger blur after click keyboard search button
|
||||
if (this.type === 'search') {
|
||||
this.blur();
|
||||
}
|
||||
}
|
||||
|
||||
this.$emit('keypress', event);
|
||||
@@ -388,7 +406,12 @@ export default createComponent({
|
||||
|
||||
if (inputSlot) {
|
||||
return (
|
||||
<div class={bem('control', [inputAlign, 'custom'])}>{inputSlot}</div>
|
||||
<div
|
||||
class={bem('control', [inputAlign, 'custom'])}
|
||||
onClick={this.onClickInput}
|
||||
>
|
||||
{inputSlot}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -532,6 +555,11 @@ export default createComponent({
|
||||
scopedSlots.title = () => Label;
|
||||
}
|
||||
|
||||
const extra = this.slots('extra');
|
||||
if (extra) {
|
||||
scopedSlots.extra = () => extra;
|
||||
}
|
||||
|
||||
return (
|
||||
<Cell
|
||||
icon={this.leftIcon}
|
||||
|
||||
@@ -5,7 +5,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-cell__title van-field__label"><span>文本</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入文本" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,9 +99,11 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell__title van-field__label"><span>短信验证码</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
|
||||
<div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
|
||||
<div class="van-field__button"><button class="van-button van-button--primary van-button--small">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
发送验证码
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,6 +26,15 @@ exports[`clearable 2`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`colon prop 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label"><span>foo:</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`label-class prop 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__title van-field__label custom-label-class"><span>Label</span></div>
|
||||
@@ -70,6 +79,14 @@ exports[`reach max word-limit 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render extra slot 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="text" class="van-field__control"></div>
|
||||
</div>Extra
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render input slot 1`] = `
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
|
||||
@@ -17,7 +17,25 @@ test('click event', () => {
|
||||
expect(wrapper.emitted('click')[0][0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('click icon event', () => {
|
||||
test('click-input event', () => {
|
||||
const wrapper = mount(Field);
|
||||
|
||||
wrapper.find('input').trigger('click');
|
||||
expect(wrapper.emitted('click-input')[0][0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('click-input event when using input slot', () => {
|
||||
const wrapper = mount(Field, {
|
||||
scopedSlots: {
|
||||
input: () => 'Custom Input',
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-field__control').trigger('click');
|
||||
expect(wrapper.emitted('click-input')[0][0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('click-icon event', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'a',
|
||||
@@ -185,14 +203,9 @@ test('clearable', () => {
|
||||
});
|
||||
|
||||
test('render input slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<field>
|
||||
<template v-slot:input>Custom Input</template>
|
||||
</field>
|
||||
`,
|
||||
components: {
|
||||
Field,
|
||||
const wrapper = mount(Field, {
|
||||
scopedSlots: {
|
||||
input: () => 'Custom Input',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -200,14 +213,19 @@ test('render input slot', () => {
|
||||
});
|
||||
|
||||
test('render label slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<field label="Default Label">
|
||||
<template v-slot:label>Custom Label</template>
|
||||
</field>
|
||||
`,
|
||||
components: {
|
||||
Field,
|
||||
const wrapper = mount(Field, {
|
||||
scopedSlots: {
|
||||
label: () => 'Custom Label',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render extra slot', () => {
|
||||
const wrapper = mount(Field, {
|
||||
scopedSlots: {
|
||||
extra: () => 'Extra',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -314,3 +332,31 @@ test('call focus method before mounted', (done) => {
|
||||
test('destroy field', () => {
|
||||
mount(Field).destroy();
|
||||
});
|
||||
|
||||
test('colon prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
label: 'foo',
|
||||
colon: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should blur search input on enter', () => {
|
||||
const wrapper = mount(Field);
|
||||
|
||||
wrapper.find('input').element.focus();
|
||||
wrapper.find('input').trigger('keypress.enter');
|
||||
expect(wrapper.emitted('blur')).toBeFalsy();
|
||||
|
||||
wrapper.setProps({ type: 'textarea' });
|
||||
wrapper.find('textarea').element.focus();
|
||||
wrapper.find('textarea').trigger('keypress.enter');
|
||||
expect(wrapper.emitted('blur')).toBeFalsy();
|
||||
|
||||
wrapper.setProps({ type: 'search' });
|
||||
wrapper.find('input').element.focus();
|
||||
wrapper.find('input').trigger('keypress.enter');
|
||||
expect(wrapper.emitted('blur')).toBeTruthy();
|
||||
});
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
export function formatNumber(value: string, allowDot: boolean) {
|
||||
if (allowDot) {
|
||||
const dotIndex = value.indexOf('.');
|
||||
|
||||
if (dotIndex > -1) {
|
||||
value =
|
||||
value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, '');
|
||||
}
|
||||
} else {
|
||||
value = value.split('.')[0];
|
||||
}
|
||||
|
||||
const regExp = allowDot ? /[^0-9.]/g : /\D/g;
|
||||
|
||||
return value.replace(regExp, '');
|
||||
}
|
||||
+8
-7
@@ -429,11 +429,12 @@ export default {
|
||||
| input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
|
||||
| validate-trigger `v2.5.2` | When to validate the form，can be set to `onChange`、`onSubmit` | _string_ | `onBlur` |
|
||||
| colon | Whether to display `:` after label | _boolean_ | `false` |
|
||||
| colon | Whether to display colon after label | _boolean_ | `false` |
|
||||
| validate-first | Whether to stop the validation when a rule fails | _boolean_ | `false` |
|
||||
| scroll-to-error `v2.5.2` | Whether to scroll to the error field when validation failed | _boolean_ | `false` |
|
||||
| show-error `v2.6.0` | Whether to highlight input when validation failed | _boolean_ | `true` |
|
||||
| show-error-message `v2.5.8` | Whether to show error message when validation failed | _boolean_ | `true` |
|
||||
| submit-on-enter `v2.8.3` | Whether to submit form on enter | _boolean_ | `true` |
|
||||
|
||||
### Data Structure of Rule
|
||||
|
||||
@@ -457,12 +458,12 @@ export default {
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ---------------------- | ---------------- | --------------- | ------------ |
|
||||
| submit | Submit form | - | - |
|
||||
| validate | Validate form | _name?: string_ | _Promise_ |
|
||||
| resetValidation | Reset validation | _name?: string_ | - |
|
||||
| scrollToField `v2.5.2` | Scroll to field | _name: string_ | - |
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
| submit | Submit form | - | - |
|
||||
| validate | Validate form | _name?: string_ | _Promise_ |
|
||||
| resetValidation | Reset validation | _name?: string_ | - |
|
||||
| scrollToField `v2.8.3` | Scroll to field | _name: string, alignToTop: boolean_ | - |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -469,6 +469,7 @@ export default {
|
||||
| scroll-to-error `v2.5.2` | 是否在提交表单且校验不通过时滚动至错误的表单项 | _boolean_ | `false` |
|
||||
| show-error `v2.6.0` | 是否在校验不通过时标红输入框 | _boolean_ | `true` |
|
||||
| show-error-message `v2.5.8` | 是否在校验不通过时在输入框下方展示错误提示 | _boolean_ | `true` |
|
||||
| submit-on-enter `v2.8.3` | 是否在按下回车键时提交表单 | _boolean_ | `true` |
|
||||
|
||||
> 表单项的 API 参见：[Field 组件](#/zh-CN/field#api)
|
||||
|
||||
@@ -501,7 +502,7 @@ export default {
|
||||
| submit | 提交表单，与点击提交按钮的效果等价 | - | - |
|
||||
| validate | 验证表单，支持传入`name`来验证单个表单项 | _name?: string_ | _Promise_ |
|
||||
| resetValidation | 重置表单项的验证提示，支持传入`name`来重置单个表单项 | _name?: string_ | - |
|
||||
| scrollToField `v2.5.2` | 滚动到对应表单项的位置 | _name: string_ | - |
|
||||
| scrollToField `v2.8.3` | 滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部 | _name: string, alignToTop: boolean_ | - |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -1,23 +1,26 @@
|
||||
<template>
|
||||
<div class="van-hairline--bottom">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
:border="false"
|
||||
:label="t('picker')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showArea = true"
|
||||
/>
|
||||
<van-popup v-model="showArea" position="bottom">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
:label="t('picker')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showArea = true"
|
||||
>
|
||||
<van-popup
|
||||
v-model="showArea"
|
||||
slot="extra"
|
||||
position="bottom"
|
||||
get-container="body"
|
||||
>
|
||||
<van-area
|
||||
:area-list="t('areaList')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</van-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
:label="t('calendar')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showCalendar = true"
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
:label="t('calendar')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showCalendar = true"
|
||||
>
|
||||
<van-calendar
|
||||
v-model="showCalendar"
|
||||
slot="extra"
|
||||
get-container="body"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
|
||||
</div>
|
||||
</van-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,23 +1,26 @@
|
||||
<template>
|
||||
<div class="van-hairline--bottom">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
:border="false"
|
||||
:label="t('label')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
:label="t('label')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
>
|
||||
<van-popup
|
||||
v-model="showPicker"
|
||||
slot="extra"
|
||||
position="bottom"
|
||||
get-container="body"
|
||||
>
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</van-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
<template>
|
||||
<div class="van-hairline--bottom">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
:border="false"
|
||||
:label="t('picker')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model="showPicker" position="bottom">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
:label="t('picker')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
>
|
||||
<van-popup
|
||||
v-model="showPicker"
|
||||
slot="extra"
|
||||
position="bottom"
|
||||
get-container="body"
|
||||
>
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:columns="t('textColumns')"
|
||||
@@ -18,7 +21,7 @@
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</van-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -67,7 +67,7 @@ export default {
|
||||
|
||||
methods: {
|
||||
validator(val) {
|
||||
return val === '1234';
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
|
||||
asyncValidator(val) {
|
||||
|
||||
@@ -19,14 +19,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-form {
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
|
||||
.van-hairline--bottom::after {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+6
-2
@@ -12,6 +12,10 @@ export default createComponent({
|
||||
scrollToError: Boolean,
|
||||
validateFirst: Boolean,
|
||||
errorMessageAlign: String,
|
||||
submitOnEnter: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
validateTrigger: {
|
||||
type: String,
|
||||
default: 'onBlur',
|
||||
@@ -119,10 +123,10 @@ export default createComponent({
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
scrollToField(name) {
|
||||
scrollToField(name, options) {
|
||||
this.fields.forEach((item) => {
|
||||
if (item.name === name) {
|
||||
item.$el.scrollIntoView();
|
||||
item.$el.scrollIntoView(options);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@@ -16,9 +16,11 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
@@ -41,9 +43,11 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__body"><input type="text" name="asyncValidator" placeholder="异步函数校验" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
@@ -184,45 +188,35 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-hairline--bottom">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
|
||||
<div class="van-cell__title van-field__label"><span>选择器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>选择器</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-hairline--bottom">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
|
||||
<div class="van-cell__title van-field__label"><span>时间选择</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>时间选择</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-hairline--bottom">
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区选择</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>地区选择</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>日历</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>日历</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
|
||||
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
提交
|
||||
</span></button></div>
|
||||
</span></div>
|
||||
</button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,8 @@ exports[`failed event 1`] = `
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">B failed</div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content"></div>
|
||||
</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
@@ -12,6 +12,8 @@ exports[`resetValidation method - reset one field 1`] = `
|
||||
<div class="van-field__body"><input type="text" name="B" class="van-field__control"></div>
|
||||
<div class="van-field__error-message">B failed</div>
|
||||
</div>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content"></div>
|
||||
</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
@@ -93,6 +93,8 @@ exports[`validate-first prop 1`] = `
|
||||
<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>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal"></button>
|
||||
</div> <button type="submit" class="van-button van-button--default van-button--normal">
|
||||
<div class="van-button__content"></div>
|
||||
</button>
|
||||
</form>
|
||||
`;
|
||||
|
||||
@@ -5,19 +5,18 @@
|
||||
height: @goods-action-button-height;
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: @font-size-md;
|
||||
line-height: @goods-action-button-height;
|
||||
border: none;
|
||||
|
||||
&--first {
|
||||
margin-left: 5px;
|
||||
border-top-left-radius: @goods-action-button-height / 2;
|
||||
border-bottom-left-radius: @goods-action-button-height / 2;
|
||||
border-top-left-radius: @border-radius-max;
|
||||
border-bottom-left-radius: @border-radius-max;
|
||||
}
|
||||
|
||||
&--last {
|
||||
margin-right: 5px;
|
||||
border-top-right-radius: @goods-action-button-height / 2;
|
||||
border-bottom-right-radius: @goods-action-button-height / 2;
|
||||
border-top-right-radius: @border-radius-max;
|
||||
border-bottom-right-radius: @border-radius-max;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
|
||||
@@ -19,16 +19,8 @@ Vue.use(GoodsActionIcon);
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
|
||||
<van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
|
||||
<van-goods-action-button
|
||||
type="warning"
|
||||
text="Button1"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
text="Button2"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
|
||||
<van-goods-action-button type="danger" text="Button" @click="onClickButton" />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
@@ -56,8 +48,8 @@ Use `badge` prop to show badge in icon
|
||||
<van-goods-action-icon icon="chat-o" text="Icon1" dot />
|
||||
<van-goods-action-icon icon="cart-o" text="Icon2" badge="5" />
|
||||
<van-goods-action-icon icon="shop-o" text="Icon3" badge="12" />
|
||||
<van-goods-action-button type="warning" text="Button1" />
|
||||
<van-goods-action-button type="danger" text="Button2" />
|
||||
<van-goods-action-button type="warning" text="Button" />
|
||||
<van-goods-action-button type="danger" text="Button" />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
@@ -68,8 +60,8 @@ Use `badge` prop to show badge in icon
|
||||
<van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
|
||||
<van-goods-action-icon icon="cart-o" text="Icon2" />
|
||||
<van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
|
||||
<van-goods-action-button type="warning" text="Button1" />
|
||||
<van-goods-action-button type="danger" text="Button2" />
|
||||
<van-goods-action-button type="warning" text="Button" />
|
||||
<van-goods-action-button type="danger" text="Button" />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
@@ -79,8 +71,8 @@ Use `badge` prop to show badge in icon
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" text="Icon1" />
|
||||
<van-goods-action-icon icon="shop-o" text="Icon2" />
|
||||
<van-goods-action-button color="#be99ff" type="warning" text="Button1" />
|
||||
<van-goods-action-button color="#7232dd" type="danger" text="Button2" />
|
||||
<van-goods-action-button color="#be99ff" type="warning" text="Button" />
|
||||
<van-goods-action-button color="#7232dd" type="danger" text="Button" />
|
||||
</van-goods-action>
|
||||
```
|
||||
|
||||
|
||||
@@ -19,11 +19,7 @@ Vue.use(GoodsActionIcon);
|
||||
<van-goods-action>
|
||||
<van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
|
||||
<van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
|
||||
<van-goods-action-button
|
||||
type="warning"
|
||||
text="加入购物车"
|
||||
@click="onClickButton"
|
||||
/>
|
||||
<van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
text="立即购买"
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
:text="t('icon2')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="warning"
|
||||
:text="t('button1')"
|
||||
@click="onClickButton"
|
||||
<van-goods-action-icon
|
||||
icon="shop-o"
|
||||
:text="t('icon3')"
|
||||
@click="onClickIcon"
|
||||
/>
|
||||
<van-goods-action-button
|
||||
type="danger"
|
||||
@@ -92,8 +92,8 @@ export default {
|
||||
icon1: 'Icon1',
|
||||
icon2: 'Icon2',
|
||||
icon3: 'Icon3',
|
||||
button1: 'Button1',
|
||||
button2: 'Button2',
|
||||
button1: 'Button',
|
||||
button2: 'Button',
|
||||
iconBadge: 'Icon Badge',
|
||||
collected: 'Collected',
|
||||
clickIcon: 'Click Icon',
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user