Merge branch 'dev' into next
This commit is contained in:
chenjiahan
+1
-1
@@ -64,7 +64,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
| area-list | Area list data | _object_ | - |
|
||||
| columns-placeholder `v2.2.5` | Placeholder of columns | _string[]_ | `[]` |
|
||||
| loading | Whether to show loading prompt | _boolean_ | `false` |
|
||||
| item-height | Option height | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| columns-num | Level of picker | _number \| string_ | `3` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
@@ -64,7 +64,7 @@ Vue.use(Area);
|
||||
| area-list | 省市区数据，格式见下方 | _object_ | - |
|
||||
| columns-placeholder `v2.2.5` | 列占位提示文字 | _string[]_ | `[]` |
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| item-height | 选项高度 | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
|
||||
+2
-4
@@ -185,10 +185,8 @@ export default createComponent({
|
||||
this.code = values[index].code;
|
||||
this.setValues();
|
||||
|
||||
let getValues = picker.getValues();
|
||||
getValues = this.parseOutputValues(getValues);
|
||||
|
||||
this.$emit('change', picker, getValues, index);
|
||||
const parsedValues = this.parseOutputValues(picker.getValues());
|
||||
this.$emit('change', picker, parsedValues, index);
|
||||
},
|
||||
|
||||
onConfirm(values, index) {
|
||||
|
||||
@@ -11,168 +11,168 @@ exports[`renders demo correctly 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">朝阳区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">丰台区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">石景山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海淀区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">门头沟区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">房山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">通州区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">顺义区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">昌平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">大兴区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">怀柔区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">平谷区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">密云区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">延庆区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -192,183 +192,183 @@ exports[`renders demo correctly 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">杭州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">温州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">绍兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">金华市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">衢州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">舟山市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">鹿城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">龙湾区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">瓯海区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">洞头区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">永嘉县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">平阳县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">苍南县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">文成县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">泰顺县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">瑞安市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">乐清市</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -388,116 +388,116 @@ exports[`renders demo correctly 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -517,112 +517,112 @@ exports[`renders demo correctly 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">请选择</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -7,30 +7,30 @@ exports[`change option 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -49,30 +49,30 @@ exports[`change option 2`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -91,30 +91,30 @@ exports[`change option 3`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -133,20 +133,20 @@ exports[`columns-num prop 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -185,27 +185,27 @@ exports[`reset method 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">蓟县</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -224,30 +224,30 @@ exports[`reset method 2`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -287,30 +287,30 @@ exports[`watch areaList & code 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -329,30 +329,30 @@ exports[`watch areaList & code 2`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -371,30 +371,30 @@ exports[`watch areaList & code 3`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -110,6 +110,7 @@
|
||||
|
||||
&__loading {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
|
||||
@@ -285,7 +285,7 @@ export default createComponent({
|
||||
} else if (compareToStart === -1) {
|
||||
this.select([date, null]);
|
||||
} else if (this.allowSameDay) {
|
||||
this.select([date, date]);
|
||||
this.select([date, date], true);
|
||||
}
|
||||
} else {
|
||||
this.select([date, null]);
|
||||
|
||||
@@ -47,6 +47,8 @@ exports[`lazy-render 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>
|
||||
`;
|
||||
|
||||
@@ -181,7 +181,7 @@ test('lazy-render prop', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test.only('month-show event', async () => {
|
||||
test('month-show event', async () => {
|
||||
const wrapper = mount(Calendar, {
|
||||
propsData: {
|
||||
value: true,
|
||||
|
||||
@@ -125,7 +125,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genTitle() {
|
||||
const { disabled, expanded } = this;
|
||||
const { border, disabled, expanded } = this;
|
||||
|
||||
const titleSlots = CELL_SLOTS.reduce((slots, name) => {
|
||||
if (this.slots(name)) {
|
||||
@@ -142,7 +142,7 @@ export default createComponent({
|
||||
return (
|
||||
<Cell
|
||||
role="button"
|
||||
class={bem('title', { disabled, expanded })}
|
||||
class={bem('title', { disabled, expanded, borderless: !border })}
|
||||
onClick={this.onClick}
|
||||
scopedSlots={titleSlots}
|
||||
tabindex={disabled ? -1 : 0}
|
||||
@@ -172,7 +172,7 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={[bem({ border: this.index })]}>
|
||||
<div class={[bem({ border: this.index && this.border })]}>
|
||||
{this.genTitle()}
|
||||
{this.genContent()}
|
||||
</div>
|
||||
|
||||
@@ -31,6 +31,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--borderless {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
|
||||
@@ -198,7 +198,7 @@ export default {
|
||||
| loading | Whether to show loading prompt | _boolean_ | `false` |
|
||||
| filter | Option filter | _(type, vals) => vals_ | - |
|
||||
| formatter | Option text formatter | _(type, val) => val_ | - |
|
||||
| item-height | Option height | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 选择年月
|
||||
### 选择月日
|
||||
|
||||
将 type 设置为 `month-day` 即可选择月份和日期（从 2.8.4 版本开始支持）
|
||||
|
||||
@@ -205,7 +205,7 @@ export default {
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| filter | 选项过滤函数 | _(type, vals) => vals_ | - |
|
||||
| formatter | 选项格式化函数 | _(type, val) => val_ | - |
|
||||
| item-height | 选项高度 | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('monthDayType')">
|
||||
<demo-block v-if="!isWeapp" :title="t('monthDayType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.monthDayType"
|
||||
type="month-day"
|
||||
|
||||
@@ -7,98 +7,98 @@ exports[`filter prop 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">35</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">45</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">55</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -117,101 +117,101 @@ exports[`formatter prop 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">2010 year</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">05 month</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">05 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">25 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">25 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">35 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">45 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">55 minute</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -7,20 +7,20 @@ exports[`time type 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">59</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -7,41 +7,41 @@ exports[`filter prop 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -60,20 +60,20 @@ exports[`format initial value 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">59</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -92,41 +92,41 @@ exports[`formatter prop 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -145,26 +145,26 @@ exports[`max-hour & max-minute 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
+31
-17
@@ -37,6 +37,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
allowHtml: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -124,6 +128,31 @@ export default createComponent({
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
genContent(hasTitle, messageSlot) {
|
||||
if (messageSlot) {
|
||||
return <div class={bem('content')}>{messageSlot}</div>;
|
||||
}
|
||||
|
||||
const { message, messageAlign } = this;
|
||||
if (message) {
|
||||
const data = {
|
||||
class: bem('message', {
|
||||
'has-title': hasTitle,
|
||||
[messageAlign]: messageAlign,
|
||||
}),
|
||||
domProps: {
|
||||
[this.allowHtml ? 'innerHTML' : 'textContent']: message,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={bem('content')}>
|
||||
<div {...data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
@@ -131,30 +160,15 @@ export default createComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
const { message, messageAlign } = this;
|
||||
const { message } = this;
|
||||
const messageSlot = this.slots();
|
||||
const title = this.slots('title') || this.title;
|
||||
|
||||
const Title = title && (
|
||||
<div class={bem('header', { isolated: !message && !messageSlot })}>
|
||||
{title}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Content = (messageSlot || message) && (
|
||||
<div class={bem('content')}>
|
||||
{messageSlot || (
|
||||
<div
|
||||
domPropsInnerHTML={message}
|
||||
class={bem('message', {
|
||||
'has-title': title,
|
||||
[messageAlign]: messageAlign,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<transition
|
||||
name={this.transition}
|
||||
@@ -169,7 +183,7 @@ export default createComponent({
|
||||
style={{ width: addUnit(this.width) }}
|
||||
>
|
||||
{Title}
|
||||
{Content}
|
||||
{this.genContent(title, messageSlot)}
|
||||
{this.genButtons()}
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
@@ -13,7 +13,7 @@ Vue.use(Dialog);
|
||||
|
||||
### Alert dialog
|
||||
|
||||
Used to prompt for some messages, only including one confirm button
|
||||
Used to prompt for some messages, only including one confirm button.
|
||||
|
||||
```js
|
||||
Dialog.alert({
|
||||
@@ -32,7 +32,7 @@ Dialog.alert({
|
||||
|
||||
### Confirm dialog
|
||||
|
||||
Used to confirm some messages, including a confirm button and a cancel button
|
||||
Used to confirm some messages, including a confirm button and a cancel button.
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
@@ -65,9 +65,9 @@ Dialog.confirm({
|
||||
});
|
||||
```
|
||||
|
||||
### \$dialog Method
|
||||
### Global Method
|
||||
|
||||
After import the Dialog component, the \$dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
After import the Dialog component, the `$dialog` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
|
||||
```js
|
||||
export default {
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
|
||||
弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。
|
||||
|
||||
弹出框组件支持函数调用和组件调用两种方式
|
||||
弹出框组件支持函数调用和组件调用两种方式。
|
||||
|
||||
### 函数调用
|
||||
|
||||
Dialog 是一个函数，调用后展示提示弹窗
|
||||
Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
@@ -18,7 +18,7 @@ Dialog({ message: '提示' });
|
||||
|
||||
### 组件调用
|
||||
|
||||
通过组件调用 Dialog 时，可以通过下面的方式进行注册
|
||||
通过组件调用 Dialog 时，可以通过下面的方式进行注册：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
|
||||
### 消息提示
|
||||
|
||||
用于提示一些消息，只包含一个确认按钮
|
||||
用于提示一些消息，只包含一个确认按钮。
|
||||
|
||||
```js
|
||||
Dialog.alert({
|
||||
@@ -58,7 +58,7 @@ Dialog.alert({
|
||||
|
||||
### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
```js
|
||||
Dialog.confirm({
|
||||
@@ -75,6 +75,8 @@ Dialog.confirm({
|
||||
|
||||
### 异步关闭
|
||||
|
||||
通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
|
||||
|
||||
```js
|
||||
function beforeClose(action, done) {
|
||||
if (action === 'confirm') {
|
||||
@@ -93,7 +95,7 @@ Dialog.confirm({
|
||||
|
||||
### 全局方法
|
||||
|
||||
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 \$dialog 方法，在所有组件内部都可以直接调用此方法
|
||||
引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 `$dialog` 方法，在所有组件内部都可以直接调用此方法。
|
||||
|
||||
```js
|
||||
export default {
|
||||
@@ -107,7 +109,7 @@ export default {
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式
|
||||
如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。
|
||||
|
||||
```html
|
||||
<van-dialog v-model="show" title="标题" show-cancel-button>
|
||||
|
||||
@@ -51,6 +51,7 @@ Dialog.defaultOptions = {
|
||||
message: '',
|
||||
overlay: true,
|
||||
className: '',
|
||||
allowHtml: true,
|
||||
lockScroll: true,
|
||||
transition: 'van-dialog-bounce',
|
||||
beforeClose: null,
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`allow-html prop 1`] = `<div class="van-dialog__message"><span>text</span></div>`;
|
||||
|
||||
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;">
|
||||
|
||||
@@ -127,6 +127,17 @@ test('title slot', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('allow-html prop', () => {
|
||||
const wrapper = mount(DialogComponent, {
|
||||
propsData: {
|
||||
value: true,
|
||||
message: '<span>text</span>',
|
||||
allowHtml: false,
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-dialog__message')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('open & close event', () => {
|
||||
const wrapper = mount(DialogComponent);
|
||||
wrapper.vm.value = true;
|
||||
|
||||
@@ -25,6 +25,10 @@ export default createComponent({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
lazyRender: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -155,8 +159,9 @@ export default createComponent({
|
||||
class={bem('content')}
|
||||
position={direction === 'down' ? 'top' : 'bottom'}
|
||||
duration={this.transition ? duration : 0}
|
||||
closeOnClickOverlay={closeOnClickOverlay}
|
||||
lazyRender={this.lazyRender}
|
||||
overlayStyle={{ position: 'absolute' }}
|
||||
closeOnClickOverlay={closeOnClickOverlay}
|
||||
onOpen={this.onOpen}
|
||||
onClose={this.onClose}
|
||||
onOpened={this.onOpened}
|
||||
|
||||
@@ -128,6 +128,7 @@ Use `active-color` prop to custom active color of the title and options
|
||||
| title | Item title | _string_ | Text of selected option |
|
||||
| options | Options | _Option[]_ | `[]` |
|
||||
| disabled | Whether to disable dropdown item | _boolean_ | `false` |
|
||||
| lazy-render `v2.8.5` | Whether to lazy render util opened | _boolean_ | `true` |
|
||||
| title-class | Title class | _string_ | - |
|
||||
| get-container `v2.2.4` | Return the mount node for menu | _string \| () => Element_ | - |
|
||||
|
||||
|
||||
@@ -132,6 +132,7 @@ export default {
|
||||
| title | 菜单项标题 | _string_ | 当前选中项文字 |
|
||||
| options | 选项数组 | _Option[]_ | `[]` |
|
||||
| disabled | 是否禁用菜单 | _boolean_ | `false` |
|
||||
| lazy-render `v2.8.5` | 是否在首次展开时才渲染菜单内容 | _boolean_ | `true` |
|
||||
| title-class | 标题额外类名 | _string_ | - |
|
||||
| get-container `v2.2.4` | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
|
||||
+15
-6
@@ -139,10 +139,17 @@ Use `formatter` prop to format the input value
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
v-model="value1"
|
||||
label="Text"
|
||||
:formatter="formatter"
|
||||
placeholder="Format Value"
|
||||
placeholder="Format On Change"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
label="Text"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
placeholder="Format On Blur"
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -150,7 +157,8 @@ Use `formatter` prop to format the input value
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -198,8 +206,8 @@ Use `input-align` prop to align the input value
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="Text"
|
||||
:placeholder="Input Align Right"
|
||||
label="Text"
|
||||
placeholder="Input Align Right"
|
||||
input-align="right"
|
||||
/>
|
||||
```
|
||||
@@ -216,7 +224,7 @@ Use `input-align` prop to align the input value
|
||||
| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | _string_ | `text` |
|
||||
| size | Size，can be set to `large` | _string_ | - |
|
||||
| maxlength | Max length of value | _number \| string_ | - |
|
||||
| placeholder | Placeholder | _string_ | - |
|
||||
| placeholder | Input placeholder | _string_ | - |
|
||||
| border | Whether to show inner border | _boolean_ | `true` |
|
||||
| disabled | Whether to disable field | _boolean_ | `false` |
|
||||
| readonly | Whether to be readonly | _boolean_ | `false` |
|
||||
@@ -230,6 +238,7 @@ Use `input-align` prop to align the input value
|
||||
| error | Whether to show error info | _boolean_ | `false` |
|
||||
| error-message | Error message | _string_ | - |
|
||||
| formatter `v2.4.2` | Input value formatter | _Function_ | - |
|
||||
| format-trigger `v2.8.7` | When to format value，can be set to `onBlur` | _string_ | `onChange` |
|
||||
| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` |
|
||||
| label-class | Label className | _any_ | - |
|
||||
| label-width | Label width | _number \| string_ | `90px` |
|
||||
|
||||
+25
-16
@@ -17,7 +17,7 @@ Vue.use(Field);
|
||||
|
||||
### 基础用法
|
||||
|
||||
可以通过`v-model`双向绑定输入框的值，通过`placeholder`设置占位提示文字
|
||||
可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
|
||||
|
||||
```html
|
||||
<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
|
||||
### 自定义类型
|
||||
|
||||
根据`type`属性定义不同类型的输入框，默认值为`text`
|
||||
根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
|
||||
|
||||
```html
|
||||
<!-- 输入任意文本 -->
|
||||
@@ -71,7 +71,7 @@ export default {
|
||||
|
||||
### 禁用输入框
|
||||
|
||||
通过`readonly`将输入框设置为只读状态，通过`disabled`将输入框设置为禁用状态
|
||||
通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@@ -82,7 +82,7 @@ export default {
|
||||
|
||||
### 显示图标
|
||||
|
||||
通过`left-icon`和`right-icon`配置输入框两侧的图标，通过设置`clearable`在输入过程中展示清除图标
|
||||
通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@@ -116,7 +116,7 @@ export default {
|
||||
|
||||
### 错误提示
|
||||
|
||||
设置`required`属性表示这是一个必填项，可以配合`error`或`error-message`属性显示对应的错误提示
|
||||
设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `error-message` 属性显示对应的错误提示。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@@ -139,7 +139,7 @@ export default {
|
||||
|
||||
### 插入按钮
|
||||
|
||||
通过 button 插槽可以在输入框尾部插入按钮
|
||||
通过 button 插槽可以在输入框尾部插入按钮。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@@ -157,14 +157,21 @@ export default {
|
||||
|
||||
### 格式化输入内容
|
||||
|
||||
通过`formatter`属性可以对输入的内容进行格式化
|
||||
通过 `formatter` 属性可以对输入的内容进行格式化，通过 `format-trigger` 属性可以指定执行格式化的时机，默认在输入时进行格式化。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
v-model="value1"
|
||||
label="文本"
|
||||
:formatter="formatter"
|
||||
placeholder="格式化输入内容"
|
||||
placeholder="在输入时执行格式化"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
label="文本"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
placeholder="在失焦时执行格式化"
|
||||
/>
|
||||
```
|
||||
|
||||
@@ -172,7 +179,8 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@@ -186,7 +194,7 @@ export default {
|
||||
|
||||
### 高度自适应
|
||||
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
对于 textarea，可以通过 `autosize` 属性设置高度自适应。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@@ -201,7 +209,7 @@ export default {
|
||||
|
||||
### 显示字数统计
|
||||
|
||||
设置`maxlength`和`show-word-limit`属性后会在底部显示字数统计
|
||||
设置 `maxlength` 和 `show-word-limit` 属性后会在底部显示字数统计。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@@ -218,13 +226,13 @@ export default {
|
||||
|
||||
### 输入框内容对齐
|
||||
|
||||
通过`input-align`属性可以设置输入框内容的对齐方式，可选值为`center`、`right`
|
||||
通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="文本"
|
||||
:placeholder="输入框内容右对齐"
|
||||
label="文本"
|
||||
placeholder="输入框内容右对齐"
|
||||
input-align="right"
|
||||
/>
|
||||
```
|
||||
@@ -241,7 +249,7 @@ export default {
|
||||
| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | _string_ | `text` |
|
||||
| size | 大小，可选值为 `large` | _string_ | - |
|
||||
| maxlength | 输入的最大字符数 | _number \| string_ | - |
|
||||
| placeholder | 占位提示文字 | _string_ | - |
|
||||
| placeholder | 输入框占位提示文字 | _string_ | - |
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| disabled | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
@@ -255,6 +263,7 @@ export default {
|
||||
| error | 是否将输入内容标红 | _boolean_ | `false` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | _string_ | - |
|
||||
| formatter `v2.4.2` | 输入内容格式化函数 | _Function_ | - |
|
||||
| format-trigger `v2.8.7` | 格式化函数触发的时机，可选值为 `onBlur` | _string_ | `onChange` |
|
||||
| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
|
||||
| label-class | 左侧文本额外类名 | _any_ | - |
|
||||
| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `90px` |
|
||||
|
||||
@@ -1,10 +1,17 @@
|
||||
<template>
|
||||
<demo-block v-if="!isWeapp" :title="t('formatValue')">
|
||||
<van-field
|
||||
v-model="formatValue"
|
||||
v-model="value1"
|
||||
:label="t('text')"
|
||||
:formatter="formatter"
|
||||
:placeholder="t('formatValue')"
|
||||
:placeholder="t('formatOnChange')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
:label="t('text')"
|
||||
:formatter="formatter"
|
||||
format-trigger="onBlur"
|
||||
:placeholder="t('formatOnBlur')"
|
||||
/>
|
||||
</demo-block>
|
||||
</template>
|
||||
@@ -15,16 +22,21 @@ export default {
|
||||
'zh-CN': {
|
||||
text: '文本',
|
||||
formatValue: '格式化输入内容',
|
||||
formatOnBlur: '在失焦时执行格式化',
|
||||
formatOnChange: '在输入时执行格式化',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Text',
|
||||
formatValue: 'Format Value',
|
||||
formatOnBlur: 'Format On Blur',
|
||||
formatOnChange: 'Format On Change',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formatValue: '',
|
||||
value1: '',
|
||||
value2: '',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
+40
-35
@@ -1,14 +1,14 @@
|
||||
// Utils
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { formatNumber } from '../utils/format/number';
|
||||
import { resetScroll } from '../utils/dom/reset-scroll';
|
||||
import { formatNumber } from '../utils/format/number';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import {
|
||||
createNamespace,
|
||||
isObject,
|
||||
isDef,
|
||||
addUnit,
|
||||
isObject,
|
||||
isPromise,
|
||||
isFunction,
|
||||
createNamespace,
|
||||
} from '../utils';
|
||||
|
||||
// Components
|
||||
@@ -53,6 +53,10 @@ export default createComponent({
|
||||
errorMessage: String,
|
||||
errorMessageAlign: String,
|
||||
showWordLimit: Boolean,
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
@@ -65,17 +69,23 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
formatTrigger: {
|
||||
type: String,
|
||||
default: 'onChange',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
focused: false,
|
||||
validateFailed: false,
|
||||
validateMessage: '',
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value() {
|
||||
this.updateValue(this.value);
|
||||
this.resetValidation();
|
||||
this.validateWithTrigger('onChange');
|
||||
this.$nextTick(this.adjustSize);
|
||||
@@ -83,7 +93,7 @@ export default createComponent({
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.format();
|
||||
this.updateValue(this.value, this.formatTrigger);
|
||||
this.$nextTick(this.adjustSize);
|
||||
|
||||
if (this.vanForm) {
|
||||
@@ -112,7 +122,7 @@ export default createComponent({
|
||||
if (this.error !== null) {
|
||||
return this.error;
|
||||
}
|
||||
if (this.vanForm && this.vanForm.showError && this.validateMessage) {
|
||||
if (this.vanForm && this.vanForm.showError && this.validateFailed) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
@@ -203,7 +213,7 @@ export default createComponent({
|
||||
return rules.reduce(
|
||||
(promise, rule) =>
|
||||
promise.then(() => {
|
||||
if (this.validateMessage) {
|
||||
if (this.validateFailed) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -214,6 +224,7 @@ export default createComponent({
|
||||
}
|
||||
|
||||
if (!this.runSyncRule(value, rule)) {
|
||||
this.validateFailed = true;
|
||||
this.validateMessage = this.getRuleMessage(value, rule);
|
||||
return;
|
||||
}
|
||||
@@ -221,6 +232,7 @@ export default createComponent({
|
||||
if (rule.validator) {
|
||||
return this.runValidator(value, rule).then((result) => {
|
||||
if (result === false) {
|
||||
this.validateFailed = true;
|
||||
this.validateMessage = this.getRuleMessage(value, rule);
|
||||
}
|
||||
});
|
||||
@@ -237,7 +249,7 @@ export default createComponent({
|
||||
}
|
||||
|
||||
this.runRules(rules).then(() => {
|
||||
if (this.validateMessage) {
|
||||
if (this.validateFailed) {
|
||||
resolve({
|
||||
name: this.name,
|
||||
message: this.validateMessage,
|
||||
@@ -266,46 +278,39 @@ export default createComponent({
|
||||
|
||||
resetValidation() {
|
||||
if (this.validateMessage) {
|
||||
this.validateFailed = false;
|
||||
this.validateMessage = '';
|
||||
}
|
||||
},
|
||||
|
||||
format(target = this.$refs.input) {
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
|
||||
let { value } = target;
|
||||
const { maxlength } = this;
|
||||
updateValue(value, trigger = 'onChange') {
|
||||
value = isDef(value) ? String(value) : '';
|
||||
|
||||
// native maxlength not work when type is number
|
||||
const { maxlength } = this;
|
||||
if (isDef(maxlength) && value.length > maxlength) {
|
||||
value = value.slice(0, maxlength);
|
||||
target.value = value;
|
||||
}
|
||||
|
||||
if (this.type === 'number' || this.type === 'digit') {
|
||||
const originValue = value;
|
||||
const allowDot = this.type === 'number';
|
||||
|
||||
value = formatNumber(value, allowDot);
|
||||
|
||||
if (value !== originValue) {
|
||||
target.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.formatter) {
|
||||
const originValue = value;
|
||||
|
||||
if (this.formatter && trigger === this.formatTrigger) {
|
||||
value = this.formatter(value);
|
||||
|
||||
if (value !== originValue) {
|
||||
target.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
return value;
|
||||
const { input } = this.$refs;
|
||||
if (input && value !== input.value) {
|
||||
input.value = value;
|
||||
}
|
||||
|
||||
if (value !== this.value) {
|
||||
this.$emit('input', value);
|
||||
}
|
||||
|
||||
this.currentValue = value;
|
||||
},
|
||||
|
||||
onInput(event) {
|
||||
@@ -314,7 +319,7 @@ export default createComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit('input', this.format(event.target));
|
||||
this.updateValue(event.target.value);
|
||||
},
|
||||
|
||||
onFocus(event) {
|
||||
@@ -330,6 +335,7 @@ export default createComponent({
|
||||
|
||||
onBlur(event) {
|
||||
this.focused = false;
|
||||
this.updateValue(this.value, 'onBlur');
|
||||
this.$emit('blur', event);
|
||||
this.validateWithTrigger('onBlur');
|
||||
resetScroll();
|
||||
@@ -491,13 +497,11 @@ export default createComponent({
|
||||
|
||||
genWordLimit() {
|
||||
if (this.showWordLimit && this.maxlength) {
|
||||
const count = this.value.length;
|
||||
const full = count >= this.maxlength;
|
||||
const count = (this.value || '').length;
|
||||
|
||||
return (
|
||||
<div class={bem('word-limit')}>
|
||||
<span class={bem('word-num', { full })}>{count}</span>/
|
||||
{this.maxlength}
|
||||
<span class={bem('word-num')}>{count}</span>/{this.maxlength}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -576,6 +580,7 @@ export default createComponent({
|
||||
arrowDirection={this.arrowDirection}
|
||||
class={bem({
|
||||
error: this.showError,
|
||||
disabled: this.disabled,
|
||||
[`label-${labelAlign}`]: labelAlign,
|
||||
'min-height': this.type === 'textarea' && !this.autosize,
|
||||
})}
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-field {
|
||||
&--disabled {
|
||||
color: @field-disabled-text-color;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: none;
|
||||
box-sizing: border-box;
|
||||
width: @field-label-width;
|
||||
text-align: left;
|
||||
|
||||
&--center {
|
||||
text-align: center;
|
||||
@@ -146,12 +151,6 @@
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__word-num {
|
||||
&--full {
|
||||
color: @field-word-num-full-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--error {
|
||||
.van-field__control {
|
||||
&,
|
||||
|
||||
@@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field">
|
||||
<div class="van-cell van-field van-field--disabled">
|
||||
<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" disabled="disabled" class="van-field__control"></div>
|
||||
@@ -112,7 +112,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-cell 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" placeholder="格式化输入内容" class="van-field__control"></div>
|
||||
<div class="van-field__body"><input type="text" placeholder="在输入时执行格式化" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell 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" placeholder="在失焦时执行格式化" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -74,7 +74,25 @@ exports[`reach max word-limit 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 class="van-field__word-limit"><span class="van-field__word-num van-field__word-num--full">3</span>/3</div>
|
||||
<div class="van-field__word-limit"><span class="van-field__word-num">3</span>/3</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reach max word-limit null 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 class="van-field__word-limit"><span class="van-field__word-num">0</span>/3</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`reach max word-limit undefined 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 class="van-field__word-limit"><span class="van-field__word-num">0</span>/3</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -289,16 +289,37 @@ test('formatter prop', () => {
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('abc');
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '123efg';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual('efg');
|
||||
});
|
||||
|
||||
test('format-trigger prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'abc123',
|
||||
formatTrigger: 'onBlur',
|
||||
formatter: (value) => value.replace(/\d/g, ''),
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.vm.$on('input', (value) => {
|
||||
wrapper.setProps({ value });
|
||||
});
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('abc');
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '123efg';
|
||||
input.trigger('input');
|
||||
expect(wrapper.emitted('input')[1][0]).toEqual('123efg');
|
||||
input.trigger('blur');
|
||||
expect(wrapper.emitted('input')[2][0]).toEqual('efg');
|
||||
});
|
||||
|
||||
test('reach max word-limit', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
@@ -310,6 +331,28 @@ test('reach max word-limit', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('reach max word-limit undefined', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: undefined,
|
||||
maxlength: 3,
|
||||
showWordLimit: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('reach max word-limit null', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: null,
|
||||
maxlength: 3,
|
||||
showWordLimit: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('name prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
@@ -360,3 +403,14 @@ test('should blur search input on enter', () => {
|
||||
wrapper.find('input').trigger('keypress.enter');
|
||||
expect(wrapper.emitted('blur')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('value is null', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: null,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('input').element.value).toEqual('');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('');
|
||||
});
|
||||
|
||||
@@ -38,3 +38,30 @@ test('failed event', async () => {
|
||||
values: { A: '', B: '' },
|
||||
});
|
||||
});
|
||||
|
||||
test('failed event when rule message is empty', async () => {
|
||||
const onFailed = jest.fn();
|
||||
const wrapper = mountForm({
|
||||
template: `
|
||||
<van-form ref="form" @failed="onFailed">
|
||||
<van-field name="A" :rules="rulesA" value="" />
|
||||
<van-button native-type="submit" />
|
||||
</van-form>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rulesA: [{ required: true }],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFailed,
|
||||
},
|
||||
});
|
||||
|
||||
await submitForm(wrapper);
|
||||
|
||||
expect(onFailed).toHaveBeenCalledWith({
|
||||
errors: [{ name: 'A' }],
|
||||
values: { A: '' },
|
||||
});
|
||||
});
|
||||
|
||||
@@ -103,7 +103,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
if (scale !== 1) {
|
||||
style.transform = `scale3d(${scale}, ${scale}, 1) translate(${
|
||||
style.transform = `scale(${scale}, ${scale}) translate(${
|
||||
this.moveX / scale
|
||||
}px, ${this.moveY / scale}px)`;
|
||||
}
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
图片放大预览，支持函数调用和组件调用两种方式
|
||||
图片放大预览，支持函数调用和组件调用两种方式。
|
||||
|
||||
### 函数调用
|
||||
|
||||
ImagePreview 是一个函数，调用函数后展示图片预览
|
||||
ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
@@ -16,7 +16,7 @@ ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
|
||||
|
||||
### 组件调用
|
||||
|
||||
通过组件调用 ImagePreview 时，可以通过下面的方式进行注册
|
||||
通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
@@ -37,7 +37,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
直接传入图片数组，即可展示图片预览
|
||||
直接传入图片数组，即可展示图片预览。
|
||||
|
||||
```js
|
||||
ImagePreview([
|
||||
@@ -48,7 +48,7 @@ ImagePreview([
|
||||
|
||||
### 传入配置项
|
||||
|
||||
通过传入配置对象，可以指定初始图片的位置、监听关闭事件
|
||||
通过传入配置对象，可以指定初始图片的位置、监听关闭事件。
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
@@ -65,7 +65,7 @@ ImagePreview({
|
||||
|
||||
### 展示关闭按钮
|
||||
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
|
||||
设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
|
||||
|
||||
```js
|
||||
ImagePreview({
|
||||
@@ -79,7 +79,7 @@ ImagePreview({
|
||||
|
||||
### 异步关闭
|
||||
|
||||
通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览
|
||||
通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览。
|
||||
|
||||
```js
|
||||
const instance = ImagePreview({
|
||||
@@ -97,7 +97,7 @@ setTimeout(() => {
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
|
||||
如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件。
|
||||
|
||||
```html
|
||||
<van-image-preview v-model="show" :images="images" @change="onChange">
|
||||
|
||||
@@ -61,7 +61,7 @@ exports[`set show-index prop to false 1`] = `
|
||||
`;
|
||||
|
||||
exports[`zoom 1`] = `
|
||||
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
|
||||
<div class="van-image__loading">
|
||||
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><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>
|
||||
|
||||
@@ -51,7 +51,10 @@ export function updateOverlay(vm: any): void {
|
||||
}
|
||||
|
||||
export function openOverlay(vm: any, config: OverlayConfig): void {
|
||||
if (!context.find(vm)) {
|
||||
const item = context.find(vm);
|
||||
if (item) {
|
||||
item.config = config;
|
||||
} else {
|
||||
const overlay = mountOverlay(vm);
|
||||
context.stack.push({ vm, config, overlay });
|
||||
}
|
||||
|
||||
@@ -17,12 +17,17 @@ Vue.use(NoticeBar);
|
||||
<van-notice-bar text="Notice Content" left-icon="volume-o" />
|
||||
```
|
||||
|
||||
### Disable scroll
|
||||
### Scrollable
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
<!-- Enable scroll when text is short -->
|
||||
<van-notice-bar scrollable text="Notice Content" />
|
||||
|
||||
<!-- Disable scroll when text is long -->
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
text="Technology is the common soul of the people who developed it."
|
||||
/>
|
||||
```
|
||||
|
||||
### Wrapable
|
||||
@@ -53,6 +58,30 @@ Vue.use(NoticeBar);
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### Vertical Scroll
|
||||
|
||||
```html
|
||||
<van-notice-bar left-icon="volume-o" :scrollable="false">
|
||||
<van-swipe
|
||||
vertical
|
||||
class="notice-swipe"
|
||||
:autoplay="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<van-swipe-item>Content 1</van-swipe-item>
|
||||
<van-swipe-item>Content 2</van-swipe-item>
|
||||
<van-swipe-item>Content 3</van-swipe-item>
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
|
||||
<style>
|
||||
.notice-swipe {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@@ -66,7 +95,7 @@ Vue.use(NoticeBar);
|
||||
| left-icon | Left Icon | _string_ | - |
|
||||
| delay | Animation delay (s) | _number \| string_ | `1` |
|
||||
| speed | Scroll speed (px/s) | _number \| string_ | `50` |
|
||||
| scrollable | Whether to scroll content | _boolean_ | `true` |
|
||||
| scrollable | Whether to scroll content | _boolean_ | - |
|
||||
| wrapable | Whether to enable text wrap | _boolean_ | `false` | - |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -13,54 +13,94 @@ Vue.use(NoticeBar);
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过 `text` 属性设置通知栏的内容，通过 `left-icon` 属性设置通知栏左侧的图标。
|
||||
|
||||
```html
|
||||
<van-notice-bar text="通知内容" left-icon="volume-o" />
|
||||
<van-notice-bar
|
||||
left-icon="volume-o"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
/>
|
||||
```
|
||||
|
||||
### 禁用滚动
|
||||
### 滚动播放
|
||||
|
||||
文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
|
||||
通知栏的内容长度溢出时会自动开启滚动播放，通过 `scrollable` 属性可以控制该行为。
|
||||
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
|
||||
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />
|
||||
|
||||
<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
/>
|
||||
```
|
||||
|
||||
### 多行展示
|
||||
|
||||
禁用滚动时，可以设置`wrapable`来开启多行展示
|
||||
文字较长时，可以通过设置 `wrapable` 属性来开启多行展示。
|
||||
|
||||
```html
|
||||
<van-notice-bar wrapable :scrollable="false">
|
||||
通知内容
|
||||
</van-notice-bar>
|
||||
<van-notice-bar
|
||||
wrapable
|
||||
:scrollable="false"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
/>
|
||||
```
|
||||
|
||||
### 通知栏模式
|
||||
|
||||
默认模式为空，支持`closeable`和`link`两种模式
|
||||
通知栏支持 `closeable` 和 `link` 两种模式。
|
||||
|
||||
```html
|
||||
<!-- closeable 模式，在右侧显示关闭按钮 -->
|
||||
<van-notice-bar mode="closeable">
|
||||
通知内容
|
||||
技术是开发它的人的共同灵魂。
|
||||
</van-notice-bar>
|
||||
|
||||
<!-- link 模式，在右侧显示链接箭头 -->
|
||||
<van-notice-bar mode="link">
|
||||
通知内容
|
||||
技术是开发它的人的共同灵魂。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
通过 `color` 属性设置文本颜色，通过 `background` 属性设置背景色。
|
||||
|
||||
```html
|
||||
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
|
||||
通知内容
|
||||
技术是开发它的人的共同灵魂。
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### 垂直滚动
|
||||
|
||||
搭配 NoticeBar 和 Swipe 组件可以实现垂直滚动的效果。
|
||||
|
||||
```html
|
||||
<van-notice-bar left-icon="volume-o" :scrollable="false">
|
||||
<van-swipe
|
||||
vertical
|
||||
class="notice-swipe"
|
||||
:autoplay="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<van-swipe-item>内容 1</van-swipe-item>
|
||||
<van-swipe-item>内容 2</van-swipe-item>
|
||||
<van-swipe-item>内容 3</van-swipe-item>
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
|
||||
<style>
|
||||
.notice-swipe {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@@ -69,12 +109,12 @@ Vue.use(NoticeBar);
|
||||
| --- | --- | --- | --- |
|
||||
| mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` |
|
||||
| text | 通知文本内容 | _string_ | `''` |
|
||||
| color | 文本颜色 | _string_ | `#f60` |
|
||||
| color | 通知文本颜色 | _string_ | `#f60` |
|
||||
| background | 滚动条背景 | _string_ | `#fff7cc` |
|
||||
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
||||
| delay | 动画延迟时间 (s) | _number \| string_ | `1` |
|
||||
| speed | 滚动速率 (px/s) | _number \| string_ | `50` |
|
||||
| scrollable | 是否在长度溢出时滚动播放 | _boolean_ | `true` |
|
||||
| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | - |
|
||||
| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-notice-bar :text="t('text')" left-icon="volume-o" />
|
||||
<van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('unscrollable')">
|
||||
<demo-block :title="t('scrollable')">
|
||||
<van-notice-bar scrollable :text="t('shortText')" />
|
||||
<van-notice-bar :scrollable="false" :text="t('text')" />
|
||||
</demo-block>
|
||||
|
||||
@@ -13,18 +14,33 @@
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('mode')">
|
||||
<van-notice-bar mode="closeable" :text="t('text')" />
|
||||
<van-notice-bar mode="link" :text="t('text')" />
|
||||
<van-notice-bar mode="closeable" :text="t('shortText')" />
|
||||
<van-notice-bar mode="link" :text="t('shortText')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customStyle')">
|
||||
<van-notice-bar
|
||||
:text="t('text')"
|
||||
:text="t('shortText')"
|
||||
color="#1989fa"
|
||||
background="#ecf9ff"
|
||||
left-icon="info-o"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('verticalScroll')">
|
||||
<van-notice-bar left-icon="volume-o" :scrollable="false">
|
||||
<van-swipe
|
||||
vertical
|
||||
class="notice-swipe"
|
||||
:autoplay="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<van-swipe-item>{{ t('content') }} 1</van-swipe-item>
|
||||
<van-swipe-item>{{ t('content') }} 2</van-swipe-item>
|
||||
<van-swipe-item>{{ t('content') }} 3</van-swipe-item>
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@@ -32,20 +48,24 @@
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
unscrollable: '禁用滚动',
|
||||
text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
|
||||
mode: '通知栏模式',
|
||||
content: '内容',
|
||||
wrapable: '多行展示',
|
||||
text:
|
||||
'足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
|
||||
shortText: '技术是开发它的人的共同灵魂。',
|
||||
scrollable: '滚动播放',
|
||||
customStyle: '自定义样式',
|
||||
verticalScroll: '垂直滚动',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Technology is the common soul of the people who developed it.',
|
||||
mode: 'Mode',
|
||||
content: 'Content',
|
||||
wrapable: 'Wrapable',
|
||||
unscrollable: 'Disable scroll',
|
||||
text:
|
||||
'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
|
||||
shortText: 'Some short text.',
|
||||
customStyle: 'Custom Style',
|
||||
scrollable: 'Scrollable',
|
||||
verticalScroll: 'Vertical Scroll',
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -64,5 +84,10 @@ export default {
|
||||
.van-doc-demo-block__title {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.notice-swipe {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+23
-17
@@ -1,4 +1,4 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { doubleRaf } from '../utils/dom/raf';
|
||||
import Icon from '../icon';
|
||||
|
||||
@@ -14,7 +14,7 @@ export default createComponent({
|
||||
background: String,
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: null,
|
||||
},
|
||||
delay: {
|
||||
type: [Number, String],
|
||||
@@ -32,7 +32,6 @@ export default createComponent({
|
||||
offset: 0,
|
||||
duration: 0,
|
||||
wrapWidth: 0,
|
||||
firstRound: true,
|
||||
contentWidth: 0,
|
||||
};
|
||||
},
|
||||
@@ -45,6 +44,10 @@ export default createComponent({
|
||||
},
|
||||
},
|
||||
|
||||
activated() {
|
||||
this.start();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickIcon(event) {
|
||||
if (this.mode === 'closeable') {
|
||||
@@ -56,7 +59,6 @@ export default createComponent({
|
||||
onTransitionEnd() {
|
||||
this.offset = this.wrapWidth;
|
||||
this.duration = 0;
|
||||
this.firstRound = false;
|
||||
|
||||
doubleRaf(() => {
|
||||
this.offset = -this.contentWidth;
|
||||
@@ -66,30 +68,35 @@ export default createComponent({
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.offset = 0;
|
||||
this.duration = 0;
|
||||
this.wrapWidth = 0;
|
||||
this.contentWidth = 0;
|
||||
},
|
||||
|
||||
start() {
|
||||
this.$nextTick(() => {
|
||||
const delay = isDef(this.delay) ? this.delay * 1000 : 0;
|
||||
|
||||
this.reset();
|
||||
|
||||
setTimeout(() => {
|
||||
const { wrap, content } = this.$refs;
|
||||
if (!wrap || !content) {
|
||||
if (!wrap || !content || this.scrollable === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wrapWidth = wrap.getBoundingClientRect().width;
|
||||
const contentWidth = content.getBoundingClientRect().width;
|
||||
|
||||
if (this.scrollable && contentWidth > wrapWidth) {
|
||||
this.offset = -contentWidth;
|
||||
this.duration = contentWidth / this.speed;
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.contentWidth = contentWidth;
|
||||
} else {
|
||||
this.reset();
|
||||
if (this.scrollable || contentWidth > wrapWidth) {
|
||||
doubleRaf(() => {
|
||||
this.offset = -contentWidth;
|
||||
this.duration = contentWidth / this.speed;
|
||||
this.wrapWidth = wrapWidth;
|
||||
this.contentWidth = contentWidth;
|
||||
});
|
||||
}
|
||||
});
|
||||
}, delay);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -102,8 +109,7 @@ export default createComponent({
|
||||
};
|
||||
|
||||
const contentStyle = {
|
||||
transform: `translateX(${this.offset}px)`,
|
||||
transitionDelay: (this.firstRound ? this.delay : 0) + 's',
|
||||
transform: this.offset ? `translateX(${this.offset}px)` : '',
|
||||
transitionDuration: this.duration + 's',
|
||||
};
|
||||
|
||||
@@ -160,7 +166,7 @@ export default createComponent({
|
||||
ref="content"
|
||||
class={[
|
||||
bem('content'),
|
||||
{ 'van-ellipsis': !this.scrollable && !this.wrapable },
|
||||
{ 'van-ellipsis': this.scrollable === false && !this.wrapable },
|
||||
]}
|
||||
style={contentStyle}
|
||||
onTransitionend={this.onTransitionEnd}
|
||||
|
||||
@@ -6,34 +6,39 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar van-notice-bar--wrapable">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
|
||||
</div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
|
||||
</div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
@@ -42,7 +47,23 @@ exports[`renders demo correctly 1`] = `
|
||||
<div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">技术是开发它的人的共同灵魂。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
|
||||
<!----></i>
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">
|
||||
<div class="notice-swipe van-swipe">
|
||||
<div class="van-swipe__track van-swipe__track--vertical" style="height: 0px; transition-duration: 0ms; transform: translateY(0px);">
|
||||
<div class="van-swipe-item" style="height: 0px;">内容 1</div>
|
||||
<div class="van-swipe-item" style="height: 0px;">内容 2</div>
|
||||
<div class="van-swipe-item" style="height: 0px;">内容 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,8 +2,24 @@
|
||||
|
||||
exports[`icon slot 1`] = `
|
||||
<div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">
|
||||
Content
|
||||
</div>
|
||||
</div>Custom Right Icon</div>
|
||||
`;
|
||||
|
||||
exports[`should not scroll when content width > wrap width 1`] = `
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transition-duration: 0s;">foo</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should scroll when content width > wrap width 1`] = `
|
||||
<div role="alert" class="van-notice-bar">
|
||||
<div role="marquee" class="van-notice-bar__wrap">
|
||||
<div class="van-notice-bar__content" style="transition-duration: 2s; transform: translateX(-100px);">foo</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -48,3 +48,49 @@ test('replay event', async () => {
|
||||
await later(50);
|
||||
expect(wrapper.emitted('replay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should scroll when content width > wrap width ', async () => {
|
||||
const wrapper = mount(NoticeBar, {
|
||||
propsData: {
|
||||
text: 'foo',
|
||||
delay: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const wrap = wrapper.find('.van-notice-bar__wrap');
|
||||
const content = wrapper.find('.van-notice-bar__content');
|
||||
|
||||
wrap.element.getBoundingClientRect = () => ({
|
||||
width: 50,
|
||||
});
|
||||
content.element.getBoundingClientRect = () => ({
|
||||
width: 100,
|
||||
});
|
||||
|
||||
await later(50);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should not scroll when content width > wrap width ', async () => {
|
||||
const wrapper = mount(NoticeBar, {
|
||||
propsData: {
|
||||
text: 'foo',
|
||||
delay: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const wrap = wrapper.find('.van-notice-bar__wrap');
|
||||
const content = wrapper.find('.van-notice-bar__content');
|
||||
|
||||
wrap.element.getBoundingClientRect = () => ({
|
||||
width: 200,
|
||||
});
|
||||
content.element.getBoundingClientRect = () => ({
|
||||
width: 100,
|
||||
});
|
||||
|
||||
await later(50);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -46,7 +46,7 @@ function Notify(
|
||||
class={[bem([props.type]), props.className]}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{props.message}
|
||||
{slots.default?.() || props.message}
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
|
||||
+30
-2
@@ -41,9 +41,9 @@ Notify({
|
||||
});
|
||||
```
|
||||
|
||||
### \$notify Method
|
||||
### Global Method
|
||||
|
||||
After import the Notify component, the \$notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
After import the Notify component, the `$notify` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
|
||||
```js
|
||||
export default {
|
||||
@@ -53,6 +53,34 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Component Call
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="Component Call" @click="showNotify" />
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>Content</span>
|
||||
</van-notify>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Methods
|
||||
|
||||
@@ -1,12 +1,36 @@
|
||||
# Notify 消息提示
|
||||
|
||||
### 引入
|
||||
### 介绍
|
||||
|
||||
在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
|
||||
|
||||
### 函数调用
|
||||
|
||||
Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。
|
||||
|
||||
```js
|
||||
import { Notify } from 'vant';
|
||||
|
||||
Notify('通知内容');
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
|
||||
通过组件调用 Notify 时，可以通过下面的方式进行注册（从 2.8.5 版本开始支持）：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Notify } from 'vant';
|
||||
|
||||
// 全局注册
|
||||
Vue.use(Notify);
|
||||
|
||||
// 局部注册
|
||||
export default {
|
||||
components: {
|
||||
[Notify.Component.name]: Notify.Component,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
@@ -19,7 +43,7 @@ Notify('通知内容');
|
||||
|
||||
### 通知类型
|
||||
|
||||
支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`
|
||||
支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。
|
||||
|
||||
```js
|
||||
// 主要通知
|
||||
@@ -37,7 +61,7 @@ Notify({ type: 'warning', message: '通知内容' });
|
||||
|
||||
### 自定义通知
|
||||
|
||||
自定义消息通知的颜色和展示时长
|
||||
自定义消息通知的颜色和展示时长。
|
||||
|
||||
```js
|
||||
Notify({
|
||||
@@ -52,9 +76,9 @@ Notify({
|
||||
});
|
||||
```
|
||||
|
||||
### 组件内调用
|
||||
### 全局方法
|
||||
|
||||
引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 \$notify 方法，便于在组件内调用。
|
||||
引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 `$notify` 方法，便于在组件内调用。
|
||||
|
||||
```js
|
||||
export default {
|
||||
@@ -64,6 +88,36 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### 组件调用
|
||||
|
||||
如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。
|
||||
|
||||
```html
|
||||
<van-button type="primary" text="组件调用" @click="showNotify" />
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>通知内容</span>
|
||||
</van-notify>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### 方法
|
||||
|
||||
@@ -42,6 +42,19 @@
|
||||
@click="showCustomDuration"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('componentCall')">
|
||||
<van-button
|
||||
type="primary"
|
||||
:text="t('componentCall')"
|
||||
@click="showComponentCall"
|
||||
/>
|
||||
|
||||
<van-notify v-model="show" type="success">
|
||||
<van-icon name="bell" style="margin-right: 4px;" />
|
||||
<span>{{ t('content') }}</span>
|
||||
</van-notify>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@@ -57,6 +70,7 @@ export default {
|
||||
notifyType: '通知类型',
|
||||
customColor: '自定义颜色',
|
||||
customNotify: '自定义配置',
|
||||
componentCall: '组件调用',
|
||||
customDuration: '自定义时长',
|
||||
},
|
||||
'en-US': {
|
||||
@@ -68,10 +82,17 @@ export default {
|
||||
notifyType: 'Notify Type',
|
||||
customColor: 'Custom Color',
|
||||
customNotify: 'Custom Notify',
|
||||
componentCall: 'Component Call',
|
||||
customDuration: 'Custom Duration',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
showNotify() {
|
||||
this.$notify(this.t('content'));
|
||||
@@ -98,6 +119,13 @@ export default {
|
||||
type,
|
||||
});
|
||||
},
|
||||
|
||||
showComponentCall() {
|
||||
this.show = true;
|
||||
setTimeout(() => {
|
||||
this.show = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-notify {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: @notify-padding;
|
||||
color: @notify-text-color;
|
||||
|
||||
@@ -89,6 +89,8 @@ Notify.install = () => {
|
||||
Vue.use(VanNotify as any);
|
||||
};
|
||||
|
||||
Notify.Component = VanNotify;
|
||||
|
||||
Vue.prototype.$notify = Notify;
|
||||
|
||||
export default Notify;
|
||||
|
||||
@@ -21,5 +21,10 @@ exports[`renders demo correctly 1`] = `
|
||||
</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--primary van-button--normal">
|
||||
<div class="van-button__content"><span class="van-button__text">组件调用</span></div>
|
||||
</button>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -3,6 +3,7 @@ import { createNamespace, isObject } from '../utils';
|
||||
import { range } from '../utils/format/number';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
import { DEFAULT_ITEM_HEIGHT } from './shared';
|
||||
|
||||
const DEFAULT_DURATION = 200;
|
||||
|
||||
@@ -33,7 +34,7 @@ export default createComponent({
|
||||
valueKey: String,
|
||||
allowHtml: Boolean,
|
||||
className: String,
|
||||
itemHeight: [Number, String],
|
||||
itemHeight: Number,
|
||||
defaultIndex: Number,
|
||||
swipeDuration: [Number, String],
|
||||
visibleItemCount: [Number, String],
|
||||
@@ -255,9 +256,11 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genOptions() {
|
||||
const optionStyle = {
|
||||
height: `${this.itemHeight}px`,
|
||||
};
|
||||
const optionStyle = {};
|
||||
|
||||
if (this.itemHeight !== DEFAULT_ITEM_HEIGHT) {
|
||||
optionStyle.height = `${this.itemHeight}px`;
|
||||
}
|
||||
|
||||
return this.options.map((option, index) => {
|
||||
const text = this.getOptionText(option);
|
||||
@@ -285,7 +288,7 @@ export default createComponent({
|
||||
const childData = {
|
||||
class: 'van-ellipsis',
|
||||
domProps: {
|
||||
[this.allowHtml ? 'innerHTML' : 'innerText']: text,
|
||||
[this.allowHtml ? 'innerHTML' : 'textContent']: text,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -252,7 +252,7 @@ export default {
|
||||
| show-toolbar | Whether to show toolbar | _boolean_ | `false` |
|
||||
| allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` |
|
||||
| default-index | Default value index of single column picker | _number \| string_ | `0` |
|
||||
| item-height | Option height | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | Option height, supports `px` ans `rem` unit, default `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
|
||||
|
||||
@@ -275,9 +275,9 @@ export default {
|
||||
| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
|
||||
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
|
||||
| default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
|
||||
| item-height | 选项高度 | _number \| string_ | `44` |
|
||||
| item-height `v2.8.6` | 选项高度，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `44` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
+38
-31
@@ -1,8 +1,9 @@
|
||||
// Utils
|
||||
import { createNamespace, isObject } from '../utils';
|
||||
import { createNamespace, isDef, isObject } from '../utils';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
|
||||
import { pickerProps } from './shared';
|
||||
import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';
|
||||
import { unitToPx } from '../utils/format/unit';
|
||||
|
||||
// Components
|
||||
import Loading from '../loading';
|
||||
@@ -39,6 +40,10 @@ export default createComponent({
|
||||
},
|
||||
|
||||
computed: {
|
||||
itemPxHeight() {
|
||||
return this.itemHeight ? unitToPx(this.itemHeight) : DEFAULT_ITEM_HEIGHT;
|
||||
},
|
||||
|
||||
dataType() {
|
||||
const { columns } = this;
|
||||
const firstColumn = columns[0] || {};
|
||||
@@ -81,7 +86,9 @@ export default createComponent({
|
||||
let cursor = { children: this.columns };
|
||||
|
||||
while (cursor && cursor.children) {
|
||||
const defaultIndex = cursor.defaultIndex || +this.defaultIndex;
|
||||
const defaultIndex = isDef(cursor.defaultIndex)
|
||||
? cursor.defaultIndex
|
||||
: +this.defaultIndex;
|
||||
|
||||
formatted.push({
|
||||
values: cursor.children.map((item) => item[this.valueKey]),
|
||||
@@ -277,12 +284,38 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genColumns() {
|
||||
const { itemPxHeight } = this;
|
||||
const wrapHeight = itemPxHeight * this.visibleItemCount;
|
||||
|
||||
const frameStyle = { height: `${itemPxHeight}px` };
|
||||
const columnsStyle = { height: `${wrapHeight}px` };
|
||||
const maskStyle = {
|
||||
backgroundSize: `100% ${(wrapHeight - itemPxHeight) / 2}px`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
class={bem('columns')}
|
||||
style={columnsStyle}
|
||||
onTouchmove={preventDefault}
|
||||
>
|
||||
{this.genColumnItems()}
|
||||
<div class={bem('mask')} style={maskStyle} />
|
||||
<div
|
||||
class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
|
||||
style={frameStyle}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
genColumnItems() {
|
||||
return this.formattedColumns.map((item, columnIndex) => (
|
||||
<PickerColumn
|
||||
valueKey={this.valueKey}
|
||||
allowHtml={this.allowHtml}
|
||||
className={item.className}
|
||||
itemHeight={this.itemHeight}
|
||||
itemHeight={this.itemPxHeight}
|
||||
defaultIndex={item.defaultIndex || +this.defaultIndex}
|
||||
swipeDuration={this.swipeDuration}
|
||||
visibleItemCount={this.visibleItemCount}
|
||||
@@ -296,38 +329,12 @@ export default createComponent({
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const itemHeight = +this.itemHeight;
|
||||
const wrapHeight = itemHeight * this.visibleItemCount;
|
||||
|
||||
const frameStyle = {
|
||||
height: `${itemHeight}px`,
|
||||
};
|
||||
|
||||
const columnsStyle = {
|
||||
height: `${wrapHeight}px`,
|
||||
};
|
||||
|
||||
const maskStyle = {
|
||||
backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={bem()}>
|
||||
{this.toolbarPosition === 'top' ? this.genToolbar() : h()}
|
||||
{this.loading ? <Loading class={bem('loading')} /> : h()}
|
||||
{this.slots('columns-top')}
|
||||
<div
|
||||
class={bem('columns')}
|
||||
style={columnsStyle}
|
||||
onTouchmove={preventDefault}
|
||||
>
|
||||
{this.genColumns()}
|
||||
<div class={bem('mask')} style={maskStyle} />
|
||||
<div
|
||||
class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
|
||||
style={frameStyle}
|
||||
/>
|
||||
</div>
|
||||
{this.genColumns()}
|
||||
{this.slots('columns-bottom')}
|
||||
{this.toolbarPosition === 'bottom' ? this.genToolbar() : h()}
|
||||
</div>
|
||||
|
||||
@@ -104,6 +104,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: @picker-option-height;
|
||||
padding: 0 @padding-base;
|
||||
color: @picker-option-text-color;
|
||||
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
export type SharedPickerProps = {
|
||||
title?: string;
|
||||
loading?: boolean;
|
||||
itemHeight: number;
|
||||
itemHeight?: number;
|
||||
showToolbar?: boolean;
|
||||
visibleItemCount: number | string;
|
||||
cancelButtonText?: string;
|
||||
confirmButtonText?: string;
|
||||
};
|
||||
|
||||
export const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export const pickerProps = {
|
||||
title: String,
|
||||
loading: Boolean,
|
||||
itemHeight: [Number, String],
|
||||
showToolbar: Boolean,
|
||||
cancelButtonText: String,
|
||||
confirmButtonText: String,
|
||||
@@ -22,10 +25,6 @@ export const pickerProps = {
|
||||
type: [Number, String],
|
||||
default: 5,
|
||||
},
|
||||
itemHeight: {
|
||||
type: [Number, String],
|
||||
default: 44,
|
||||
},
|
||||
swipeDuration: {
|
||||
type: [Number, String],
|
||||
default: 1000,
|
||||
|
||||
@@ -11,19 +11,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -43,19 +43,19 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -75,32 +75,32 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">周一</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">周二</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">周三</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">周四</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">上午</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">下午</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">晚上</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -120,30 +120,30 @@ exports[`renders demo correctly 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">西湖区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">余杭区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -163,13 +163,13 @@ exports[`renders demo correctly 1`] = `
|
||||
<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;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -189,29 +189,29 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column column1">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column column2">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -231,29 +231,29 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column column1">
|
||||
<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;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">福建</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column column2">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -4,25 +4,25 @@ exports[`column watch default index 1`] = `
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 100px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1990</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1991</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1992</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1993</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1994</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1995</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -32,25 +32,25 @@ exports[`column watch default index 2`] = `
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1990</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1991</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1992</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1993</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1994</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
|
||||
<div class="van-ellipsis"></div>
|
||||
<div class="van-ellipsis">1995</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -76,8 +76,8 @@ exports[`not allow html 1`] = `
|
||||
<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 role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<div class="van-ellipsis"><div>option</div></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -103,6 +103,27 @@ exports[`render title slot 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`set rem item-height 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 800px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 320px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 160px;">
|
||||
<div class="van-ellipsis">1990</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 160px;">
|
||||
<div class="van-ellipsis">1991</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 320px;"></div>
|
||||
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 160px;"></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`toolbar-position prop 1`] = `
|
||||
<div class="van-picker">
|
||||
<!---->
|
||||
|
||||
@@ -261,3 +261,21 @@ test('should not reset index when columns unchanged', () => {
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0]).toEqual(['2', 1]);
|
||||
});
|
||||
|
||||
test('set rem item-height', async () => {
|
||||
const originGetComputedStyle = window.getComputedStyle;
|
||||
|
||||
window.getComputedStyle = () => ({ fontSize: '16px' });
|
||||
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
columns: simpleColumn.slice(0, 2),
|
||||
itemHeight: '10rem',
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
window.getComputedStyle = originGetComputedStyle;
|
||||
});
|
||||
|
||||
@@ -47,7 +47,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-search">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-cell van-cell--borderless van-field van-field--disabled">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
|
||||
@@ -87,6 +87,23 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: 'Wechat', icon: 'wechat' },
|
||||
{ name: 'Weibo', icon: 'weibo' },
|
||||
{ name: 'Link', icon: 'link', description: 'Description' },
|
||||
{ name: 'Poster', icon: 'poster' },
|
||||
{ name: 'Qrcode', icon: 'qrcode' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@@ -111,6 +128,7 @@ export default {
|
||||
| Key | Description | Type |
|
||||
| --- | --- | --- |
|
||||
| name | Option name | _string_ |
|
||||
| description `v2.8.5` | Option description | _string_ |
|
||||
| icon | Option icon，can be set to `wechat` `weibo` `qq` `link` `qrcode` `poster` or image URL | _string_ |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -17,7 +17,7 @@ Vue.use(ShareSheet);
|
||||
|
||||
### 基础用法
|
||||
|
||||
分享面板通过`options`属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。
|
||||
分享面板通过 `options` 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。
|
||||
|
||||
```html
|
||||
<van-cell title="显示分享面板" @click="showShare = true" />
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
|
||||
### 展示多行选项
|
||||
|
||||
当分享选项的数量较多时，可以将`options`定义为数组嵌套的格式，每个子数组会作为一行选项展示
|
||||
当分享选项的数量较多时，可以将 `options` 定义为数组嵌套的格式，每个子数组会作为一行选项展示。
|
||||
|
||||
```html
|
||||
<van-share-sheet
|
||||
@@ -90,7 +90,7 @@ export default {
|
||||
|
||||
### 自定义图标
|
||||
|
||||
除了使用内置的几种图标外，可以直接在`icon`中传入图片 URL 来使用自定义的图标
|
||||
除了使用内置的几种图标外，可以直接在 `icon` 中传入图片 URL 来使用自定义的图标。
|
||||
|
||||
```html
|
||||
<van-share-sheet v-model="showShare" :options="options" />
|
||||
@@ -122,7 +122,7 @@ export default {
|
||||
|
||||
### 展示描述信息
|
||||
|
||||
通过`description`属性可以设置标题下方的描述文字
|
||||
通过 `description` 属性可以设置标题下方的描述文字, 在 `options` 内设置 `description` 属性可以添加分享选项描述。
|
||||
|
||||
```html
|
||||
<van-share-sheet
|
||||
@@ -133,6 +133,23 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: '复制链接', icon: 'link', description: '描述信息' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@@ -159,6 +176,7 @@ export default {
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| name | 分享渠道名称 | _string_ |
|
||||
| description `v2.8.5` | 分享选项描述 | _string_ |
|
||||
| icon | 图标，可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster`，支持传入图片 URL | _string_ |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<van-share-sheet
|
||||
v-model="show.withDesc"
|
||||
:title="t('title')"
|
||||
:options="options"
|
||||
:options="optionsWithDesc"
|
||||
:description="t('description')"
|
||||
@select="onSelect"
|
||||
/>
|
||||
@@ -138,6 +138,20 @@ export default {
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
optionsWithDesc() {
|
||||
return [
|
||||
{ name: this.t('wechat'), icon: 'wechat' },
|
||||
{ name: this.t('weibo'), icon: 'weibo' },
|
||||
{
|
||||
name: this.t('link'),
|
||||
icon: 'link',
|
||||
description: this.t('description'),
|
||||
},
|
||||
{ name: this.t('poster'), icon: 'poster' },
|
||||
{ name: this.t('qrcode'), icon: 'qrcode' },
|
||||
];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
@@ -92,6 +92,11 @@ export default createComponent({
|
||||
>
|
||||
<img src={this.getIconURL(option.icon)} class={bem('icon')} />
|
||||
{option.name && <span class={bem('name')}>{option.name}</span>}
|
||||
{option.description && (
|
||||
<span class={bem('option-description')}>
|
||||
{option.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -65,6 +65,12 @@
|
||||
font-size: @share-sheet-option-name-font-size;
|
||||
}
|
||||
|
||||
&__option-description {
|
||||
padding: 0 @padding-base;
|
||||
color: @share-sheet-option-description-color;
|
||||
font-size: @share-sheet-option-description-font-size;
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@@ -56,6 +56,7 @@ export default {
|
||||
| avatar | Whether to show avatar placeholder | _boolean_ | `false` |
|
||||
| loading | Whether to show skeleton，pass `false` to show child component | _boolean_ | `true` |
|
||||
| animate | Whether to enable animation | _boolean_ | `true` |
|
||||
| round `v2.8.5` | Whether to show round title and row | _boolean_ | `false` |
|
||||
| title-width | Title width | _number \| string_ | `40%` |
|
||||
| avatar-size | Size of avatar placeholder | _number \| string_ | `32px` |
|
||||
| avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` |
|
||||
|
||||
@@ -60,8 +60,9 @@ export default {
|
||||
| row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | _number \| string \|<br>(number \| string)[]_ | `100%` |
|
||||
| title | 是否显示标题占位图 | _boolean_ | `false` |
|
||||
| avatar | 是否显示头像占位图 | _boolean_ | `false` |
|
||||
| loading | 是否显示骨架屏，传`false`时会展示子组件内容 | _boolean_ | `true` |
|
||||
| loading | 是否显示骨架屏，传 `false` 时会展示子组件内容 | _boolean_ | `true` |
|
||||
| animate | 是否开启动画 | _boolean_ | `true` |
|
||||
| round `v2.8.5` | 是否将标题和段落显示为圆角风格 | _boolean_ | `false` |
|
||||
| title-width | 标题占位图宽度 | _number \| string_ | `40%` |
|
||||
| avatar-size | 头像占位图大小 | _number \| string_ | `32px` |
|
||||
| avatar-shape | 头像占位图形状，可选值为`square` | _string_ | `round` |
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
background-color: @skeleton-avatar-background-color;
|
||||
|
||||
&--round {
|
||||
border-radius: 100%;
|
||||
border-radius: @border-radius-max;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,6 +46,13 @@
|
||||
animation: van-skeleton-blink @skeleton-animation-duration ease-in-out
|
||||
infinite;
|
||||
}
|
||||
|
||||
&--round {
|
||||
.van-skeleton__row,
|
||||
.van-skeleton__title {
|
||||
border-radius: @border-radius-max;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-skeleton-blink {
|
||||
|
||||
@@ -9,6 +9,7 @@ import { DefaultSlots } from '../utils/types';
|
||||
export type SkeletonProps = {
|
||||
row: number | string;
|
||||
title?: boolean;
|
||||
round?: boolean;
|
||||
avatar?: boolean;
|
||||
loading: boolean;
|
||||
animate: boolean;
|
||||
@@ -78,7 +79,10 @@ function Skeleton(
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={bem({ animate: props.animate })} {...inherit(ctx)}>
|
||||
<div
|
||||
class={bem({ animate: props.animate, round: props.round })}
|
||||
{...inherit(ctx)}
|
||||
>
|
||||
{Avatar()}
|
||||
<div class={bem('content')}>
|
||||
{Title()}
|
||||
@@ -90,6 +94,7 @@ function Skeleton(
|
||||
|
||||
Skeleton.props = {
|
||||
title: Boolean,
|
||||
round: Boolean,
|
||||
avatar: Boolean,
|
||||
row: {
|
||||
type: [Number, String],
|
||||
|
||||
@@ -17,6 +17,15 @@ exports[`disable animate 1`] = `
|
||||
|
||||
exports[`render chidren 1`] = `<div>Content</div>`;
|
||||
|
||||
exports[`round prop 1`] = `
|
||||
<div class="van-skeleton van-skeleton--animate van-skeleton--round">
|
||||
<div class="van-skeleton__avatar van-skeleton__avatar--round" style="width: 32px; height: 32px;"></div>
|
||||
<div class="van-skeleton__content">
|
||||
<h3 class="van-skeleton__title" style="width: 40%;"></h3>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`row-width array 1`] = `
|
||||
<div class="van-skeleton van-skeleton--animate">
|
||||
<div class="van-skeleton__content">
|
||||
|
||||
@@ -34,6 +34,17 @@ test('avatar shape', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('round prop', () => {
|
||||
const wrapper = mount(Skeleton, {
|
||||
propsData: {
|
||||
title: true,
|
||||
round: true,
|
||||
avatar: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable animate', () => {
|
||||
const wrapper = mount(Skeleton, {
|
||||
propsData: {
|
||||
|
||||
@@ -119,8 +119,9 @@ export default {
|
||||
| button-size `v2.0.5` | Button size | _number \| string_ | `28px` |
|
||||
| decimal-length `v2.2.1` | Decimal length | _number \| string_ | - |
|
||||
| theme `v2.8.2` | Theme, can be set to `round` | _string_ | - |
|
||||
| placeholder `v2.8.6` | Input placeholder | _string_ | - |
|
||||
| integer | Whether to allow only integers | _boolean_ | `false` |
|
||||
| disabled | Disable value change | _boolean_ | `false` |
|
||||
| disabled | Whether to disable value change | _boolean_ | `false` |
|
||||
| disable-plus `v2.2.16` | Whether to disable plus button | _boolean_ | `false` |
|
||||
| disable-minus `v2.2.16` | Whether to disable minus button | _boolean_ | `false` |
|
||||
| disable-input | Whether to disable input | _boolean_ | `false` |
|
||||
|
||||
@@ -145,6 +145,7 @@ export default {
|
||||
| button-size `v2.0.5` | 按钮大小以及输入框高度，默认单位为`px` | _number \| string_ | `28px` |
|
||||
| decimal-length `v2.2.1` | 固定显示的小数位数 | _number \| string_ | - |
|
||||
| theme `v2.8.2` | 样式风格，可选值为 `round` | _string_ | - |
|
||||
| placeholder `v2.8.6` | 输入框占位提示文字 | _string_ | - |
|
||||
| integer | 是否只允许输入整数 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用步进器 | _boolean_ | `false` |
|
||||
| disable-plus `v2.2.16` | 是否禁用增加按钮 | _boolean_ | `false` |
|
||||
|
||||
@@ -31,6 +31,7 @@ export default createComponent({
|
||||
inputWidth: [Number, String],
|
||||
buttonSize: [Number, String],
|
||||
asyncChange: Boolean,
|
||||
placeholder: String,
|
||||
disablePlus: Boolean,
|
||||
disableMinus: Boolean,
|
||||
disableInput: Boolean,
|
||||
@@ -298,6 +299,7 @@ export default createComponent({
|
||||
readonly={this.disableInput}
|
||||
// set keyboard in mordern browers
|
||||
inputmode={this.integer ? 'numeric' : 'decimal'}
|
||||
placeholder={this.placeholder}
|
||||
aria-valuemax={this.max}
|
||||
aria-valuemin={this.min}
|
||||
aria-valuenow={this.currentValue}
|
||||
|
||||
@@ -8,4 +8,6 @@ exports[`disabled stepper 1`] = `<div class="van-stepper"><button type="button"
|
||||
|
||||
exports[`input-width prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button type="button" class="van-stepper__plus"></button></div>`;
|
||||
|
||||
exports[`placeholder prop 1`] = `<input type="text" role="spinbutton" inputmode="decimal" placeholder="foo" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input">`;
|
||||
|
||||
exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus" style="display: none;"></button></div>`;
|
||||
|
||||
@@ -378,3 +378,12 @@ test('change integer', async () => {
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(1);
|
||||
});
|
||||
|
||||
test('placeholder prop', () => {
|
||||
const wrapper = mount(Stepper, {
|
||||
propsData: {
|
||||
placeholder: 'foo',
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-stepper__input')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -54,11 +54,11 @@ export default {
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| ---------- | ------------------- | ------------------ | ------- |
|
||||
| offset-top | Offset top | _number \| string_ | `0` |
|
||||
| z-index | z-index when sticky | _number \| string_ | `99` |
|
||||
| container | Container DOM | _Element_ | - |
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| offset-top `v2.8.7` | Offset top, supports `px` ans `rem` unit, default `px` | _number \| string_ | `0` |
|
||||
| z-index | z-index when sticky | _number \| string_ | `99` |
|
||||
| container | Container DOM | _Element_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -64,11 +64,11 @@ export default {
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------- | ------------------ | ------ |
|
||||
| offset-top | 吸顶时与顶部的距离，单位`px` | _number \| string_ | `0` |
|
||||
| z-index | 吸顶时的 z-index | _number \| string_ | `99` |
|
||||
| container | 容器对应的 HTML 节点 | _Element_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `0` |
|
||||
| z-index | 吸顶时的 z-index | _number \| string_ | `99` |
|
||||
| container | 容器对应的 HTML 节点 | _Element_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
+11
-7
@@ -1,4 +1,5 @@
|
||||
import { isHidden } from '../utils/dom/style';
|
||||
import { unitToPx } from '../utils/format/unit';
|
||||
import { createNamespace, isDef, isServer } from '../utils';
|
||||
import { getScrollTop, getElementTop, getScroller } from '../utils/dom/scroll';
|
||||
import { BindEventMixin } from '../mixins/bind-event';
|
||||
@@ -40,6 +41,10 @@ export default createComponent({
|
||||
},
|
||||
|
||||
computed: {
|
||||
offsetTopPx() {
|
||||
return unitToPx(this.offsetTop);
|
||||
},
|
||||
|
||||
style() {
|
||||
if (!this.fixed) {
|
||||
return;
|
||||
@@ -51,8 +56,8 @@ export default createComponent({
|
||||
style.zIndex = this.zIndex;
|
||||
}
|
||||
|
||||
if (this.offsetTop && this.fixed) {
|
||||
style.top = `${this.offsetTop}px`;
|
||||
if (this.offsetTopPx && this.fixed) {
|
||||
style.top = `${this.offsetTopPx}px`;
|
||||
}
|
||||
|
||||
if (this.transform) {
|
||||
@@ -86,8 +91,7 @@ export default createComponent({
|
||||
|
||||
this.height = this.$el.offsetHeight;
|
||||
|
||||
const { container } = this;
|
||||
const offsetTop = +this.offsetTop;
|
||||
const { container, offsetTopPx } = this;
|
||||
const scrollTop = getScrollTop(window);
|
||||
const topToPageTop = getElementTop(this.$el);
|
||||
|
||||
@@ -102,12 +106,12 @@ export default createComponent({
|
||||
if (container) {
|
||||
const bottomToPageTop = topToPageTop + container.offsetHeight;
|
||||
|
||||
if (scrollTop + offsetTop + this.height > bottomToPageTop) {
|
||||
if (scrollTop + offsetTopPx + this.height > bottomToPageTop) {
|
||||
const distanceToBottom = this.height + scrollTop - bottomToPageTop;
|
||||
|
||||
if (distanceToBottom < this.height) {
|
||||
this.fixed = true;
|
||||
this.transform = -(distanceToBottom + offsetTop);
|
||||
this.transform = -(distanceToBottom + offsetTopPx);
|
||||
} else {
|
||||
this.fixed = false;
|
||||
}
|
||||
@@ -117,7 +121,7 @@ export default createComponent({
|
||||
}
|
||||
}
|
||||
|
||||
if (scrollTop + offsetTop > topToPageTop) {
|
||||
if (scrollTop + offsetTopPx > topToPageTop) {
|
||||
this.fixed = true;
|
||||
this.transform = 0;
|
||||
} else {
|
||||
|
||||
@@ -28,6 +28,14 @@ exports[`offset-top prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`offset-top with rem unit 1`] = `
|
||||
<div style="height: 10px;">
|
||||
<div class="van-sticky van-sticky--fixed" style="top: 16px;">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`sticky to top 1`] = `
|
||||
<div style="height: 10px;">
|
||||
<div class="van-sticky">
|
||||
|
||||
@@ -43,6 +43,26 @@ test('offset-top prop', () => {
|
||||
mockScrollTop(0);
|
||||
});
|
||||
|
||||
test('offset-top with rem unit', () => {
|
||||
const originGetComputedStyle = window.getComputedStyle;
|
||||
|
||||
window.getComputedStyle = () => ({ fontSize: '16px' });
|
||||
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-sticky style="height: 10px;" offset-top="1rem">
|
||||
Content
|
||||
</van-sticky>
|
||||
`,
|
||||
});
|
||||
|
||||
mockScrollTop(100);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
mockScrollTop(0);
|
||||
|
||||
window.getComputedStyle = originGetComputedStyle;
|
||||
});
|
||||
|
||||
test('should not trigger scroll event when hidden', () => {
|
||||
const scroll = jest.fn();
|
||||
mount({
|
||||
|
||||
+5
-2
@@ -348,7 +348,7 @@
|
||||
@field-label-width: 90px;
|
||||
@field-input-text-color: @text-color;
|
||||
@field-input-error-text-color: @red;
|
||||
@field-input-disabled-text-color: @gray-6;
|
||||
@field-input-disabled-text-color: @gray-5;
|
||||
@field-placeholder-text-color: @gray-5;
|
||||
@field-icon-size: 16px;
|
||||
@field-clear-icon-size: 16px;
|
||||
@@ -360,7 +360,7 @@
|
||||
@field-word-limit-color: @gray-7;
|
||||
@field-word-limit-font-size: @font-size-sm;
|
||||
@field-word-limit-line-height: 16px;
|
||||
@field-word-num-full-color: @red;
|
||||
@field-disabled-text-color: @gray-5;
|
||||
|
||||
// GridItem
|
||||
@grid-item-content-padding: @padding-md @padding-xs;
|
||||
@@ -536,6 +536,7 @@
|
||||
@picker-action-font-size: @font-size-md;
|
||||
@picker-confirm-action-color: @text-link-color;
|
||||
@picker-cancel-action-color: @gray-6;
|
||||
@picker-option-height: 44px;
|
||||
@picker-option-font-size: @font-size-lg;
|
||||
@picker-option-text-color: @black;
|
||||
@picker-option-disabled-opacity: 0.3;
|
||||
@@ -596,6 +597,8 @@
|
||||
@share-sheet-icon-size: 48px;
|
||||
@share-sheet-option-name-color: @gray-7;
|
||||
@share-sheet-option-name-font-size: @font-size-sm;
|
||||
@share-sheet-option-description-color: @gray-5;
|
||||
@share-sheet-option-description-font-size: @font-size-sm;
|
||||
@share-sheet-cancel-button-font-size: @font-size-lg;
|
||||
@share-sheet-cancel-button-height: 48px;
|
||||
@share-sheet-cancel-button-background: @white;
|
||||
|
||||
+1
-1
@@ -205,7 +205,7 @@ In scrollspy mode, the list of content will be tiled
|
||||
| swipeable | Whether to switch tabs with swipe gestrue in the content | _boolean_ | `false` |
|
||||
| lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
|
||||
| scrollspy `v2.3.0` | Whether to use scrollspy mode | _boolean_ | `false` |
|
||||
| offset-top | Offset top when use sticky mode | _number \| string_ | `0` |
|
||||
| offset-top `v2.8.7` | Sticky offset top , supports `px` ans `rem` unit, default `px` | _number \| string_ | `0` |
|
||||
| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `4` | - |
|
||||
| title-active-color | Title active color | _string_ | - |
|
||||
| title-inactive-color | Title inactive color | _string_ | - |
|
||||
|
||||
@@ -209,7 +209,7 @@ export default {
|
||||
| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` |
|
||||
| lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
|
||||
| scrollspy `v2.3.0` | 是否开启滚动导航 | _boolean_ | `false` |
|
||||
| offset-top | 粘性定位布局下与顶部的最小距离，单位`px` | _number \| string_ | `0` |
|
||||
| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` 和 `rem` 单位，默认 `px` | _number \| string_ | `0` |
|
||||
| swipe-threshold | 滚动阈值，标签数量超过阈值时开始横向滚动 | _number \| string_ | `4` |
|
||||
| title-active-color | 标题选中态颜色 | _string_ | - |
|
||||
| title-inactive-color | 标题默认态颜色 | _string_ | - |
|
||||
|
||||
+3
-3
@@ -166,11 +166,11 @@ export default createComponent({
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.onShow();
|
||||
this.init();
|
||||
},
|
||||
|
||||
activated() {
|
||||
this.onShow();
|
||||
this.init();
|
||||
this.setLine();
|
||||
},
|
||||
|
||||
@@ -180,7 +180,7 @@ export default createComponent({
|
||||
this.setLine();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
init() {
|
||||
this.$nextTick(() => {
|
||||
this.inited = true;
|
||||
this.tabHeight = getVisibleHeight(this.$refs.wrap);
|
||||
|
||||
+3
-3
@@ -75,9 +75,9 @@ const timer = setInterval(() => {
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
### \$toast Method
|
||||
### Global Method
|
||||
|
||||
After import the Toast component, the \$toast method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
After import the Toast component, the `$toast` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
|
||||
|
||||
```js
|
||||
export default {
|
||||
@@ -89,7 +89,7 @@ export default {
|
||||
|
||||
### Singleton
|
||||
|
||||
Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example
|
||||
Toast use singleton mode by default, if you need to pop multiple Toast at the same time, you can refer to the following example:
|
||||
|
||||
```js
|
||||
Toast.allowMultiple();
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# Toast 轻提示
|
||||
|
||||
### 介绍
|
||||
|
||||
在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
@@ -19,7 +23,7 @@ Toast('提示内容');
|
||||
|
||||
### 加载提示
|
||||
|
||||
使用`Toast.loading`方法展示加载提示，通过`forbidClick`属性可以禁用背景点击，通过`loadingType`属性可以自定义加载图标类型。
|
||||
使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击，通过`loadingType` 属性可以自定义加载图标类型。
|
||||
|
||||
```js
|
||||
Toast.loading({
|
||||
@@ -37,6 +41,8 @@ Toast.loading({
|
||||
|
||||
### 成功/失败提示
|
||||
|
||||
使用 `Toast.success` 方法展示成功提示，使用 `Toast.fail` 方法展示失败提示。
|
||||
|
||||
```js
|
||||
Toast.success('成功文案');
|
||||
Toast.fail('失败文案');
|
||||
@@ -44,6 +50,8 @@ Toast.fail('失败文案');
|
||||
|
||||
### 自定义图标
|
||||
|
||||
通过 `icon` 选项可以自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
|
||||
|
||||
```js
|
||||
Toast({
|
||||
message: '自定义图标',
|
||||
@@ -58,6 +66,8 @@ Toast({
|
||||
|
||||
### 动态更新提示
|
||||
|
||||
执行 Toast 方法时会返回对应的 Toast 实例，通过修改实例上的 message 属性可以实现动态更新提示的效果。
|
||||
|
||||
```js
|
||||
const toast = Toast.loading({
|
||||
duration: 0, // 持续展示 toast
|
||||
@@ -78,9 +88,9 @@ const timer = setInterval(() => {
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
### 组件内调用
|
||||
### 全局方法
|
||||
|
||||
引入 Toast 组件后，会自动在 Vue 的 prototype 上挂载 \$toast 方法，便于在组件内调用。
|
||||
引入 Toast 组件后，会自动在 Vue 的 prototype 上挂载 `$toast` 方法，便于在组件内调用。
|
||||
|
||||
```js
|
||||
export default {
|
||||
@@ -92,7 +102,7 @@ export default {
|
||||
|
||||
### 单例模式
|
||||
|
||||
Toast 默认采用单例模式，即同一时间只会存在一个 Toast，如果需要在同一时间弹出多个 Toast，可以参考下面的示例
|
||||
Toast 默认采用单例模式，即同一时间只会存在一个 Toast，如果需要在同一时间弹出多个 Toast，可以参考下面的示例：
|
||||
|
||||
```js
|
||||
Toast.allowMultiple();
|
||||
@@ -106,19 +116,19 @@ toast2.clear();
|
||||
|
||||
### 修改默认配置
|
||||
|
||||
通过`Toast.setDefaultOptions`函数可以全局修改 Toast 的默认配置
|
||||
通过`Toast.setDefaultOptions`函数可以全局修改 Toast 的默认配置。
|
||||
|
||||
```js
|
||||
// 将所有 Toast 的展示时长设置为 2000 毫秒
|
||||
Toast.setDefaultOptions({ duration: 2000 });
|
||||
|
||||
// 将所有 loading Toast 设置为背景不可点击 (2.2.10 版本开始支持)
|
||||
// 将所有 loading Toast 设置为背景不可点击
|
||||
Toast.setDefaultOptions('loading', { forbidClick: true });
|
||||
|
||||
// 重置所有 Toast 的默认配置
|
||||
Toast.resetDefaultOptions();
|
||||
|
||||
// 重置 loading Toast 的默认配置 (2.2.10 版本开始支持)
|
||||
// 重置 loading Toast 的默认配置
|
||||
Toast.resetDefaultOptions('loading');
|
||||
```
|
||||
|
||||
|
||||
@@ -9,3 +9,35 @@ export function addUnit(value?: string | number): string | undefined {
|
||||
value = String(value);
|
||||
return isNumeric(value) ? `${value}px` : value;
|
||||
}
|
||||
|
||||
// cache
|
||||
let rootFontSize: number;
|
||||
|
||||
function getRootFontSize() {
|
||||
if (!rootFontSize) {
|
||||
const doc = document.documentElement;
|
||||
const fontSize =
|
||||
doc.style.fontSize || window.getComputedStyle(doc).fontSize;
|
||||
|
||||
rootFontSize = parseFloat(fontSize);
|
||||
}
|
||||
|
||||
return rootFontSize;
|
||||
}
|
||||
|
||||
function convertRem(value: string) {
|
||||
value = value.replace(/rem/g, '');
|
||||
return +value * getRootFontSize();
|
||||
}
|
||||
|
||||
export function unitToPx(value: string | number): number {
|
||||
if (typeof value === 'number') {
|
||||
return value;
|
||||
}
|
||||
|
||||
if (value.indexOf('rem') !== -1) {
|
||||
return convertRem(value);
|
||||
}
|
||||
|
||||
return parseFloat(value);
|
||||
}
|
||||
|
||||
+9
-2
@@ -11,6 +11,14 @@ export type RouteConfig = {
|
||||
replace?: boolean;
|
||||
};
|
||||
|
||||
function isRedundantNavigation(err: Error) {
|
||||
return (
|
||||
err.name === 'NavigationDuplicated' ||
|
||||
// compatible with vue-router@3.3
|
||||
(err.message && err.message.indexOf('redundant navigation') !== -1)
|
||||
);
|
||||
}
|
||||
|
||||
export function route(router: VueRouter, config: RouteConfig) {
|
||||
const { to, url, replace } = config;
|
||||
if (to && router) {
|
||||
@@ -19,8 +27,7 @@ export function route(router: VueRouter, config: RouteConfig) {
|
||||
/* istanbul ignore else */
|
||||
if (promise && promise.catch) {
|
||||
promise.catch((err) => {
|
||||
/* istanbul ignore if */
|
||||
if (err && err.name !== 'NavigationDuplicated') {
|
||||
if (err && !isRedundantNavigation(err)) {
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -9,6 +9,7 @@ import { isNumeric } from '../validate/number';
|
||||
import { isAndroid } from '../validate/system';
|
||||
import { camelize } from '../format/string';
|
||||
import { formatNumber } from '../format/number';
|
||||
import { addUnit, unitToPx } from '../format/unit';
|
||||
|
||||
test('deepClone', () => {
|
||||
const a = { foo: 0 };
|
||||
@@ -115,3 +116,27 @@ test('formatNumber', () => {
|
||||
expect(formatNumber('-1.2-', true)).toEqual('-1.2');
|
||||
expect(formatNumber('123-')).toEqual('123');
|
||||
});
|
||||
|
||||
test('addUnit', () => {
|
||||
expect(addUnit(0)).toEqual('0px');
|
||||
expect(addUnit(10)).toEqual('10px');
|
||||
expect(addUnit('1%')).toEqual('1%');
|
||||
expect(addUnit('1px')).toEqual('1px');
|
||||
expect(addUnit('1vw')).toEqual('1vw');
|
||||
expect(addUnit('1vh')).toEqual('1vh');
|
||||
expect(addUnit('1rem')).toEqual('1rem');
|
||||
});
|
||||
|
||||
test('unitToPx', () => {
|
||||
const originGetComputedStyle = window.getComputedStyle;
|
||||
|
||||
window.getComputedStyle = () => ({ fontSize: '16px' });
|
||||
|
||||
expect(unitToPx(0)).toEqual(0);
|
||||
expect(unitToPx(10)).toEqual(10);
|
||||
expect(unitToPx('10px')).toEqual(10);
|
||||
expect(unitToPx('0rem')).toEqual(0);
|
||||
expect(unitToPx('10rem')).toEqual(160);
|
||||
|
||||
window.getComputedStyle = originGetComputedStyle;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user