Merge branch 'dev' into next
This commit is contained in:
chenjiahan
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
|
||||
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
|
||||
<van-cell
|
||||
@@ -10,7 +10,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('optionStatus')">
|
||||
<demo-block card :title="t('optionStatus')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('optionStatus')"
|
||||
@@ -18,7 +18,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customPanel')">
|
||||
<demo-block card :title="t('customPanel')">
|
||||
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
|
||||
</demo-block>
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
&__description {
|
||||
position: relative;
|
||||
padding: @padding-md;
|
||||
padding: 20px @padding-md;
|
||||
color: @action-sheet-description-color;
|
||||
font-size: @action-sheet-description-font-size;
|
||||
line-height: @action-sheet-description-line-height;
|
||||
|
||||
@@ -364,14 +364,15 @@ export default createComponent({
|
||||
</div>
|
||||
<Popup
|
||||
vModel={this.showAreaPopup}
|
||||
round
|
||||
position="bottom"
|
||||
lazyRender={false}
|
||||
getContainer="body"
|
||||
>
|
||||
<Area
|
||||
ref="area"
|
||||
loading={!this.areaListLoaded}
|
||||
value={data.areaCode}
|
||||
loading={!this.areaListLoaded}
|
||||
areaList={this.areaList}
|
||||
columnsPlaceholder={this.areaColumnsPlaceholder}
|
||||
onConfirm={this.onAreaConfirm}
|
||||
|
||||
@@ -6,6 +6,10 @@
|
||||
&__fields {
|
||||
overflow: hidden;
|
||||
border-radius: @padding-xs;
|
||||
|
||||
.van-field__label {
|
||||
width: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
&__default {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<demo-block card :title="t('title2')">
|
||||
<van-area :title="t('title')" :area-list="t('areaList')" :value="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<demo-block card :title="t('title3')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
@@ -16,7 +16,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title4')">
|
||||
<demo-block card :title="t('title4')">
|
||||
<van-area
|
||||
:title="t('title')"
|
||||
:area-list="t('areaList')"
|
||||
|
||||
@@ -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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">朝阳区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">丰台区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">石景山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海淀区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">门头沟区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">房山区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">通州区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">顺义区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">昌平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">大兴区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">怀柔区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">平谷区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">密云区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">绍兴市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">金华市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">衢州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">舟山市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台州市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">丽水市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">鹿城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">龙湾区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">瓯海区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">洞头区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">永嘉县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">平阳县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">苍南县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">文成县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">泰顺县</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">瑞安市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海外</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">请选择</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">内蒙古自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">辽宁省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">吉林省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">黑龙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上海市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江苏省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">安徽省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">江西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">山东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">河南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖北省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广东省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">广西壮族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">海南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">重庆市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">四川省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">贵州省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">云南省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西藏自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">陕西省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">甘肃省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">青海省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁夏回族自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">新疆维吾尔自治区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">台湾省</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">香港特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">澳门特别行政区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">和平区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">河东区</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">蓟县</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">天津市</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">北京市</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">县</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">东城区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">西城区</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
+11
-13
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('type')">
|
||||
<demo-block card :title="t('type')">
|
||||
<div class="demo-button-row">
|
||||
<van-button type="default">{{ t('default') }}</van-button>
|
||||
<van-button type="primary">{{ t('primary') }}</van-button>
|
||||
@@ -10,33 +10,33 @@
|
||||
<van-button type="warning">{{ t('warning') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('plain')">
|
||||
<demo-block card :title="t('plain')">
|
||||
<van-button plain type="primary" :text="t('plain')" />
|
||||
<van-button plain type="info" :text="t('plain')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('hairline')">
|
||||
<demo-block card :title="t('hairline')">
|
||||
<van-button plain hairline type="primary" :text="t('hairlineButton')" />
|
||||
<van-button plain hairline type="info" :text="t('hairlineButton')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('disabled')">
|
||||
<demo-block card :title="t('disabled')">
|
||||
<van-button disabled type="primary" :text="t('disabled')" />
|
||||
<van-button disabled type="info" :text="t('disabled')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('loadingStatus')">
|
||||
<demo-block card :title="t('loadingStatus')">
|
||||
<van-button loading type="primary" />
|
||||
<van-button loading type="primary" loading-type="spinner" />
|
||||
<van-button loading :loading-text="t('loadingText')" type="info" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('shape')">
|
||||
<demo-block card :title="t('shape')">
|
||||
<van-button type="primary" square :text="t('square')" />
|
||||
<van-button type="info" round :text="t('round')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('icon')">
|
||||
<demo-block card :title="t('icon')">
|
||||
<van-button type="primary" icon="star-o" />
|
||||
<van-button type="primary" icon="star-o" :text="t('button')" />
|
||||
<van-button
|
||||
@@ -47,18 +47,18 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('size')">
|
||||
<demo-block card :title="t('size')">
|
||||
<van-button type="primary" size="large">{{ t('large') }}</van-button>
|
||||
<van-button type="primary" size="normal">{{ t('normal') }}</van-button>
|
||||
<van-button type="primary" size="small">{{ t('small') }}</van-button>
|
||||
<van-button type="primary" size="mini">{{ t('mini') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('blockElement')">
|
||||
<demo-block card :title="t('blockElement')">
|
||||
<van-button type="primary" block>{{ t('blockElement') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('router')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('router')">
|
||||
<van-button
|
||||
:text="t('urlRoute')"
|
||||
type="primary"
|
||||
@@ -67,7 +67,7 @@
|
||||
<van-button :text="t('vueRoute')" type="primary" to="index" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customColor')">
|
||||
<demo-block card :title="t('customColor')">
|
||||
<van-button color="#7232dd" :text="t('pure')" />
|
||||
<van-button plain color="#7232dd" :text="t('pure')" />
|
||||
<van-button
|
||||
@@ -147,8 +147,6 @@ export default {
|
||||
@import '../../style/var';
|
||||
|
||||
.demo-button {
|
||||
background: @white;
|
||||
|
||||
.van-button {
|
||||
&--large {
|
||||
margin-bottom: @padding-md;
|
||||
|
||||
@@ -102,7 +102,6 @@
|
||||
}
|
||||
|
||||
&--small {
|
||||
min-width: @button-small-min-width;
|
||||
height: @button-small-height;
|
||||
padding: 0 @padding-xs;
|
||||
font-size: @button-small-font-size;
|
||||
@@ -114,8 +113,8 @@
|
||||
}
|
||||
|
||||
&--mini {
|
||||
min-width: @button-mini-min-width;
|
||||
height: @button-mini-height;
|
||||
padding: 0 @padding-base;
|
||||
font-size: @button-mini-font-size;
|
||||
|
||||
& + .van-button--mini {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('selectSingle')"
|
||||
@@ -23,7 +23,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('quickSelect')">
|
||||
<demo-block card :title="t('quickSelect')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('selectSingle')"
|
||||
@@ -39,7 +39,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customCalendar')">
|
||||
<demo-block card :title="t('customCalendar')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('customColor')"
|
||||
@@ -83,7 +83,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('tiledDisplay')">
|
||||
<demo-block card :title="t('tiledDisplay')">
|
||||
<van-calendar
|
||||
:title="t('calendar')"
|
||||
:poppable="false"
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@
|
||||
background-color: @cell-background-color;
|
||||
|
||||
&::after {
|
||||
.hairline-bottom(@cell-border-color, @padding-md);
|
||||
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
|
||||
}
|
||||
|
||||
&:last-child::after,
|
||||
|
||||
@@ -92,7 +92,7 @@ export default createComponent({
|
||||
const contentHeight = `${offsetHeight}px`;
|
||||
wrapper.style.height = expanded ? 0 : contentHeight;
|
||||
|
||||
// use double raf to ensure animation can start in mobile safari
|
||||
// use double raf to ensure animation can start
|
||||
doubleRaf(() => {
|
||||
wrapper.style.height = expanded ? contentHeight : 0;
|
||||
});
|
||||
|
||||
@@ -43,10 +43,8 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div class="van-cell van-cell--borderless van-contact-edit__switch-cell">
|
||||
<div class="van-cell__title"><span>设为默认联系人</span></div>
|
||||
<div class="van-cell__value">
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
|
||||
<div class="van-switch__node"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
|
||||
|
||||
@@ -86,7 +86,7 @@ export default createComponent({
|
||||
|
||||
onDelete() {
|
||||
Dialog.confirm({
|
||||
message: t('confirmDelete'),
|
||||
title: t('confirmDelete'),
|
||||
}).then(() => {
|
||||
this.$emit('delete', this.data);
|
||||
});
|
||||
@@ -128,6 +128,7 @@ export default createComponent({
|
||||
<Switch
|
||||
vModel={data.isDefault}
|
||||
size={24}
|
||||
slot="right-icon"
|
||||
onChange={(event) => {
|
||||
this.$emit('change-default', event);
|
||||
}}
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
overflow: hidden;
|
||||
border-radius: @contact-edit-fields-radius;
|
||||
|
||||
.van-cell__title {
|
||||
max-width: @contact-edit-field-label-width;
|
||||
.van-field__label {
|
||||
width: @contact-edit-field-label-width;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,16 +16,7 @@
|
||||
margin-top: 10px;
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
overflow: hidden;
|
||||
border-radius: @contact-edit-fields-radius;
|
||||
|
||||
.van-cell__value {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.van-switch {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { createNamespace, get } from '../utils';
|
||||
import { createNamespace } from '../utils';
|
||||
import { isDate } from '../utils/validate/date';
|
||||
import { padZero } from '../utils/format/string';
|
||||
import { getTrueValue, getMonthEndDay } from './utils';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('dateType')">
|
||||
<demo-block card :title="t('dateType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.date"
|
||||
type="date"
|
||||
@@ -10,7 +10,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('yearMonthType')">
|
||||
<demo-block card :title="t('yearMonthType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.yearMonth"
|
||||
type="year-month"
|
||||
@@ -21,7 +21,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('monthDayType')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('monthDayType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.monthDayType"
|
||||
type="month-day"
|
||||
@@ -32,7 +32,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('timeType')">
|
||||
<demo-block card :title="t('timeType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.time"
|
||||
type="time"
|
||||
@@ -42,7 +42,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('datetimeType')">
|
||||
<demo-block card :title="t('datetimeType')">
|
||||
<van-datetime-picker
|
||||
v-model="value.datetime"
|
||||
type="datetime"
|
||||
@@ -52,7 +52,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('optionFilter')">
|
||||
<demo-block card :title="t('optionFilter')">
|
||||
<van-datetime-picker
|
||||
v-model="value.optionFilter"
|
||||
type="time"
|
||||
|
||||
@@ -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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">35</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">45</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">2010 year</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">2020 year</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 month</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 month</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25 day</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 day</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 hour</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">25 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">35 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">45 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">50 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">22</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">23</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">58</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">05 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">15 hour</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 hour</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">10 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">20 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">30 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">40 minute</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">00</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">01</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">02</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -111,12 +111,12 @@ test('month-day type', () => {
|
||||
expect(wrapper.emitted('confirm')[0][0].getMonth()).toEqual(10);
|
||||
expect(wrapper.emitted('confirm')[0][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -100);
|
||||
triggerDrag(wrapper.find('.van-picker-column'), 0, -300);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[1][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[1][0].getDate()).toEqual(1);
|
||||
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -100);
|
||||
triggerDrag(wrapper.findAll('.van-picker-column').at(1), 0, -300);
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[2][0].getMonth()).toEqual(11);
|
||||
expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
|
||||
|
||||
@@ -133,6 +133,7 @@ export default {
|
||||
| closeOnPopstate `v2.0.5` | Whether to close when popstate | _boolean_ | `false` |
|
||||
| closeOnClickOverlay | Whether to close when click overlay | _boolean_ | `false` |
|
||||
| lockScroll | Whether to lock body scroll | _boolean_ | `true` |
|
||||
| allowHtml `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` |
|
||||
| beforeClose | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
|
||||
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
|
||||
| getContainer | Return the mount node for Dialog | _string \| () => Element_ | `body` |
|
||||
@@ -159,6 +160,7 @@ export default {
|
||||
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `false` |
|
||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
||||
| allow-html `v2.8.7` | Whether to allow HTML rendering in message | _boolean_ | `true` |
|
||||
| before-close | Callback before close,<br>call done() to close dialog,<br>call done(false) to cancel loading | (action: string, done: Function) => void | - |
|
||||
| transition `v2.2.6` | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | - |
|
||||
| get-container | Return the mount node for Dialog | _string \| () => Element_ | - |
|
||||
|
||||
@@ -163,6 +163,7 @@ export default {
|
||||
| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
||||
| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
|
||||
| lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
| allowHtml `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
|
||||
| beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
|
||||
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
|
||||
| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
|
||||
@@ -191,6 +192,7 @@ export default {
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
|
||||
| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
|
||||
| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
| allow-html `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
|
||||
| before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
|
||||
| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
+8
-6
@@ -100,7 +100,7 @@ export default {
|
||||
|
||||
### Error Info
|
||||
|
||||
Use `error` or `error-message` to show error info
|
||||
Use `error` or `error-message` to show error info.
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
@@ -123,7 +123,7 @@ Use `error` or `error-message` to show error info
|
||||
|
||||
### Insert Button
|
||||
|
||||
Use button slot to insert button
|
||||
Use button slot to insert button.
|
||||
|
||||
```html
|
||||
<van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
|
||||
@@ -135,7 +135,7 @@ Use button slot to insert button
|
||||
|
||||
### Format Value
|
||||
|
||||
Use `formatter` prop to format the input value
|
||||
Use `formatter` prop to format the input value.
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@@ -171,7 +171,7 @@ export default {
|
||||
|
||||
### Auto Resize
|
||||
|
||||
Textarea Field can be auto resize when has `autosize` prop
|
||||
Textarea Field can be auto resize when has `autosize` prop.
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@@ -201,7 +201,7 @@ Textarea Field can be auto resize when has `autosize` prop
|
||||
|
||||
### Input Align
|
||||
|
||||
Use `input-align` prop to align the input value
|
||||
Use `input-align` prop to align the input value.
|
||||
|
||||
```html
|
||||
<van-field
|
||||
@@ -230,7 +230,9 @@ Use `input-align` prop to align the input value
|
||||
| readonly | Whether to be readonly | _boolean_ | `false` |
|
||||
| colon `v2.7.2` | Whether to display colon after label | _boolean_ | `false` |
|
||||
| required | Whether to show required mark | _boolean_ | `false` |
|
||||
| center | Whether to center content vertically | _boolean_ | `true` |
|
||||
| clearable | Whether to be clearable | _boolean_ | `false` |
|
||||
| clear-trigger `v2.9.1` | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
|
||||
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
|
||||
| is-link | Whether to show link icon | _boolean_ | `false` |
|
||||
| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
|
||||
@@ -241,7 +243,7 @@ Use `input-align` prop to align the input value
|
||||
| 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` |
|
||||
| label-width | Label width | _number \| string_ | `6em` |
|
||||
| label-align | Label align, can be set to `center` `right` | _string_ | `left` |
|
||||
| input-align | Input align, can be set to `center` `right` | _string_ | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
表单中的输入框组件
|
||||
表单中的输入框组件。
|
||||
|
||||
### 引入
|
||||
|
||||
@@ -255,7 +255,9 @@ export default {
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
| colon `v2.7.2` | 是否在 label 后面添加冒号 | _boolean_ | `false` |
|
||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `false` |
|
||||
| center | 是否使内容垂直居中 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `false` |
|
||||
| clear-trigger `v2.9.1` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
||||
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
|
||||
@@ -266,7 +268,7 @@ export default {
|
||||
| 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` |
|
||||
| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `6em` |
|
||||
| label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
@@ -313,6 +315,10 @@ export default {
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 设置 type 为 number 后，为什么 input 标签的类型仍为 text?
|
||||
|
||||
HTML 原生的 `type="number"` 属性在 iOS 和 Android 系统上都存在一定问题，比如 maxlength 属性不生效、无法获取到完整的输入内容等。因此设置 type 为 `number` 时，Field 不会使用原生的 `type="number"` 属性，而是用现代浏览器支持的 [inputmode 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode)来控制输入键盘的类型。
|
||||
|
||||
### 在桌面端点击清除按钮无效？
|
||||
|
||||
清除按钮监听是的移动端 Touch 事件，参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||
|
||||
+12
-7
@@ -69,6 +69,10 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: null,
|
||||
},
|
||||
clearTrigger: {
|
||||
type: String,
|
||||
default: 'focus',
|
||||
},
|
||||
formatTrigger: {
|
||||
type: String,
|
||||
default: 'onChange',
|
||||
@@ -109,13 +113,14 @@ export default createComponent({
|
||||
|
||||
computed: {
|
||||
showClear() {
|
||||
return (
|
||||
this.clearable &&
|
||||
this.focused &&
|
||||
this.value !== '' &&
|
||||
isDef(this.value) &&
|
||||
!this.readonly
|
||||
);
|
||||
if (this.clearable && !this.readonly) {
|
||||
const hasValue = isDef(this.value) && this.value !== '';
|
||||
const trigger =
|
||||
this.clearTrigger === 'always' ||
|
||||
(this.clearTrigger === 'focus' && this.focused);
|
||||
|
||||
return hasValue && trigger;
|
||||
}
|
||||
},
|
||||
|
||||
showError() {
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-field {
|
||||
&--disabled {
|
||||
color: @field-disabled-text-color;
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: none;
|
||||
box-sizing: border-box;
|
||||
width: @field-label-width;
|
||||
margin-right: @field-label-margin-right;
|
||||
color: @field-label-color;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
|
||||
&--center {
|
||||
text-align: center;
|
||||
@@ -21,6 +20,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.van-field__label {
|
||||
color: @field-disabled-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__value {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ exports[`arrow-direction prop 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`clearable 1`] = `
|
||||
exports[`clearable prop 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>
|
||||
@@ -17,7 +17,7 @@ exports[`clearable 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`clearable 2`] = `
|
||||
exports[`clearable prop 2`] = `
|
||||
<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"><i class="van-icon van-icon-clear van-field__clear">
|
||||
|
||||
@@ -184,7 +184,7 @@ test('maxlength', async () => {
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual('123');
|
||||
});
|
||||
|
||||
test('clearable', () => {
|
||||
test('clearable prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'test',
|
||||
@@ -202,6 +202,18 @@ test('clearable', () => {
|
||||
expect(wrapper.emitted('clear')[0][0]).toBeTruthy();
|
||||
});
|
||||
|
||||
test('clear-trigger prop', () => {
|
||||
const wrapper = mount(Field, {
|
||||
propsData: {
|
||||
value: 'test',
|
||||
clearable: true,
|
||||
clearTrigger: 'always',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.contains('.van-field__clear')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('render input slot', () => {
|
||||
const wrapper = mount(Field, {
|
||||
scopedSlots: {
|
||||
|
||||
+1
-1
@@ -424,7 +424,7 @@ export default {
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| label-width | Field label width | _number \| string_ | `90px` |
|
||||
| label-width | Field label width | _number \| string_ | `6em` |
|
||||
| label-align | Field label align, can be set to `center` `right` | _string_ | `left` |
|
||||
| input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
|
||||
|
||||
@@ -459,7 +459,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `90px` |
|
||||
| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `6em` |
|
||||
| label-align | 表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../utils';
|
||||
import { range } from '../utils/format/number';
|
||||
import { on, preventDefault } from '../utils/dom/event';
|
||||
import { bem, createComponent } from './shared';
|
||||
|
||||
// Mixins
|
||||
import { PopupMixin } from '../mixins/popup';
|
||||
@@ -9,20 +7,8 @@ import { TouchMixin } from '../mixins/touch';
|
||||
|
||||
// Components
|
||||
import Icon from '../icon';
|
||||
import Image from '../image';
|
||||
import Swipe from '../swipe';
|
||||
import Loading from '../loading';
|
||||
import SwipeItem from '../swipe-item';
|
||||
|
||||
const [createComponent, bem] = createNamespace('image-preview');
|
||||
const DOUBLE_CLICK_INTERVAL = 250;
|
||||
|
||||
function getDistance(touches) {
|
||||
return Math.sqrt(
|
||||
(touches[0].clientX - touches[1].clientX) ** 2 +
|
||||
(touches[0].clientY - touches[1].clientY) ** 2
|
||||
);
|
||||
}
|
||||
import ImagePreviewItem from './ImagePreviewItem';
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
@@ -34,6 +20,7 @@ export default createComponent({
|
||||
|
||||
props: {
|
||||
className: null,
|
||||
closeable: Boolean,
|
||||
asyncClose: Boolean,
|
||||
showIndicators: Boolean,
|
||||
images: {
|
||||
@@ -72,7 +59,6 @@ export default createComponent({
|
||||
type: String,
|
||||
default: bem('overlay'),
|
||||
},
|
||||
closeable: Boolean,
|
||||
closeIcon: {
|
||||
type: String,
|
||||
default: 'clear',
|
||||
@@ -85,33 +71,11 @@ export default createComponent({
|
||||
|
||||
data() {
|
||||
return {
|
||||
scale: 1,
|
||||
moveX: 0,
|
||||
moveY: 0,
|
||||
active: 0,
|
||||
moving: false,
|
||||
zooming: false,
|
||||
doubleClickTimer: null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
imageStyle() {
|
||||
const { scale } = this;
|
||||
const style = {
|
||||
transitionDuration: this.zooming || this.moving ? '0s' : '.3s',
|
||||
};
|
||||
|
||||
if (scale !== 1) {
|
||||
style.transform = `scale(${scale}, ${scale}) translate(${
|
||||
this.moveX / scale
|
||||
}px, ${this.moveY / scale}px)`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
startPosition: 'setActive',
|
||||
|
||||
@@ -128,21 +92,6 @@ export default createComponent({
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
shouldRender: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.$nextTick(() => {
|
||||
const swipe = this.$refs.swipe.$el;
|
||||
on(swipe, 'touchstart', this.onWrapperTouchStart);
|
||||
on(swipe, 'touchmove', preventDefault);
|
||||
on(swipe, 'touchend', this.onWrapperTouchEnd);
|
||||
on(swipe, 'touchcancel', this.onWrapperTouchEnd);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -152,147 +101,17 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
onWrapperTouchStart() {
|
||||
this.touchStartTime = new Date();
|
||||
},
|
||||
|
||||
onWrapperTouchEnd(event) {
|
||||
preventDefault(event);
|
||||
|
||||
const deltaTime = new Date() - this.touchStartTime;
|
||||
const { offsetX = 0, offsetY = 0 } = this.$refs.swipe || {};
|
||||
|
||||
// prevent long tap to close component
|
||||
if (deltaTime < DOUBLE_CLICK_INTERVAL && offsetX < 10 && offsetY < 10) {
|
||||
if (!this.doubleClickTimer) {
|
||||
this.doubleClickTimer = setTimeout(() => {
|
||||
this.emitClose();
|
||||
|
||||
this.doubleClickTimer = null;
|
||||
}, DOUBLE_CLICK_INTERVAL);
|
||||
} else {
|
||||
clearTimeout(this.doubleClickTimer);
|
||||
this.doubleClickTimer = null;
|
||||
this.toggleScale();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
startMove(event) {
|
||||
const image = event.currentTarget;
|
||||
const rect = image.getBoundingClientRect();
|
||||
const winWidth = window.innerWidth;
|
||||
const winHeight = window.innerHeight;
|
||||
|
||||
this.touchStart(event);
|
||||
this.moving = true;
|
||||
this.startMoveX = this.moveX;
|
||||
this.startMoveY = this.moveY;
|
||||
this.maxMoveX = Math.max(0, (rect.width - winWidth) / 2);
|
||||
this.maxMoveY = Math.max(0, (rect.height - winHeight) / 2);
|
||||
},
|
||||
|
||||
startZoom(event) {
|
||||
this.moving = false;
|
||||
this.zooming = true;
|
||||
this.startScale = this.scale;
|
||||
this.startDistance = getDistance(event.touches);
|
||||
},
|
||||
|
||||
onImageTouchStart(event) {
|
||||
const { touches } = event;
|
||||
const { offsetX = 0 } = this.$refs.swipe || {};
|
||||
|
||||
if (touches.length === 1 && this.scale !== 1) {
|
||||
this.startMove(event);
|
||||
} /* istanbul ignore else */ else if (touches.length === 2 && !offsetX) {
|
||||
this.startZoom(event);
|
||||
}
|
||||
},
|
||||
|
||||
onImageTouchMove(event) {
|
||||
const { touches } = event;
|
||||
if (this.moving || this.zooming) {
|
||||
preventDefault(event, true);
|
||||
}
|
||||
|
||||
if (this.moving) {
|
||||
this.touchMove(event);
|
||||
const moveX = this.deltaX + this.startMoveX;
|
||||
const moveY = this.deltaY + this.startMoveY;
|
||||
this.moveX = range(moveX, -this.maxMoveX, this.maxMoveX);
|
||||
this.moveY = range(moveY, -this.maxMoveY, this.maxMoveY);
|
||||
}
|
||||
|
||||
if (this.zooming && touches.length === 2) {
|
||||
const distance = getDistance(touches);
|
||||
const scale = (this.startScale * distance) / this.startDistance;
|
||||
|
||||
this.setScale(scale);
|
||||
}
|
||||
},
|
||||
|
||||
onImageTouchEnd(event) {
|
||||
/* istanbul ignore else */
|
||||
if (this.moving || this.zooming) {
|
||||
let stopPropagation = true;
|
||||
|
||||
if (
|
||||
this.moving &&
|
||||
this.startMoveX === this.moveX &&
|
||||
this.startMoveY === this.moveY
|
||||
) {
|
||||
stopPropagation = false;
|
||||
}
|
||||
|
||||
if (!event.touches.length) {
|
||||
this.moving = false;
|
||||
this.zooming = false;
|
||||
this.startMoveX = 0;
|
||||
this.startMoveY = 0;
|
||||
this.startScale = 1;
|
||||
|
||||
if (this.scale < 1) {
|
||||
this.resetScale();
|
||||
}
|
||||
}
|
||||
|
||||
if (stopPropagation) {
|
||||
preventDefault(event, true);
|
||||
}
|
||||
}
|
||||
emitScale(args) {
|
||||
this.$emit('scale', args);
|
||||
},
|
||||
|
||||
setActive(active) {
|
||||
this.resetScale();
|
||||
|
||||
if (active !== this.active) {
|
||||
this.active = active;
|
||||
this.$emit('change', active);
|
||||
}
|
||||
},
|
||||
|
||||
setScale(scale) {
|
||||
const value = range(scale, +this.minZoom, +this.maxZoom);
|
||||
|
||||
this.scale = value;
|
||||
this.$emit('scale', { index: this.active, scale: value });
|
||||
},
|
||||
|
||||
resetScale() {
|
||||
this.setScale(1);
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
toggleScale() {
|
||||
const scale = this.scale > 1 ? 1 : 2;
|
||||
|
||||
this.setScale(scale);
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
genIndex() {
|
||||
if (this.showIndex) {
|
||||
return (
|
||||
@@ -313,36 +132,28 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genImages() {
|
||||
const imageSlots = {
|
||||
loading: () => <Loading type="spinner" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<Swipe
|
||||
ref="swipe"
|
||||
lazyRender
|
||||
loop={this.loop}
|
||||
class={bem('swipe')}
|
||||
indicatorColor="white"
|
||||
duration={this.swipeDuration}
|
||||
initialSwipe={this.startPosition}
|
||||
showIndicators={this.showIndicators}
|
||||
indicatorColor="white"
|
||||
onChange={this.setActive}
|
||||
>
|
||||
{this.images.map((image, index) => (
|
||||
<SwipeItem>
|
||||
<Image
|
||||
src={image}
|
||||
fit="contain"
|
||||
class={bem('image')}
|
||||
scopedSlots={imageSlots}
|
||||
style={index === this.active ? this.imageStyle : null}
|
||||
nativeOnTouchstart={this.onImageTouchStart}
|
||||
nativeOnTouchmove={this.onImageTouchMove}
|
||||
nativeOnTouchend={this.onImageTouchEnd}
|
||||
nativeOnTouchcancel={this.onImageTouchEnd}
|
||||
/>
|
||||
</SwipeItem>
|
||||
{this.images.map((image) => (
|
||||
<ImagePreviewItem
|
||||
src={image}
|
||||
show={this.value}
|
||||
active={this.active}
|
||||
maxZoom={this.maxZoom}
|
||||
minZoom={this.minZoom}
|
||||
onScale={this.emitScale}
|
||||
onClose={this.emitClose}
|
||||
/>
|
||||
))}
|
||||
</Swipe>
|
||||
);
|
||||
@@ -364,6 +175,13 @@ export default createComponent({
|
||||
onClosed() {
|
||||
this.$emit('closed');
|
||||
},
|
||||
|
||||
// @exposed-api
|
||||
swipeTo(index, options) {
|
||||
if (this.$refs.swipe) {
|
||||
this.$refs.swipe.swipeTo(index, options);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
// Utils
|
||||
import { bem } from './shared';
|
||||
import { range } from '../utils/format/number';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
|
||||
// Mixins
|
||||
import { TouchMixin } from '../mixins/touch';
|
||||
|
||||
// Component
|
||||
import Image from '../image';
|
||||
import Loading from '../loading';
|
||||
import SwipeItem from '../swipe-item';
|
||||
|
||||
function getDistance(touches) {
|
||||
return Math.sqrt(
|
||||
(touches[0].clientX - touches[1].clientX) ** 2 +
|
||||
(touches[0].clientY - touches[1].clientY) ** 2
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
mixins: [TouchMixin],
|
||||
|
||||
props: {
|
||||
src: String,
|
||||
show: Boolean,
|
||||
active: Number,
|
||||
minZoom: [Number, String],
|
||||
maxZoom: [Number, String],
|
||||
},
|
||||
|
||||
data() {
|
||||
this.windowWidth = window.innerWidth;
|
||||
this.windowHeight = window.innerHeight;
|
||||
|
||||
return {
|
||||
scale: 1,
|
||||
moveX: 0,
|
||||
moveY: 0,
|
||||
moving: false,
|
||||
zooming: false,
|
||||
vertical: false,
|
||||
displayWidth: 0,
|
||||
displayHeight: 0,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
imageStyle() {
|
||||
const { scale } = this;
|
||||
const style = {
|
||||
transitionDuration: this.zooming || this.moving ? '0s' : '.3s',
|
||||
};
|
||||
|
||||
if (scale !== 1) {
|
||||
const offsetX = this.moveX / scale;
|
||||
const offsetY = this.moveY / scale;
|
||||
style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
maxMoveX() {
|
||||
if (this.displayWidth) {
|
||||
return Math.max(
|
||||
0,
|
||||
(this.scale * this.displayWidth - this.windowWidth) / 2
|
||||
);
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
maxMoveY() {
|
||||
if (this.displayHeight) {
|
||||
return Math.max(
|
||||
0,
|
||||
(this.scale * this.displayHeight - this.windowHeight) / 2
|
||||
);
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
show(val) {
|
||||
if (!val) {
|
||||
this.resetScale();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.bindTouchEvent(this.$el);
|
||||
},
|
||||
|
||||
methods: {
|
||||
resetScale() {
|
||||
this.setScale(1);
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
setScale(scale) {
|
||||
this.scale = range(scale, +this.minZoom, +this.maxZoom);
|
||||
this.$emit('scale', {
|
||||
scale: this.scale,
|
||||
index: this.active,
|
||||
});
|
||||
},
|
||||
|
||||
toggleScale() {
|
||||
const scale = this.scale > 1 ? 1 : 2;
|
||||
|
||||
this.setScale(scale);
|
||||
this.moveX = 0;
|
||||
this.moveY = 0;
|
||||
},
|
||||
|
||||
onTouchStart(event) {
|
||||
const { touches } = event;
|
||||
const { offsetX = 0 } = this;
|
||||
|
||||
this.touchStart(event);
|
||||
this.touchStartTime = new Date();
|
||||
|
||||
this.startMoveX = this.moveX;
|
||||
this.startMoveY = this.moveY;
|
||||
|
||||
this.moving = touches.length === 1 && this.scale !== 1;
|
||||
this.zooming = touches.length === 2 && !offsetX;
|
||||
|
||||
if (this.zooming) {
|
||||
this.startScale = this.scale;
|
||||
this.startDistance = getDistance(event.touches);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchMove(event) {
|
||||
const { touches } = event;
|
||||
|
||||
this.touchMove(event);
|
||||
|
||||
if (this.moving || this.zooming) {
|
||||
preventDefault(event, true);
|
||||
}
|
||||
|
||||
if (this.moving) {
|
||||
const moveX = this.deltaX + this.startMoveX;
|
||||
const moveY = this.deltaY + this.startMoveY;
|
||||
this.moveX = range(moveX, -this.maxMoveX, this.maxMoveX);
|
||||
this.moveY = range(moveY, -this.maxMoveY, this.maxMoveY);
|
||||
}
|
||||
|
||||
if (this.zooming && touches.length === 2) {
|
||||
const distance = getDistance(touches);
|
||||
const scale = (this.startScale * distance) / this.startDistance;
|
||||
|
||||
this.setScale(scale);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd(event) {
|
||||
let stopPropagation = false;
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (this.moving || this.zooming) {
|
||||
stopPropagation = true;
|
||||
|
||||
if (
|
||||
this.moving &&
|
||||
this.startMoveX === this.moveX &&
|
||||
this.startMoveY === this.moveY
|
||||
) {
|
||||
stopPropagation = false;
|
||||
}
|
||||
|
||||
if (!event.touches.length) {
|
||||
if (this.zooming) {
|
||||
this.moveX = range(this.moveX, -this.maxMoveX, this.maxMoveX);
|
||||
this.moveY = range(this.moveY, -this.maxMoveY, this.maxMoveY);
|
||||
this.zooming = false;
|
||||
}
|
||||
|
||||
this.moving = false;
|
||||
this.startMoveX = 0;
|
||||
this.startMoveY = 0;
|
||||
this.startScale = 1;
|
||||
|
||||
if (this.scale < 1) {
|
||||
this.resetScale();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// eliminate tap delay on safari
|
||||
preventDefault(event, stopPropagation);
|
||||
|
||||
this.checkTap();
|
||||
this.resetTouchStatus();
|
||||
},
|
||||
|
||||
checkTap() {
|
||||
const { offsetX = 0, offsetY = 0 } = this;
|
||||
const deltaTime = new Date() - this.touchStartTime;
|
||||
const TAP_TIME = 250;
|
||||
const TAP_OFFSET = 10;
|
||||
|
||||
if (
|
||||
offsetX < TAP_OFFSET &&
|
||||
offsetY < TAP_OFFSET &&
|
||||
deltaTime < TAP_TIME
|
||||
) {
|
||||
if (this.doubleTapTimer) {
|
||||
clearTimeout(this.doubleTapTimer);
|
||||
this.doubleTapTimer = null;
|
||||
this.toggleScale();
|
||||
} else {
|
||||
this.doubleTapTimer = setTimeout(() => {
|
||||
this.$emit('close');
|
||||
this.doubleTapTimer = null;
|
||||
}, TAP_TIME);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(event) {
|
||||
const { windowWidth, windowHeight } = this;
|
||||
const { naturalWidth, naturalHeight } = event.target;
|
||||
const windowRatio = windowHeight / windowWidth;
|
||||
const imageRatio = naturalHeight / naturalWidth;
|
||||
|
||||
this.vertical = imageRatio > windowRatio;
|
||||
|
||||
if (this.vertical) {
|
||||
this.displayWidth = windowHeight / imageRatio;
|
||||
this.displayHeight = windowHeight;
|
||||
} else {
|
||||
this.displayWidth = windowWidth;
|
||||
this.displayHeight = windowWidth * imageRatio;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const imageSlots = {
|
||||
loading: () => <Loading type="spinner" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<SwipeItem class={bem('swipe-item')}>
|
||||
<Image
|
||||
src={this.src}
|
||||
fit="contain"
|
||||
class={bem('image', { vertical: this.vertical })}
|
||||
style={this.imageStyle}
|
||||
scopedSlots={imageSlots}
|
||||
onLoad={this.onLoad}
|
||||
/>
|
||||
</SwipeItem>
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -114,9 +114,10 @@ export default {
|
||||
| className | Custom className | _any_ | - |
|
||||
| maxZoom | Max zoom | _number \| string_ | `3` |
|
||||
| minZoom | Min zoom | _number \| string_ | `1/3` |
|
||||
| closeable | Whether to show close icon | _boolean_ | `false` |
|
||||
| closeIcon | Close icon name | _string_ | `clear` |
|
||||
| closeIconPosition | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
|
||||
| closeIcon `v2.5.0` | Close icon name | _string_ | `clear` |
|
||||
| closeIconPosition `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| getContainer | Return the mount node for ImagePreview | _string \| () => Element_ | - |
|
||||
|
||||
### Props
|
||||
|
||||
@@ -136,6 +137,7 @@ export default {
|
||||
| closeable `v2.5.0` | Whether to show close icon | _boolean_ | `false` |
|
||||
| close-icon `v2.5.0` | Close icon name | _string_ | `clear` |
|
||||
| close-icon-position `v2.5.0` | Close icon position，can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| get-container | Return the mount node for ImagePreview | _string \| () => Element_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -145,6 +147,7 @@ export default {
|
||||
| closed `v2.5.6` | Triggered after closed | - |
|
||||
| change | Triggered when current image change | index: index of current image |
|
||||
| scale `v2.5.0` | Triggered when current image scale | { index: index of current image, scale: scale of current image} |
|
||||
| swipeTo `2.9.0` | Swipe to target index | index: target index, options: Options | void |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -148,9 +148,10 @@ export default {
|
||||
| className | 自定义类名 | _any_ | - |
|
||||
| maxZoom | 手势缩放时，最大缩放比例 | _number \| string_ | `3` |
|
||||
| minZoom | 手势缩放时，最小缩放比例 | _number \| string_ | `1/3` |
|
||||
| closeable | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| closeIcon | 关闭图标名称或图片链接 | _string_ | `clear` |
|
||||
| closeIconPosition | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| closeIcon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
|
||||
| closeIconPosition `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
### Props
|
||||
|
||||
@@ -172,6 +173,7 @@ export default {
|
||||
| closeable `v2.5.0` | 是否显示关闭图标 | _boolean_ | `false` |
|
||||
| close-icon `v2.5.0` | 关闭图标名称或图片链接 | _string_ | `clear` |
|
||||
| close-icon-position `v2.5.0` | 关闭图标位置，可选值为`top-left`<br>`bottom-left` `bottom-right` | _string_ | `top-right` |
|
||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -183,6 +185,7 @@ export default {
|
||||
| closed `v2.5.6` | 关闭且且动画结束后触发 | - |
|
||||
| change | 切换当前图片时触发 | index: 当前图片的索引 |
|
||||
| scale `v2.5.0` | 缩放当前图片时触发 | { index: 当前图片的索引, scale: 当前缩放的值 } |
|
||||
| swipeTo `2.9.0` | 切换到指定位置 | index: number, options: Options | void |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@ const defaultConfig = {
|
||||
showIndicators: false,
|
||||
closeOnPopstate: false,
|
||||
closeIconPosition: 'top-right',
|
||||
getContainer: 'body',
|
||||
};
|
||||
|
||||
const initInstance = () => {
|
||||
|
||||
@@ -9,6 +9,12 @@
|
||||
|
||||
&__swipe {
|
||||
height: 100%;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__cover {
|
||||
@@ -18,13 +24,14 @@
|
||||
}
|
||||
|
||||
&__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition-property: transform;
|
||||
|
||||
&--vertical {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
// disable desktop browser image drag
|
||||
-webkit-user-drag: none;
|
||||
@@ -48,10 +55,11 @@
|
||||
|
||||
&__index {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
top: @padding-md;
|
||||
left: 50%;
|
||||
color: @image-preview-index-text-color;
|
||||
font-size: @image-preview-index-font-size;
|
||||
line-height: @image-preview-index-line-height;
|
||||
text-shadow: @image-preview-index-text-shadow;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createNamespace } from '../utils';
|
||||
|
||||
const [createComponent, bem] = createNamespace('image-preview');
|
||||
|
||||
export { createComponent, bem };
|
||||
@@ -43,9 +43,9 @@ exports[`render image 1`] = `
|
||||
<div class="van-image-preview" name="van-fade">
|
||||
<div class="van-swipe van-image-preview__swipe">
|
||||
<div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
|
||||
<div class="van-swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
||||
<div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-image-preview__index">1 / 3</div>
|
||||
@@ -60,10 +60,12 @@ exports[`set show-index prop to false 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`zoom 1`] = `
|
||||
<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;">
|
||||
exports[`zoom in and drag image to move 1`] = `
|
||||
<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);"><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>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`zoom in and drag image to move 2`] = `<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(25px, 25px);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;"></div>`;
|
||||
|
||||
@@ -1,14 +1,33 @@
|
||||
import Vue from 'vue';
|
||||
import ImagePreview from '..';
|
||||
import ImagePreviewVue from '../ImagePreview';
|
||||
import { mount, trigger, triggerDrag, later } from '../../../test';
|
||||
import {
|
||||
later,
|
||||
mount,
|
||||
trigger,
|
||||
triggerDrag,
|
||||
mockGetBoundingClientRect,
|
||||
} from '../../../test';
|
||||
|
||||
function triggerZoom(el, x, y) {
|
||||
trigger(el, 'touchstart', 0, 0, { x, y });
|
||||
trigger(el, 'touchmove', -x / 4, -y / 4, { x, y });
|
||||
trigger(el, 'touchmove', -x / 3, -y / 3, { x, y });
|
||||
trigger(el, 'touchmove', -x / 2, -y / 2, { x, y });
|
||||
function triggerTwoFingerTouchmove(el, x, y) {
|
||||
trigger(el, 'touchmove', -x, -y, { x, y });
|
||||
}
|
||||
|
||||
function triggerZoom(el, x, y, direction = 'in') {
|
||||
trigger(el, 'touchstart', 0, 0, { x, y });
|
||||
|
||||
if (direction === 'in') {
|
||||
triggerTwoFingerTouchmove(el, x / 4, y / 4);
|
||||
triggerTwoFingerTouchmove(el, x / 3, y / 3);
|
||||
triggerTwoFingerTouchmove(el, x / 2, y / 2);
|
||||
triggerTwoFingerTouchmove(el, x, y);
|
||||
} else if (direction === 'out') {
|
||||
triggerTwoFingerTouchmove(el, x, y);
|
||||
triggerTwoFingerTouchmove(el, x / 2, y / 2);
|
||||
triggerTwoFingerTouchmove(el, x / 3, y / 3);
|
||||
triggerTwoFingerTouchmove(el, x / 4, y / 4);
|
||||
}
|
||||
|
||||
trigger(el, 'touchend', 0, 0, { touchList: [] });
|
||||
}
|
||||
|
||||
@@ -27,15 +46,14 @@ test('render image', async () => {
|
||||
|
||||
await later();
|
||||
|
||||
const swipe = wrapper.find('.van-swipe__track');
|
||||
const swipe = wrapper.find('.van-swipe-item');
|
||||
triggerDrag(swipe, 500, 0);
|
||||
expect(wrapper.emitted('input')).toBeFalsy();
|
||||
triggerDrag(swipe, 0, 0);
|
||||
|
||||
await later(250);
|
||||
|
||||
expect(wrapper.emitted('input')[0][0]).toBeFalsy();
|
||||
expect(wrapper.emitted('change')[0][0]).toEqual(2);
|
||||
|
||||
triggerDrag(swipe, 0, 0);
|
||||
await later(250);
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(false);
|
||||
});
|
||||
|
||||
test('closeable prop', () => {
|
||||
@@ -116,21 +134,34 @@ test('function call', (done) => {
|
||||
});
|
||||
});
|
||||
|
||||
test('double click', async (done) => {
|
||||
const instance = ImagePreview(images);
|
||||
test('double click', async () => {
|
||||
const onScale = jest.fn();
|
||||
const wrapper = mount(ImagePreviewVue, {
|
||||
propsData: {
|
||||
images,
|
||||
value: true,
|
||||
},
|
||||
listeners: {
|
||||
scale: onScale,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const swipe = instance.$el.querySelector('.van-swipe__track');
|
||||
const swipe = wrapper.find('.van-swipe-item');
|
||||
triggerDrag(swipe, 0, 0);
|
||||
triggerDrag(swipe, 0, 0);
|
||||
expect(instance.scale).toEqual(2);
|
||||
expect(onScale).toHaveBeenCalledWith({
|
||||
index: 0,
|
||||
scale: 2,
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
triggerDrag(swipe, 0, 0);
|
||||
triggerDrag(swipe, 0, 0);
|
||||
expect(instance.scale).toEqual(1);
|
||||
done();
|
||||
expect(onScale).toHaveBeenLastCalledWith({
|
||||
index: 0,
|
||||
scale: 1,
|
||||
});
|
||||
});
|
||||
|
||||
test('onClose option', () => {
|
||||
@@ -165,9 +196,7 @@ test('onChange option', async (done) => {
|
||||
});
|
||||
|
||||
test('onScale option', async (done) => {
|
||||
const { getBoundingClientRect } = Element.prototype;
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 }));
|
||||
|
||||
const restore = mockGetBoundingClientRect({ width: 100 });
|
||||
const instance = ImagePreview({
|
||||
images,
|
||||
startPosition: 0,
|
||||
@@ -181,7 +210,7 @@ test('onScale option', async (done) => {
|
||||
await later();
|
||||
const image = instance.$el.querySelector('img');
|
||||
triggerZoom(image, 300, 300);
|
||||
Element.prototype.getBoundingClientRect = getBoundingClientRect;
|
||||
restore();
|
||||
});
|
||||
|
||||
test('register component', () => {
|
||||
@@ -189,21 +218,59 @@ test('register component', () => {
|
||||
expect(Vue.component(ImagePreviewVue.name)).toBeTruthy();
|
||||
});
|
||||
|
||||
test('zoom', async () => {
|
||||
const { getBoundingClientRect } = Element.prototype;
|
||||
Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100 }));
|
||||
test('zoom in and drag image to move', async () => {
|
||||
const restore = mockGetBoundingClientRect({ width: 100 });
|
||||
const originWindowWidth = window.innerWidth;
|
||||
const originWindowHeight = window.innerHeight;
|
||||
|
||||
window.innerWidth = 100;
|
||||
window.innerHeight = 100;
|
||||
|
||||
const wrapper = mount(ImagePreviewVue, {
|
||||
propsData: { images, value: true },
|
||||
});
|
||||
|
||||
await later();
|
||||
const image = wrapper.find('.van-image');
|
||||
const image = wrapper.find('img');
|
||||
triggerZoom(image, 300, 300);
|
||||
triggerDrag(image, 300, 300);
|
||||
|
||||
expect(image).toMatchSnapshot();
|
||||
Element.prototype.getBoundingClientRect = getBoundingClientRect;
|
||||
// mock image size
|
||||
['naturalWidth', 'naturalHeight'].forEach((key) => {
|
||||
Object.defineProperty(image.element, key, { value: 300 });
|
||||
});
|
||||
|
||||
// drag image before load
|
||||
triggerDrag(image, 300, 300);
|
||||
expect(wrapper.find('.van-image')).toMatchSnapshot();
|
||||
|
||||
// drag image after load
|
||||
image.trigger('load');
|
||||
triggerDrag(image, 300, 300);
|
||||
expect(wrapper.find('.van-image')).toMatchSnapshot();
|
||||
|
||||
window.innerWidth = originWindowWidth;
|
||||
window.innerHeight = originWindowHeight;
|
||||
restore();
|
||||
});
|
||||
|
||||
test('zoom out', async () => {
|
||||
const restore = mockGetBoundingClientRect({ width: 100 });
|
||||
|
||||
const onScale = jest.fn();
|
||||
const wrapper = mount(ImagePreviewVue, {
|
||||
propsData: { images, value: true },
|
||||
listeners: {
|
||||
scale: onScale,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
const image = wrapper.find('.van-image');
|
||||
triggerZoom(image, 300, 300, 'out');
|
||||
|
||||
expect(onScale).toHaveBeenLastCalledWith({ index: 0, scale: 1 });
|
||||
|
||||
restore();
|
||||
});
|
||||
|
||||
test('set show-index prop to false', () => {
|
||||
@@ -265,3 +332,68 @@ test('closeOnPopstate', () => {
|
||||
test('ImagePreview.Component', () => {
|
||||
expect(ImagePreview.Component).toEqual(ImagePreviewVue);
|
||||
});
|
||||
|
||||
test('get container with function call ', async (done) => {
|
||||
const element = document.createElement('div');
|
||||
document.body.appendChild(element);
|
||||
ImagePreview({ images, getContainer: () => element });
|
||||
|
||||
await Vue.nextTick();
|
||||
const wrapperDiv = document.querySelector('.van-image-preview');
|
||||
expect(wrapperDiv.parentNode).toEqual(element);
|
||||
document.body.removeChild(element);
|
||||
|
||||
ImagePreview(images);
|
||||
|
||||
await Vue.nextTick();
|
||||
const wrapperBody = document.querySelector('.van-image-preview');
|
||||
expect(wrapperBody.parentNode).toEqual(document.body);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
test('get container with component call', () => {
|
||||
const div1 = document.createElement('div');
|
||||
const div2 = document.createElement('div');
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<van-image-preview :value="true" :get-container="getContainer">
|
||||
</van-image-preview>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
getContainer: () => div1,
|
||||
};
|
||||
},
|
||||
});
|
||||
const imageView = wrapper.find('.van-image-preview').element;
|
||||
|
||||
expect(imageView.parentNode).toEqual(div1);
|
||||
wrapper.vm.getContainer = () => div2;
|
||||
expect(imageView.parentNode).toEqual(div2);
|
||||
wrapper.vm.getContainer = null;
|
||||
expect(wrapper.element).toEqual(wrapper.element);
|
||||
});
|
||||
|
||||
test('swipeTo method', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<van-image-preview ref="imagePreview" :value="true" :images="images">
|
||||
</van-image-preview>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
images,
|
||||
};
|
||||
},
|
||||
});
|
||||
const { imagePreview } = wrapper.vm.$refs;
|
||||
imagePreview.swipeTo(2);
|
||||
|
||||
await later(100);
|
||||
expect(imagePreview.active).toEqual(2);
|
||||
});
|
||||
|
||||
+5
-4
@@ -98,7 +98,8 @@ Vue.use(Lazyload);
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
| ------- | -------------------------- |
|
||||
| loading | Custom loading placeholder |
|
||||
| error | Custom error placeholder |
|
||||
| Name | Description |
|
||||
| ---------------- | ---------------------------------- |
|
||||
| default `v2.9.0` | Custom the content below the image |
|
||||
| loading | Custom loading placeholder |
|
||||
| error | Custom error placeholder |
|
||||
|
||||
@@ -130,10 +130,11 @@ Vue.use(Lazyload);
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------- | -------------------------- |
|
||||
| loading | 自定义加载中的提示内容 |
|
||||
| error | 自定义加载失败时的提示内容 |
|
||||
| 名称 | 说明 |
|
||||
| ---------------- | -------------------------- |
|
||||
| default `v2.9.0` | 自定义图片下方的内容 |
|
||||
| loading | 自定义加载中的提示内容 |
|
||||
| error | 自定义加载失败时的提示内容 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@@ -173,6 +173,7 @@ export default createComponent({
|
||||
>
|
||||
{this.genImage()}
|
||||
{this.genPlaceholder()}
|
||||
{this.slots()}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`default slot 1`] = `
|
||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
|
||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
||||
<!----></i></div>Custom Default
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`error-icon prop 1`] = `
|
||||
<div class="van-image">
|
||||
<div class="van-image__error"><i class="van-icon van-icon-error van-image__error-icon">
|
||||
|
||||
@@ -157,3 +157,16 @@ test('radius prop', () => {
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('default slot', () => {
|
||||
const wrapper = mount(VanImage, {
|
||||
propsData: {
|
||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
},
|
||||
scopedSlots: {
|
||||
default: () => 'Custom Default',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<img v-for="img in imageList" v-lazy="img" />
|
||||
<img v-for="img in imageList" :key="img" v-lazy="img" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title2')">
|
||||
<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
|
||||
<div
|
||||
v-for="img in backgroundImageList"
|
||||
:key="img"
|
||||
v-lazy:background-image="img"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('title3')">
|
||||
<lazy-component>
|
||||
<img v-for="img in componentImageList" v-lazy="img" />
|
||||
<img v-for="img in componentImageList" :key="img" v-lazy="img" />
|
||||
</lazy-component>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
@@ -68,7 +72,6 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title,
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Listen to click outside event
|
||||
*/
|
||||
import { on, off } from '../utils/dom/event';
|
||||
|
||||
export const ClickOutsideMixin = (config) => ({
|
||||
props: {
|
||||
closeOnClickOutside: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const clickOutsideHandler = (event) => {
|
||||
if (this.closeOnClickOutside && !this.$el.contains(event.target)) {
|
||||
this[config.method]();
|
||||
}
|
||||
};
|
||||
|
||||
return { clickOutsideHandler };
|
||||
},
|
||||
|
||||
mounted() {
|
||||
on(document, config.event, this.clickOutsideHandler);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
off(document, config.event, this.clickOutsideHandler);
|
||||
},
|
||||
});
|
||||
@@ -1,41 +0,0 @@
|
||||
/**
|
||||
* Listen to click outside event
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import { on, off } from '../utils/dom/event';
|
||||
|
||||
export type ClickOutsideMixinConfig = {
|
||||
event: string;
|
||||
method: string;
|
||||
};
|
||||
|
||||
export const ClickOutsideMixin = (config: ClickOutsideMixinConfig) =>
|
||||
Vue.extend({
|
||||
props: {
|
||||
closeOnClickOutside: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
const clickOutsideHandler = (event: Event) => {
|
||||
if (
|
||||
this.closeOnClickOutside &&
|
||||
!this.$el.contains(event.target as Node)
|
||||
) {
|
||||
(this as any)[config.method]();
|
||||
}
|
||||
};
|
||||
|
||||
return { clickOutsideHandler };
|
||||
},
|
||||
|
||||
mounted() {
|
||||
on(document, config.event, this.clickOutsideHandler);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
off(document, config.event, this.clickOutsideHandler);
|
||||
},
|
||||
});
|
||||
@@ -145,7 +145,7 @@ export function PopupMixin(options = {}) {
|
||||
},
|
||||
|
||||
removeLock() {
|
||||
if (this.lockScroll) {
|
||||
if (this.lockScroll && context.lockCount) {
|
||||
context.lockCount--;
|
||||
off(document, 'touchstart', this.touchStart);
|
||||
off(document, 'touchmove', this.onTouchMove);
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
import Vue, { PropType } from 'vue';
|
||||
import { GetContainer } from './popup/type';
|
||||
|
||||
type PortalMixinOptions = {
|
||||
ref?: string;
|
||||
afterPortal?: () => void;
|
||||
};
|
||||
|
||||
function getElement(selector: string | GetContainer): Element | null {
|
||||
function getElement(selector) {
|
||||
if (typeof selector === 'string') {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
@@ -14,10 +6,10 @@ function getElement(selector: string | GetContainer): Element | null {
|
||||
return selector();
|
||||
}
|
||||
|
||||
export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) {
|
||||
return Vue.extend({
|
||||
export function PortalMixin({ ref, afterPortal }) {
|
||||
return {
|
||||
props: {
|
||||
getContainer: [String, Function] as PropType<string | GetContainer>,
|
||||
getContainer: [String, Function],
|
||||
},
|
||||
|
||||
watch: {
|
||||
@@ -33,7 +25,7 @@ export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) {
|
||||
methods: {
|
||||
portal() {
|
||||
const { getContainer } = this;
|
||||
const el = ref ? (this.$refs[ref] as HTMLElement) : this.$el;
|
||||
const el = ref ? this.$refs[ref] : this.$el;
|
||||
|
||||
let container;
|
||||
if (getContainer) {
|
||||
@@ -51,5 +43,5 @@ export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) {
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
@@ -1,21 +1,9 @@
|
||||
import Vue from 'vue';
|
||||
import { sortChildren } from '../utils/vnodes';
|
||||
|
||||
type ChildrenMixinOptions = {
|
||||
indexKey?: any;
|
||||
};
|
||||
|
||||
type ChildrenMixinThis = {
|
||||
disableBindRelation?: boolean;
|
||||
};
|
||||
|
||||
export function ChildrenMixin(
|
||||
parent: string,
|
||||
options: ChildrenMixinOptions = {}
|
||||
) {
|
||||
export function ChildrenMixin(parent, options = {}) {
|
||||
const indexKey = options.indexKey || 'index';
|
||||
|
||||
return Vue.extend({
|
||||
return {
|
||||
inject: {
|
||||
[parent]: {
|
||||
default: null,
|
||||
@@ -24,11 +12,11 @@ export function ChildrenMixin(
|
||||
|
||||
computed: {
|
||||
parent() {
|
||||
if ((this as ChildrenMixinThis).disableBindRelation) {
|
||||
if (this.disableBindRelation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (this as any)[parent];
|
||||
return this[parent];
|
||||
},
|
||||
|
||||
[indexKey]() {
|
||||
@@ -49,7 +37,7 @@ export function ChildrenMixin(
|
||||
beforeDestroy() {
|
||||
if (this.parent) {
|
||||
this.parent.children = this.parent.children.filter(
|
||||
(item: any) => item !== this
|
||||
(item) => item !== this
|
||||
);
|
||||
}
|
||||
},
|
||||
@@ -67,10 +55,10 @@ export function ChildrenMixin(
|
||||
this.parent.children = children;
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function ParentMixin(parent: string) {
|
||||
export function ParentMixin(parent) {
|
||||
return {
|
||||
provide() {
|
||||
return {
|
||||
@@ -2,11 +2,9 @@
|
||||
* Use scopedSlots in Vue 2.6+
|
||||
* downgrade to slots in lower version
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
|
||||
export const SlotsMixin = Vue.extend({
|
||||
export const SlotsMixin = {
|
||||
methods: {
|
||||
slots(name = 'default', props: any) {
|
||||
slots(name = 'default', props) {
|
||||
const { $slots, $scopedSlots } = this;
|
||||
const scopedSlot = $scopedSlots[name];
|
||||
|
||||
@@ -17,4 +15,4 @@ export const SlotsMixin = Vue.extend({
|
||||
return $slots[name];
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -1,9 +1,8 @@
|
||||
import Vue from 'vue';
|
||||
import { on } from '../utils/dom/event';
|
||||
|
||||
const MIN_DISTANCE = 10;
|
||||
|
||||
function getDirection(x: number, y: number) {
|
||||
function getDirection(x, y) {
|
||||
if (x > y && x > MIN_DISTANCE) {
|
||||
return 'horizontal';
|
||||
}
|
||||
@@ -15,29 +14,19 @@ function getDirection(x: number, y: number) {
|
||||
return '';
|
||||
}
|
||||
|
||||
type TouchMixinData = {
|
||||
startX: number;
|
||||
startY: number;
|
||||
deltaX: number;
|
||||
deltaY: number;
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
direction: string;
|
||||
};
|
||||
|
||||
export const TouchMixin = Vue.extend({
|
||||
export const TouchMixin = {
|
||||
data() {
|
||||
return { direction: '' } as TouchMixinData;
|
||||
return { direction: '' };
|
||||
},
|
||||
|
||||
methods: {
|
||||
touchStart(event: TouchEvent) {
|
||||
touchStart(event) {
|
||||
this.resetTouchStatus();
|
||||
this.startX = event.touches[0].clientX;
|
||||
this.startY = event.touches[0].clientY;
|
||||
},
|
||||
|
||||
touchMove(event: TouchEvent) {
|
||||
touchMove(event) {
|
||||
const touch = event.touches[0];
|
||||
this.deltaX = touch.clientX - this.startX;
|
||||
this.deltaY = touch.clientY - this.startY;
|
||||
@@ -57,8 +46,8 @@ export const TouchMixin = Vue.extend({
|
||||
|
||||
// avoid Vue 2.6 event bubble issues by manually binding events
|
||||
// https://github.com/youzan/vant/issues/3015
|
||||
bindTouchEvent(el: HTMLElement) {
|
||||
const { onTouchStart, onTouchMove, onTouchEnd } = this as any;
|
||||
bindTouchEvent(el) {
|
||||
const { onTouchStart, onTouchMove, onTouchEnd } = this;
|
||||
|
||||
on(el, 'touchstart', onTouchStart);
|
||||
on(el, 'touchmove', onTouchMove);
|
||||
@@ -69,4 +58,4 @@ export const TouchMixin = Vue.extend({
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -60,10 +60,14 @@ export default createComponent({
|
||||
this.offset = this.wrapWidth;
|
||||
this.duration = 0;
|
||||
|
||||
doubleRaf(() => {
|
||||
this.offset = -this.contentWidth;
|
||||
this.duration = (this.contentWidth + this.wrapWidth) / this.speed;
|
||||
this.$emit('replay');
|
||||
// wait for Vue to render offset
|
||||
this.$nextTick(() => {
|
||||
// use double raf to ensure animation can start
|
||||
doubleRaf(() => {
|
||||
this.offset = -this.contentWidth;
|
||||
this.duration = (this.contentWidth + this.wrapWidth) / this.speed;
|
||||
this.$emit('replay');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@@ -45,8 +45,10 @@ export default createComponent({
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd() {
|
||||
onTouchEnd(event) {
|
||||
if (this.active) {
|
||||
// eliminate tap delay on safari
|
||||
event.preventDefault();
|
||||
this.active = false;
|
||||
this.$emit('press', this.text, this.type);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { stopPropagation } from '../utils/dom/event';
|
||||
import { BindEventMixin } from '../mixins/bind-event';
|
||||
import Key from './Key';
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('number-keyboard');
|
||||
const [createComponent, bem] = createNamespace('number-keyboard');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import NumberKeyboard from '..';
|
||||
import { mount, trigger, later } from '../../../test';
|
||||
import { mount, trigger } from '../../../test';
|
||||
|
||||
function clickKey(key) {
|
||||
trigger(key, 'touchstart');
|
||||
|
||||
@@ -3,7 +3,6 @@ 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;
|
||||
|
||||
@@ -256,11 +255,9 @@ export default createComponent({
|
||||
},
|
||||
|
||||
genOptions() {
|
||||
const optionStyle = {};
|
||||
|
||||
if (this.itemHeight !== DEFAULT_ITEM_HEIGHT) {
|
||||
optionStyle.height = `${this.itemHeight}px`;
|
||||
}
|
||||
const optionStyle = {
|
||||
height: `${this.itemHeight}px`,
|
||||
};
|
||||
|
||||
return this.options.map((option, index) => {
|
||||
const text = this.getOptionText(option);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@@ -9,7 +9,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('defaultIndex')">
|
||||
<demo-block card :title="t('defaultIndex')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@@ -19,7 +19,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('multipleColumns')">
|
||||
<demo-block card :title="t('multipleColumns')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@@ -29,7 +29,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('cascade')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('cascade')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@@ -39,7 +39,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('disableOption')">
|
||||
<demo-block card :title="t('disableOption')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@@ -47,7 +47,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('setColumnValues')">
|
||||
<demo-block card :title="t('setColumnValues')">
|
||||
<van-picker
|
||||
show-toolbar
|
||||
:title="t('title')"
|
||||
@@ -56,11 +56,11 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('loadingStatus')">
|
||||
<demo-block card :title="t('loadingStatus')">
|
||||
<van-picker loading show-toolbar :title="t('title')" :columns="columns" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('withPopup')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('withPopup')">
|
||||
<van-field
|
||||
readonly
|
||||
clickable
|
||||
|
||||
+23
-12
@@ -1,5 +1,5 @@
|
||||
// Utils
|
||||
import { createNamespace, isDef, isObject } from '../utils';
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { preventDefault } from '../utils/dom/event';
|
||||
import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
|
||||
import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';
|
||||
@@ -91,7 +91,7 @@ export default createComponent({
|
||||
: +this.defaultIndex;
|
||||
|
||||
formatted.push({
|
||||
values: cursor.children.map((item) => item[this.valueKey]),
|
||||
values: cursor.children,
|
||||
className: cursor.className,
|
||||
defaultIndex,
|
||||
});
|
||||
@@ -106,7 +106,16 @@ export default createComponent({
|
||||
if (this.dataType === 'text') {
|
||||
this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));
|
||||
} else {
|
||||
this.$emit(event, this.getValues(), this.getIndexes());
|
||||
let values = this.getValues();
|
||||
|
||||
// compatible with old version of wrong parameters
|
||||
// should be removed in next major version
|
||||
// see: https://github.com/youzan/vant/issues/5905
|
||||
if (this.dataType === 'cascade') {
|
||||
values = values.map((item) => item[this.valueKey]);
|
||||
}
|
||||
|
||||
this.$emit(event, values, this.getIndexes());
|
||||
}
|
||||
},
|
||||
|
||||
@@ -138,7 +147,16 @@ export default createComponent({
|
||||
this.getColumnIndex(0)
|
||||
);
|
||||
} else {
|
||||
this.$emit('change', this, this.getValues(), columnIndex);
|
||||
let values = this.getValues();
|
||||
|
||||
// compatible with old version of wrong parameters
|
||||
// should be removed in next major version
|
||||
// see: https://github.com/youzan/vant/issues/5905
|
||||
if (this.dataType === 'cascade') {
|
||||
values = values.map((item) => item[this.valueKey]);
|
||||
}
|
||||
|
||||
this.$emit('change', this, values, columnIndex);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -200,14 +218,7 @@ export default createComponent({
|
||||
const column = this.children[index];
|
||||
|
||||
if (column) {
|
||||
if (this.dataType === 'cascade') {
|
||||
// map should be removed in next major version
|
||||
column.setOptions(
|
||||
options.map((item) => (isObject(item) ? item[this.valueKey] : item))
|
||||
);
|
||||
} else {
|
||||
column.setOptions(options);
|
||||
}
|
||||
column.setOptions(options);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -104,11 +104,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: @picker-option-height;
|
||||
padding: 0 @padding-base;
|
||||
color: @picker-option-text-color;
|
||||
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: @picker-option-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`disabled in cascade 1`] = `
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<div class="van-ellipsis">A2</div>
|
||||
</li>
|
||||
`;
|
||||
@@ -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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">周一</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">周二</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">周三</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">周四</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">周五</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">上午</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">下午</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">西湖区</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column 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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">浙江</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">福建</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column 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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">杭州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">宁波</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis">温州</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">嘉兴</div>
|
||||
</li>
|
||||
<li role="button" tabindex="0" class="van-picker-column__item">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
|
||||
<div class="van-ellipsis">湖州</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -76,7 +76,7 @@ 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">
|
||||
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
|
||||
<div class="van-ellipsis"><div>option</div></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -108,3 +108,20 @@ test('setIndexes of cascade columns', () => {
|
||||
wrapper.find('.van-picker__confirm').trigger('click');
|
||||
expect(wrapper.emitted('confirm')[0][0]).toEqual(['A2', 'B3', 'C6']);
|
||||
});
|
||||
|
||||
test('disabled in cascade', () => {
|
||||
const wrapper = mount(Picker, {
|
||||
propsData: {
|
||||
showToolbar: true,
|
||||
columns: [
|
||||
COLUMNS[0],
|
||||
{
|
||||
...COLUMNS[1],
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-picker-column__item--disabled')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
|
||||
<van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">
|
||||
{{ t('content') }}
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('position')">
|
||||
<demo-block card :title="t('position')">
|
||||
<van-cell :title="t('buttonTop')" is-link @click="showTop = true" />
|
||||
<van-cell :title="t('buttonBottom')" is-link @click="showBottom = true" />
|
||||
<van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
|
||||
@@ -31,7 +31,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('closeIcon')">
|
||||
<demo-block card :title="t('closeIcon')">
|
||||
<van-cell :title="t('closeIcon')" is-link @click="showCloseIcon = true" />
|
||||
<van-cell
|
||||
:title="t('customCloseIcon')"
|
||||
@@ -66,7 +66,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('roundCorner')">
|
||||
<demo-block card :title="t('roundCorner')">
|
||||
<van-cell
|
||||
:title="t('roundCorner')"
|
||||
is-link
|
||||
@@ -80,7 +80,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!isWeapp" :title="t('getContainer')">
|
||||
<demo-block card v-if="!isWeapp" :title="t('getContainer')">
|
||||
<van-cell
|
||||
:title="t('getContainer')"
|
||||
is-link
|
||||
|
||||
+2
-2
@@ -39,7 +39,7 @@ export default {
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
color="#ee0a24"
|
||||
color="#ffd21e"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
@@ -105,7 +105,7 @@ export default {
|
||||
| count | Count | _number \| string_ | `5` |
|
||||
| size | Icon size | _number \| string_ | `20px` |
|
||||
| gutter | Icon gutter | _number \| string_ | `4px` |
|
||||
| color | Selected color | _string_ | `#ffd21e` |
|
||||
| color | Selected color | _string_ | `#ee0a24` |
|
||||
| void-color | Void color | _string_ | `#c8c9cc` |
|
||||
| disabled-color | Disabled color | _string_ | `#c8c9cc` |
|
||||
| icon | Selected icon | _string_ | `star` |
|
||||
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
color="#ee0a24"
|
||||
color="#ffd21e"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
@@ -105,7 +105,7 @@ export default {
|
||||
| count | 图标总数 | _number \| string_ | `5` |
|
||||
| size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
|
||||
| gutter | 图标间距，默认单位为`px` | _number \| string_ | `4px` |
|
||||
| color | 选中时的颜色 | _string_ | `#ffd21e` |
|
||||
| color | 选中时的颜色 | _string_ | `#ee0a24` |
|
||||
| void-color | 未选中时的颜色 | _string_ | `#c8c9cc` |
|
||||
| disabled-color | 禁用时的颜色 | _string_ | `#c8c9cc` |
|
||||
| icon | 选中时的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `star` |
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<van-rate
|
||||
v-model="value3"
|
||||
:size="25"
|
||||
color="#ee0a24"
|
||||
color="#ffd21e"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
|
||||
@@ -32,11 +32,11 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="0" role="radiogroup" class="van-rate">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(238, 10, 36); font-size: 25px;">
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="true" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star van-rate__icon van-rate__icon--full" style="color: rgb(255, 210, 30); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
<div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star van-rate__icon" style="color: rgb(238, 238, 238); font-size: 25px;">
|
||||
<!----></i></div>
|
||||
|
||||
@@ -88,7 +88,7 @@ export default {
|
||||
|
||||
### Custom Action Button
|
||||
|
||||
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
|
||||
Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot.
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@@ -116,6 +116,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
|
||||
| maxlength | Max length of value | _number \| string_ | - |
|
||||
| placeholder | Placeholder | _string_ | - |
|
||||
| clearable | Whether to be clearable | _boolean_ | `true` |
|
||||
| clear-trigger `v2.9.1` | When to display the clear icon, `always` means to display the icon when value is not empty, `focus` means to display the icon when input is focused | _string_ | `focus` |
|
||||
| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
|
||||
| show-action | Whether to show right action button | _boolean_ | `false` |
|
||||
| action-text `v2.2.2` | Text of action button | _boolean_ | `Cancel` |
|
||||
|
||||
@@ -13,7 +13,7 @@ Vue.use(Search);
|
||||
|
||||
### 基础用法
|
||||
|
||||
v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色
|
||||
v-model 用于控制搜索框中的文字，background 可以自定义搜索框外部背景色。
|
||||
|
||||
```html
|
||||
<van-search v-model="value" placeholder="请输入搜索关键词" />
|
||||
@@ -21,7 +21,7 @@ v-model 用于控制搜索框中的文字，background 可以自定义搜索框
|
||||
|
||||
### 事件监听
|
||||
|
||||
Search 组件提供了`search`和`cancel`事件，`search`事件在点击键盘上的搜索/回车按钮后触发，`cancel`事件在点击搜索框右侧取消按钮时触发
|
||||
Search 组件提供了 `search` 和 `cancel` 事件，`search` 事件在点击键盘上的搜索/回车按钮后触发，`cancel` 事件在点击搜索框右侧取消按钮时触发。
|
||||
|
||||
```html
|
||||
<form action="/">
|
||||
@@ -55,11 +55,11 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
|
||||
> Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。
|
||||
|
||||
### 搜索框内容对齐
|
||||
|
||||
通过 `input-align` 属性设置搜索框内容的对齐方式，可选值为`center`、`right`
|
||||
通过 `input-align` 属性设置搜索框内容的对齐方式，可选值为 `center`、`right`。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@@ -71,7 +71,7 @@ export default {
|
||||
|
||||
### 禁用搜索框
|
||||
|
||||
通过`disabled`属性禁用搜索框
|
||||
通过 `disabled` 属性禁用搜索框。
|
||||
|
||||
```html
|
||||
<van-search v-model="value" disabled placeholder="请输入搜索关键词" />
|
||||
@@ -79,7 +79,7 @@ export default {
|
||||
|
||||
### 自定义背景色
|
||||
|
||||
通过`background`属性可以设置搜索框外部的背景色，通过`shape`属性设置搜索框的形状，可选值为`round`
|
||||
通过 `background` 属性可以设置搜索框外部的背景色，通过 `shape` 属性设置搜索框的形状，可选值为 `round`。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@@ -92,7 +92,7 @@ export default {
|
||||
|
||||
### 自定义按钮
|
||||
|
||||
使用`action`插槽可以自定义右侧按钮的内容。使用插槽后，`cancel`事件将不再触发
|
||||
使用 `action` 插槽可以自定义右侧按钮的内容。使用插槽后，`cancel` 事件将不再触发。
|
||||
|
||||
```html
|
||||
<van-search
|
||||
@@ -119,7 +119,8 @@ export default {
|
||||
| background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
|
||||
| maxlength | 输入的最大字符数 | _number \| string_ | - |
|
||||
| placeholder | 占位提示文字 | _string_ | - |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `true` |
|
||||
| clearable | 是否启用清除图标，点击清除图标后会清空输入框 | _boolean_ | `true` |
|
||||
| clear-trigger `v2.9.1` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
|
||||
| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
|
||||
| action-text `v2.2.2` | 取消按钮文字 | _boolean_ | `取消` |
|
||||
|
||||
@@ -22,6 +22,7 @@ export type SearchProps = {
|
||||
background: string;
|
||||
actionText?: string;
|
||||
showAction?: boolean;
|
||||
clearTrigger?: string;
|
||||
};
|
||||
|
||||
export type SearchSlots = DefaultSlots & {
|
||||
@@ -110,6 +111,7 @@ function Search(
|
||||
leftIcon={props.leftIcon}
|
||||
rightIcon={props.rightIcon}
|
||||
clearable={props.clearable}
|
||||
clearTrigger={props.clearTrigger}
|
||||
scopedSlots={{
|
||||
'left-icon': slots['left-icon'],
|
||||
'right-icon': slots['right-icon'],
|
||||
@@ -127,8 +129,9 @@ Search.props = {
|
||||
label: String,
|
||||
rightIcon: String,
|
||||
actionText: String,
|
||||
showAction: Boolean,
|
||||
background: String,
|
||||
showAction: Boolean,
|
||||
clearTrigger: String,
|
||||
shape: {
|
||||
type: String,
|
||||
default: 'square',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<demo-block card :title="t('basicUsage')">
|
||||
<van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
|
||||
<van-share-sheet
|
||||
v-model="show.basic"
|
||||
@@ -10,7 +10,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('multiLine')">
|
||||
<demo-block card :title="t('multiLine')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('showSheet')"
|
||||
@@ -24,7 +24,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customIcon')">
|
||||
<demo-block card :title="t('customIcon')">
|
||||
<van-cell
|
||||
is-link
|
||||
:title="t('showSheet')"
|
||||
@@ -37,7 +37,7 @@
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('withDesc')">
|
||||
<demo-block card :title="t('withDesc')">
|
||||
<van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
|
||||
<van-share-sheet
|
||||
v-model="show.withDesc"
|
||||
|
||||
+11
-10
@@ -24,7 +24,6 @@ Vue.use(Sku);
|
||||
:quota-used="quotaUsed"
|
||||
:reset-stepper-on-hide="resetStepperOnHide"
|
||||
:reset-selected-sku-on-hide="resetSelectedSkuOnHide"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
:disable-stepper-input="disableStepperInput"
|
||||
:message-config="messageConfig"
|
||||
@buy-clicked="onBuyClicked"
|
||||
@@ -45,7 +44,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Stepper Config
|
||||
### Custom Stepper
|
||||
|
||||
```html
|
||||
<van-sku
|
||||
@@ -62,7 +61,7 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
### Custom By Slot
|
||||
|
||||
```html
|
||||
<van-sku
|
||||
@@ -131,7 +130,7 @@ export default {
|
||||
| reset-stepper-on-hide | Whether to reset stepper when hide | _boolean_ | `false` |
|
||||
| reset-selected-sku-on-hide | Whether to reset selected sku when hide | _boolean_ | `false` |
|
||||
| disable-stepper-input | Whether to disable stepper input | _boolean_ | `false` |
|
||||
| close-on-click-overlay | Whether to close sku popup when click overlay | _boolean_ | `false` |
|
||||
| close-on-click-overlay | Whether to close sku popup when click overlay | _boolean_ | `true` |
|
||||
| stepper-title | Quantity title | _string_ | `Quantity` |
|
||||
| custom-stepper-config | Custom stepper related config | _object_ | `{}` |
|
||||
| message-config | Message related config | _object_ | `{}` |
|
||||
@@ -140,6 +139,8 @@ export default {
|
||||
| start-sale-num `v2.3.0` | Minimum quantity | _number_ | `1` |
|
||||
| properties `v2.4.2` | Goods properties | _array_ | - |
|
||||
| preview-on-click-image `v2.5.2` | Whether to preview image when click goods image | _boolean_ | `true` |
|
||||
| show-header-image `v2.9.0` | Whether to display header image | _boolean_ | `true` |
|
||||
| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -187,30 +188,30 @@ sku: {
|
||||
tree: [
|
||||
{
|
||||
k: 'Color',
|
||||
k_s: 's1',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
id: '1',
|
||||
name: 'Red',
|
||||
imgUrl: 'https://img.yzcdn.cn/1.jpg',
|
||||
previewImgUrl: 'https://img.yzcdn.cn/1p.jpg',
|
||||
},
|
||||
{
|
||||
id: '1215',
|
||||
id: '1',
|
||||
name: 'Blue',
|
||||
imgUrl: 'https://img.yzcdn.cn/2.jpg',
|
||||
previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
|
||||
}
|
||||
],
|
||||
k_s: 's1'
|
||||
largeImageMode: true, // whether to enable large image mode
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
s1: '1',
|
||||
s2: '1',
|
||||
price: 100,
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
stock_num: 110
|
||||
}
|
||||
],
|
||||
|
||||
+15
-13
@@ -64,7 +64,7 @@ export default {
|
||||
/>
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
### 通过插槽定制
|
||||
|
||||
```html
|
||||
<van-sku
|
||||
@@ -116,7 +116,7 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model | 是否显示 sku | _boolean_ | `false` |
|
||||
| v-model | 是否显示商品规格弹窗 | _boolean_ | `false` |
|
||||
| sku | 商品 sku 数据 | _object_ | - |
|
||||
| goods | 商品信息 | _object_ | - |
|
||||
| goods-id | 商品 id | _number \| string_ | - |
|
||||
@@ -133,7 +133,7 @@ export default {
|
||||
| reset-stepper-on-hide | 隐藏时重置选择的商品数量 | _boolean_ | `false` |
|
||||
| reset-selected-sku-on-hide | 隐藏时重置已选择的 sku | _boolean_ | `false` |
|
||||
| disable-stepper-input | 是否禁用步进器输入 | _boolean_ | `false` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `false` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
||||
| stepper-title | 数量选择组件左侧文案 | _string_ | `购买数量` |
|
||||
| custom-stepper-config | 步进器相关自定义配置 | _object_ | `{}` |
|
||||
| message-config | 留言相关配置 | _object_ | `{}` |
|
||||
@@ -144,6 +144,8 @@ export default {
|
||||
| start-sale-num `v2.3.0` | 起售数量 | _number_ | `1` |
|
||||
| properties `v2.4.2` | 商品属性 | _array_ | - |
|
||||
| preview-on-click-image `v2.5.2` | 是否在点击商品图片时自动预览 | _boolean_ | `true` |
|
||||
| show-header-image `v2.9.0` | 是否展示头部图片 | _boolean_ | `true` |
|
||||
| lazy-load `v2.9.0` | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
|
||||
|
||||
### Events
|
||||
|
||||
@@ -195,31 +197,31 @@ sku: {
|
||||
tree: [
|
||||
{
|
||||
k: '颜色', // skuKeyName：规格类目名称
|
||||
k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
|
||||
v: [
|
||||
{
|
||||
id: '30349', // skuValueId：规格值 id
|
||||
id: '1', // skuValueId：规格值 id
|
||||
name: '红色', // skuValueName：规格值名称
|
||||
imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
|
||||
previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
|
||||
},
|
||||
{
|
||||
id: '1215',
|
||||
id: '1',
|
||||
name: '蓝色',
|
||||
imgUrl: 'https://img.yzcdn.cn/2.jpg',
|
||||
previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
|
||||
}
|
||||
],
|
||||
k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
|
||||
largeImageMode: true, // 是否展示大图模式
|
||||
}
|
||||
],
|
||||
// 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
|
||||
list: [
|
||||
{
|
||||
id: 2259, // skuId，下单时后端需要
|
||||
id: 2259, // skuId
|
||||
s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
|
||||
s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
|
||||
price: 100, // 价格（单位分）
|
||||
s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
|
||||
s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
|
||||
s3: '0', // 最多包含3个规格值，为0表示不存在该规格
|
||||
stock_num: 110 // 当前 sku 组合对应的库存
|
||||
}
|
||||
],
|
||||
@@ -273,8 +275,8 @@ sku: {
|
||||
{
|
||||
// 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
|
||||
// 值：skuValueId（规格值 id）
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s1: '1',
|
||||
s2: '1',
|
||||
// 初始选中数量
|
||||
selectedNum: 3,
|
||||
// 初始选中的商品属性
|
||||
@@ -327,7 +329,7 @@ customStepperConfig: {
|
||||
}
|
||||
```
|
||||
|
||||
### messageConfig Data Structure
|
||||
### messageConfig 对象结构
|
||||
|
||||
```js
|
||||
messageConfig: {
|
||||
|
||||
+97
-57
@@ -28,12 +28,14 @@ const { QUOTA_LIMIT } = LIMIT_TYPE;
|
||||
export default createComponent({
|
||||
props: {
|
||||
sku: Object,
|
||||
priceTag: String,
|
||||
goods: Object,
|
||||
value: Boolean,
|
||||
buyText: String,
|
||||
goodsId: [Number, String],
|
||||
priceTag: String,
|
||||
lazyLoad: Boolean,
|
||||
hideStock: Boolean,
|
||||
properties: Array,
|
||||
addCartText: String,
|
||||
stepperTitle: String,
|
||||
getContainer: [String, Function],
|
||||
@@ -41,10 +43,8 @@ export default createComponent({
|
||||
hideSelectedText: Boolean,
|
||||
resetStepperOnHide: Boolean,
|
||||
customSkuValidator: Function,
|
||||
closeOnClickOverlay: Boolean,
|
||||
disableStepperInput: Boolean,
|
||||
resetSelectedSkuOnHide: Boolean,
|
||||
properties: Array,
|
||||
quota: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
@@ -73,6 +73,26 @@ export default createComponent({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
customStepperConfig: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
showHeaderImage: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
previewOnClickImage: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
bodyOffsetTop: {
|
||||
type: Number,
|
||||
default: 200,
|
||||
@@ -86,18 +106,6 @@ export default createComponent({
|
||||
uploadMaxSize: 5,
|
||||
}),
|
||||
},
|
||||
customStepperConfig: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
previewOnClickImage: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
safeAreaInsetBottom: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -112,6 +120,7 @@ export default createComponent({
|
||||
watch: {
|
||||
show(val) {
|
||||
this.$emit('input', val);
|
||||
|
||||
if (!val) {
|
||||
this.$emit('sku-close', {
|
||||
selectedSkuValues: this.selectedSkuValues,
|
||||
@@ -156,7 +165,6 @@ export default createComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
// header高度82px, sku actions高度50px，如果改动了样式自己传下bodyOffsetTop调整下
|
||||
const maxHeight = window.innerHeight - this.bodyOffsetTop;
|
||||
|
||||
return {
|
||||
@@ -169,15 +177,11 @@ export default createComponent({
|
||||
if (this.hasSku && !isAllSelected(this.skuTree, this.selectedSku)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 属性未全选
|
||||
if (
|
||||
this.propList.some(
|
||||
(it) => (this.selectedProp[it.k_id] || []).length < 1
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
return !this.propList.some(
|
||||
(it) => (this.selectedProp[it.k_id] || []).length < 1
|
||||
);
|
||||
},
|
||||
|
||||
isSkuEmpty() {
|
||||
@@ -204,6 +208,7 @@ export default createComponent({
|
||||
stock_num: this.sku.stock_num,
|
||||
};
|
||||
}
|
||||
|
||||
if (skuComb) {
|
||||
skuComb.properties = getSelectedProperties(
|
||||
this.propList,
|
||||
@@ -266,9 +271,10 @@ export default createComponent({
|
||||
}
|
||||
|
||||
treeItem.v.forEach((vItem) => {
|
||||
const img = vItem.previewImgUrl || vItem.imgUrl || vItem.img_url;
|
||||
if (img) {
|
||||
imageList.push(img);
|
||||
const imgUrl = vItem.previewImgUrl || vItem.imgUrl || vItem.img_url;
|
||||
|
||||
if (imgUrl && imageList.indexOf(imgUrl) === -1) {
|
||||
imageList.push(imgUrl);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -290,7 +296,9 @@ export default createComponent({
|
||||
|
||||
stockText() {
|
||||
const { stockFormatter } = this.customStepperConfig;
|
||||
if (stockFormatter) return stockFormatter(this.stock);
|
||||
if (stockFormatter) {
|
||||
return stockFormatter(this.stock);
|
||||
}
|
||||
|
||||
return [
|
||||
`${t('stock')} `,
|
||||
@@ -308,7 +316,7 @@ export default createComponent({
|
||||
selectedText() {
|
||||
if (this.selectedSkuComb) {
|
||||
const values = this.selectedSkuValues.concat(this.selectedPropValues);
|
||||
return `${t('selected')} ${values.map((item) => item.name).join('；')}`;
|
||||
return `${t('selected')} ${values.map((item) => item.name).join(' ')}`;
|
||||
}
|
||||
|
||||
const unselectedSku = this.skuTree
|
||||
@@ -316,13 +324,12 @@ export default createComponent({
|
||||
(item) => this.selectedSku[item.k_s] === UNSELECTED_SKU_VALUE_ID
|
||||
)
|
||||
.map((item) => item.k);
|
||||
|
||||
const unselectedProp = this.propList
|
||||
.filter((item) => (this.selectedProp[item.k_id] || []).length < 1)
|
||||
.map((item) => item.k);
|
||||
|
||||
return `${t('select')} ${unselectedSku
|
||||
.concat(unselectedProp)
|
||||
.join('；')}`;
|
||||
return `${t('select')} ${unselectedSku.concat(unselectedProp).join(' ')}`;
|
||||
},
|
||||
},
|
||||
|
||||
@@ -368,16 +375,15 @@ export default createComponent({
|
||||
|
||||
// 重置 selectedSku
|
||||
this.skuTree.forEach((item) => {
|
||||
this.selectedSku[item.k_s] =
|
||||
this.initialSku[item.k_s] || UNSELECTED_SKU_VALUE_ID;
|
||||
this.selectedSku[item.k_s] = UNSELECTED_SKU_VALUE_ID;
|
||||
});
|
||||
|
||||
// 只有一个 sku 规格值时默认选中
|
||||
this.skuTree.forEach((item) => {
|
||||
const key = item.k_s;
|
||||
const valueId = item.v[0].id;
|
||||
// 规格值只有1个时，优先判断
|
||||
const valueId =
|
||||
item.v.length === 1 ? item.v[0].id : this.initialSku[key];
|
||||
if (
|
||||
item.v.length === 1 &&
|
||||
valueId &&
|
||||
isSkuChoosable(this.sku.list, this.selectedSku, { key, valueId })
|
||||
) {
|
||||
this.selectedSku[key] = valueId;
|
||||
@@ -423,6 +429,8 @@ export default createComponent({
|
||||
selectedProp: this.selectedProp,
|
||||
selectedSkuComb: this.selectedSkuComb,
|
||||
});
|
||||
|
||||
this.centerInitialSku();
|
||||
},
|
||||
|
||||
getSkuMessages() {
|
||||
@@ -479,6 +487,7 @@ export default createComponent({
|
||||
onPropSelect(propValue) {
|
||||
const arr = this.selectedProp[propValue.skuKeyStr] || [];
|
||||
const pos = arr.indexOf(propValue.id);
|
||||
|
||||
if (pos > -1) {
|
||||
arr.splice(pos, 1);
|
||||
} else if (propValue.multiple) {
|
||||
@@ -486,10 +495,12 @@ export default createComponent({
|
||||
} else {
|
||||
arr.splice(0, 1, propValue.id);
|
||||
}
|
||||
|
||||
this.selectedProp = {
|
||||
...this.selectedProp,
|
||||
[propValue.skuKeyStr]: arr,
|
||||
};
|
||||
|
||||
this.$emit('sku-prop-selected', {
|
||||
propValue,
|
||||
selectedProp: this.selectedProp,
|
||||
@@ -501,12 +512,22 @@ export default createComponent({
|
||||
this.selectedNum = num;
|
||||
},
|
||||
|
||||
onPreviewImage(indexImage) {
|
||||
const { previewOnClickImage } = this;
|
||||
|
||||
const index = this.imageList.findIndex((image) => image === indexImage);
|
||||
|
||||
onPreviewImage(selectedValue) {
|
||||
const { imageList } = this;
|
||||
let index = 0;
|
||||
let indexImage = imageList[0];
|
||||
if (selectedValue && selectedValue.imgUrl) {
|
||||
this.imageList.some((image, pos) => {
|
||||
if (image === selectedValue.imgUrl) {
|
||||
index = pos;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
indexImage = selectedValue.imgUrl;
|
||||
}
|
||||
const params = {
|
||||
...selectedValue,
|
||||
index,
|
||||
imageList: this.imageList,
|
||||
indexImage,
|
||||
@@ -514,7 +535,7 @@ export default createComponent({
|
||||
|
||||
this.$emit('open-preview', params);
|
||||
|
||||
if (!previewOnClickImage) {
|
||||
if (!this.previewOnClickImage) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -557,14 +578,12 @@ export default createComponent({
|
||||
},
|
||||
|
||||
onStepperState(data) {
|
||||
if (data.valid) {
|
||||
this.stepperError = null;
|
||||
} else {
|
||||
this.stepperError = {
|
||||
...data,
|
||||
action: 'plus',
|
||||
};
|
||||
}
|
||||
this.stepperError = data.valid
|
||||
? null
|
||||
: {
|
||||
...data,
|
||||
action: 'plus',
|
||||
};
|
||||
},
|
||||
|
||||
onAddCart() {
|
||||
@@ -576,11 +595,13 @@ export default createComponent({
|
||||
},
|
||||
|
||||
onBuyOrAddCart(type) {
|
||||
// 有信息表示该sku根本不符合购买条件
|
||||
// sku 不符合购买条件
|
||||
if (this.stepperError) {
|
||||
return this.onOverLimit(this.stepperError);
|
||||
}
|
||||
|
||||
const error = this.validateSku();
|
||||
|
||||
if (error) {
|
||||
Toast(error);
|
||||
} else {
|
||||
@@ -592,12 +613,24 @@ export default createComponent({
|
||||
getSkuData() {
|
||||
return {
|
||||
goodsId: this.goodsId,
|
||||
selectedNum: this.selectedNum,
|
||||
selectedSkuComb: this.selectedSkuComb,
|
||||
messages: this.getSkuMessages(),
|
||||
selectedNum: this.selectedNum,
|
||||
cartMessages: this.getSkuCartMessages(),
|
||||
selectedSkuComb: this.selectedSkuComb,
|
||||
};
|
||||
},
|
||||
|
||||
// 当 popup 完全打开后执行
|
||||
onOpened() {
|
||||
this.centerInitialSku();
|
||||
},
|
||||
|
||||
centerInitialSku() {
|
||||
(this.$refs.skuRows || []).forEach((it) => {
|
||||
const { k_s } = it.skuRow || {};
|
||||
it.centerItem(this.initialSku[k_s]);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
@@ -609,6 +642,7 @@ export default createComponent({
|
||||
sku,
|
||||
goods,
|
||||
price,
|
||||
lazyLoad,
|
||||
originPrice,
|
||||
skuEventBus,
|
||||
selectedSku,
|
||||
@@ -616,6 +650,7 @@ export default createComponent({
|
||||
selectedNum,
|
||||
stepperTitle,
|
||||
selectedSkuComb,
|
||||
showHeaderImage,
|
||||
} = this;
|
||||
|
||||
const slotsProps = {
|
||||
@@ -626,6 +661,7 @@ export default createComponent({
|
||||
selectedSku,
|
||||
selectedSkuComb,
|
||||
};
|
||||
|
||||
const slots = (name) => this.slots(name, slotsProps);
|
||||
|
||||
const Header = slots('sku-header') || (
|
||||
@@ -634,6 +670,7 @@ export default createComponent({
|
||||
goods={goods}
|
||||
skuEventBus={skuEventBus}
|
||||
selectedSku={selectedSku}
|
||||
showHeaderImage={showHeaderImage}
|
||||
>
|
||||
<template slot="sku-header-image-extra">
|
||||
{slots('sku-header-image-extra')}
|
||||
@@ -670,14 +707,16 @@ export default createComponent({
|
||||
(this.hasSkuOrAttr && (
|
||||
<div class={this.skuGroupClass}>
|
||||
{this.skuTree.map((skuTreeItem) => (
|
||||
<SkuRow skuRow={skuTreeItem}>
|
||||
<SkuRow skuRow={skuTreeItem} ref="skuRows" refInFor>
|
||||
{skuTreeItem.v.map((skuValue) => (
|
||||
<SkuRowItem
|
||||
skuList={sku.list}
|
||||
lazyLoad={lazyLoad}
|
||||
skuValue={skuValue}
|
||||
skuKeyStr={skuTreeItem.k_s}
|
||||
selectedSku={selectedSku}
|
||||
skuEventBus={skuEventBus}
|
||||
skuKeyStr={skuTreeItem.k_s}
|
||||
largeImageMode={skuTreeItem.largeImageMode}
|
||||
/>
|
||||
))}
|
||||
</SkuRow>
|
||||
@@ -746,6 +785,7 @@ export default createComponent({
|
||||
getContainer={this.getContainer}
|
||||
closeOnClickOverlay={this.closeOnClickOverlay}
|
||||
safeAreaInsetBottom={this.safeAreaInsetBottom}
|
||||
onOpened={this.onOpened}
|
||||
>
|
||||
{Header}
|
||||
<div class="van-sku-body" style={this.bodyStyle}>
|
||||
|
||||
@@ -3,6 +3,9 @@ import { createNamespace } from '../../utils';
|
||||
import { inherit } from '../../utils/functional';
|
||||
import { BORDER_BOTTOM } from '../../utils/constant';
|
||||
|
||||
// Components
|
||||
import Image from '../../image';
|
||||
|
||||
// Types
|
||||
import Vue, { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots, ScopedSlot } from '../../utils/types';
|
||||
@@ -13,19 +16,25 @@ export type SkuHeaderProps = {
|
||||
goods: SkuGoodsData;
|
||||
skuEventBus: Vue;
|
||||
selectedSku: SelectedSkuData;
|
||||
showHeaderImage: boolean;
|
||||
};
|
||||
|
||||
export type SkuHeaderSlots = DefaultSlots & {
|
||||
'sku-header-image-extra'?: ScopedSlot;
|
||||
};
|
||||
|
||||
type SelectedValueType = {
|
||||
ks: string;
|
||||
imgUrl: string;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('sku-header');
|
||||
|
||||
function getSkuImg(
|
||||
function getSkuImgValue(
|
||||
sku: SkuData,
|
||||
selectedSku: SelectedSkuData
|
||||
): string | undefined {
|
||||
let img;
|
||||
): SelectedValueType | undefined {
|
||||
let imgValue;
|
||||
|
||||
sku.tree.some((item) => {
|
||||
const id = selectedSku[item.k_s];
|
||||
@@ -33,14 +42,23 @@ function getSkuImg(
|
||||
if (id && item.v) {
|
||||
const matchedSku =
|
||||
item.v.filter((skuValue) => skuValue.id === id)[0] || {};
|
||||
img = matchedSku.previewImgUrl || matchedSku.imgUrl || matchedSku.img_url;
|
||||
return img;
|
||||
|
||||
const img =
|
||||
matchedSku.previewImgUrl || matchedSku.imgUrl || matchedSku.img_url;
|
||||
if (img) {
|
||||
imgValue = {
|
||||
...matchedSku,
|
||||
ks: item.k_s,
|
||||
imgUrl: img,
|
||||
};
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
return img;
|
||||
return imgValue;
|
||||
}
|
||||
|
||||
function SkuHeader(
|
||||
@@ -49,19 +67,33 @@ function SkuHeader(
|
||||
slots: SkuHeaderSlots,
|
||||
ctx: RenderContext<SkuHeaderProps>
|
||||
) {
|
||||
const { sku, goods, skuEventBus, selectedSku } = props;
|
||||
const goodsImg = getSkuImg(sku, selectedSku) || goods.picture;
|
||||
const {
|
||||
sku,
|
||||
goods,
|
||||
skuEventBus,
|
||||
selectedSku,
|
||||
showHeaderImage = true,
|
||||
} = props;
|
||||
|
||||
const selectedValue = getSkuImgValue(sku, selectedSku);
|
||||
const imgUrl = selectedValue ? selectedValue.imgUrl : goods.picture;
|
||||
|
||||
const previewImage = () => {
|
||||
skuEventBus.$emit('sku:previewImage', goodsImg);
|
||||
skuEventBus.$emit('sku:previewImage', selectedValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
|
||||
<div class={bem('img-wrap')} onClick={previewImage}>
|
||||
<img src={goodsImg} />
|
||||
{slots['sku-header-image-extra']?.()}
|
||||
</div>
|
||||
{showHeaderImage && (
|
||||
<Image
|
||||
fit="cover"
|
||||
src={imgUrl}
|
||||
class={bem('img-wrap')}
|
||||
onClick={previewImage}
|
||||
>
|
||||
{slots['sku-header-image-extra']?.()}
|
||||
</Image>
|
||||
)}
|
||||
<div class={bem('goods-info')}>{slots.default?.()}</div>
|
||||
</div>
|
||||
);
|
||||
@@ -72,6 +104,7 @@ SkuHeader.props = {
|
||||
goods: Object,
|
||||
skuEventBus: Object,
|
||||
selectedSku: Object,
|
||||
showHeaderImage: Boolean,
|
||||
};
|
||||
|
||||
export default createComponent<SkuHeaderProps>(SkuHeader);
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../../utils';
|
||||
import { BORDER_BOTTOM } from '../../utils/constant';
|
||||
// Mixins
|
||||
import { ParentMixin } from '../../mixins/relation';
|
||||
import { BindEventMixin } from '../../mixins/bind-event';
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('sku-row');
|
||||
|
||||
export { bem };
|
||||
|
||||
export default createComponent({
|
||||
mixins: [
|
||||
ParentMixin('vanSkuRows'),
|
||||
BindEventMixin(function (bind) {
|
||||
if (this.scrollable && this.$refs.scroller) {
|
||||
bind(this.$refs.scroller, 'scroll', this.onScroll);
|
||||
}
|
||||
}),
|
||||
],
|
||||
|
||||
props: {
|
||||
skuRow: Object,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
progress: 0,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
scrollable() {
|
||||
return this.skuRow.largeImageMode && this.skuRow.v.length > 6;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onScroll() {
|
||||
const { scroller, row } = this.$refs;
|
||||
const distance = row.offsetWidth - scroller.offsetWidth;
|
||||
this.progress = scroller.scrollLeft / distance;
|
||||
},
|
||||
|
||||
genTitle() {
|
||||
return (
|
||||
<div class={bem('title')}>
|
||||
{this.skuRow.k}
|
||||
{this.skuRow.is_multiple && (
|
||||
<span class={bem('title-multiple')}>（{t('multiple')}）</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
genIndicator() {
|
||||
if (this.scrollable) {
|
||||
const style = {
|
||||
transform: `translate3d(${this.progress * 20}px, 0, 0)`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={bem('indicator-wrapper')}>
|
||||
<div class={bem('indicator')}>
|
||||
<div class={bem('indicator-slider')} style={style} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
genContent() {
|
||||
const nodes = this.slots();
|
||||
|
||||
if (this.skuRow.largeImageMode) {
|
||||
const top = [];
|
||||
const bottom = [];
|
||||
|
||||
nodes.forEach((node, index) => {
|
||||
const group = Math.floor(index / 3) % 2 === 0 ? top : bottom;
|
||||
group.push(node);
|
||||
});
|
||||
|
||||
return (
|
||||
<div class={bem('scroller')} ref="scroller">
|
||||
<div class={bem('row')} ref="row">
|
||||
{top}
|
||||
</div>
|
||||
{bottom.length ? <div class={bem('row')}>{bottom}</div> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return nodes;
|
||||
},
|
||||
|
||||
centerItem(selectSkuId) {
|
||||
if (!this.skuRow.largeImageMode || !selectSkuId) {
|
||||
return;
|
||||
}
|
||||
const { children = [] } = this;
|
||||
const { scroller, row } = this.$refs;
|
||||
const child = children.find((it) => +it.skuValue.id === +selectSkuId);
|
||||
if (scroller && row && child && child.$el) {
|
||||
const target = child.$el;
|
||||
const to =
|
||||
target.offsetLeft - (scroller.offsetWidth - target.offsetWidth) / 2;
|
||||
scroller.scrollLeft = to;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class={[bem(), BORDER_BOTTOM]}>
|
||||
{this.genTitle()}
|
||||
{this.genContent()}
|
||||
{this.genIndicator()}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -1,41 +0,0 @@
|
||||
// Utils
|
||||
import { createNamespace } from '../../utils';
|
||||
import { inherit } from '../../utils/functional';
|
||||
import { BORDER_BOTTOM } from '../../utils/constant';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../../utils/types';
|
||||
import { SkuTreeItemData } from '../../../types/sku';
|
||||
|
||||
export type SkuRowProps = {
|
||||
skuRow: SkuTreeItemData;
|
||||
};
|
||||
|
||||
const [createComponent, bem, t] = createNamespace('sku-row');
|
||||
|
||||
function SkuRow(
|
||||
h: CreateElement,
|
||||
props: SkuRowProps,
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<SkuRowProps>
|
||||
) {
|
||||
const multipleNode = props.skuRow.is_multiple && (
|
||||
<span class={bem('title-multiple')}>（{t('multiple')}）</span>
|
||||
);
|
||||
return (
|
||||
<div class={[bem(), BORDER_BOTTOM]} {...inherit(ctx)}>
|
||||
<div class={bem('title')}>
|
||||
{props.skuRow.k}
|
||||
{multipleNode}
|
||||
</div>
|
||||
{slots.default && slots.default()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
SkuRow.props = {
|
||||
skuRow: Object,
|
||||
};
|
||||
|
||||
export default createComponent<SkuRowProps>(SkuRow);
|
||||
@@ -1,14 +1,21 @@
|
||||
import { bem } from './SkuRow';
|
||||
import { createNamespace } from '../../utils';
|
||||
import { isSkuChoosable } from '../utils/sku-helper';
|
||||
import { ChildrenMixin } from '../../mixins/relation';
|
||||
import Image from '../../image';
|
||||
|
||||
const [createComponent] = createNamespace('sku-row-item');
|
||||
|
||||
export default createComponent({
|
||||
mixins: [ChildrenMixin('vanSkuRows')],
|
||||
|
||||
props: {
|
||||
lazyLoad: Boolean,
|
||||
skuValue: Object,
|
||||
skuKeyStr: String,
|
||||
skuEventBus: Object,
|
||||
selectedSku: Object,
|
||||
largeImageMode: Boolean,
|
||||
skuList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
@@ -16,6 +23,14 @@ export default createComponent({
|
||||
},
|
||||
|
||||
computed: {
|
||||
imgUrl() {
|
||||
const url = this.skuValue.imgUrl || this.skuValue.img_url;
|
||||
return this.largeImageMode
|
||||
? url ||
|
||||
'https://img.yzcdn.cn/upload_files/2020/06/24/FmKWDg0bN9rMcTp9ne8MXiQWGtLn.png'
|
||||
: url;
|
||||
},
|
||||
|
||||
choosable() {
|
||||
return isSkuChoosable(this.skuList, this.selectedSku, {
|
||||
key: this.skuKeyStr,
|
||||
@@ -33,25 +48,61 @@ export default createComponent({
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
onPreviewImg(event) {
|
||||
event.stopPropagation();
|
||||
const { skuValue, skuKeyStr } = this;
|
||||
this.skuEventBus.$emit('sku:previewImage', {
|
||||
...skuValue,
|
||||
ks: skuKeyStr,
|
||||
imgUrl: skuValue.imgUrl || skuValue.img_url,
|
||||
});
|
||||
},
|
||||
|
||||
genImage(classPrefix) {
|
||||
if (this.imgUrl) {
|
||||
return (
|
||||
<Image
|
||||
fit="cover"
|
||||
src={this.imgUrl}
|
||||
class={`${classPrefix}-img`}
|
||||
lazyLoad={this.lazyLoad}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const choosed = this.skuValue.id === this.selectedSku[this.skuKeyStr];
|
||||
const imgUrl = this.skuValue.imgUrl || this.skuValue.img_url;
|
||||
const classPrefix = this.largeImageMode ? bem('image-item') : bem('item');
|
||||
|
||||
return (
|
||||
<span
|
||||
class={[
|
||||
'van-sku-row__item',
|
||||
{
|
||||
'van-sku-row__item--active': choosed,
|
||||
'van-sku-row__item--disabled': !this.choosable,
|
||||
},
|
||||
classPrefix,
|
||||
choosed ? `${classPrefix}--active` : '',
|
||||
!this.choosable ? `${classPrefix}--disabled` : '',
|
||||
]}
|
||||
onClick={this.onSelect}
|
||||
>
|
||||
{imgUrl && <img class="van-sku-row__item-img" src={imgUrl} />}
|
||||
<span class="van-sku-row__item-name">{this.skuValue.name}</span>
|
||||
{this.genImage(classPrefix)}
|
||||
<div class={`${classPrefix}-name`}>
|
||||
{this.largeImageMode ? (
|
||||
<span class={{ 'van-multi-ellipsis--l2': this.largeImageMode }}>
|
||||
{this.skuValue.name}
|
||||
</span>
|
||||
) : (
|
||||
this.skuValue.name
|
||||
)}
|
||||
</div>
|
||||
{this.largeImageMode && (
|
||||
<img
|
||||
class={`${classPrefix}-img-icon`}
|
||||
src="https://img.yzcdn.cn/upload_files/2020/07/02/Fu4_ya0l0aAt4Mv4PL9jzPzfZnDX.png"
|
||||
onClick={this.onPreviewImg}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
||||
+178
-193
@@ -1,206 +1,191 @@
|
||||
export const skuData = {
|
||||
goods_id: '946755',
|
||||
quota: 15,
|
||||
quota_used: 0,
|
||||
start_sale_num: 10,
|
||||
goods_info: {
|
||||
title: '测试商品',
|
||||
picture:
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
|
||||
price: 1,
|
||||
},
|
||||
sku: {
|
||||
price: '1.00',
|
||||
stock_num: 227,
|
||||
none_sku: false,
|
||||
hide_stock: false,
|
||||
collection_id: 2261,
|
||||
tree: [
|
||||
{
|
||||
k: '颜色',
|
||||
k_id: '1',
|
||||
v: [
|
||||
{
|
||||
id: '30349',
|
||||
name: '天蓝色',
|
||||
imgUrl:
|
||||
'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg',
|
||||
},
|
||||
{
|
||||
id: '1215',
|
||||
name: '白色',
|
||||
},
|
||||
],
|
||||
k_s: 's1',
|
||||
count: 2,
|
||||
},
|
||||
{
|
||||
k: '尺寸',
|
||||
k_id: '2',
|
||||
v: [
|
||||
{
|
||||
id: '1193',
|
||||
name: '1',
|
||||
},
|
||||
{
|
||||
id: '1194',
|
||||
name: '2',
|
||||
},
|
||||
],
|
||||
k_s: 's2',
|
||||
count: 2,
|
||||
},
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
stock_num: 110,
|
||||
goods_id: 946755,
|
||||
},
|
||||
{
|
||||
id: 2260,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '1215',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
stock_num: 0,
|
||||
goods_id: 946755,
|
||||
},
|
||||
{
|
||||
id: 2257,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
stock_num: 111,
|
||||
goods_id: 946755,
|
||||
},
|
||||
{
|
||||
id: 2258,
|
||||
price: 100,
|
||||
discount: 100,
|
||||
code: '',
|
||||
s1: '30349',
|
||||
s2: '1194',
|
||||
s3: '0',
|
||||
s4: '0',
|
||||
s5: '0',
|
||||
stock_num: 6,
|
||||
goods_id: 946755,
|
||||
},
|
||||
],
|
||||
messages: [
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: '0',
|
||||
name: '留言1',
|
||||
type: 'text',
|
||||
required: '1',
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言2',
|
||||
type: 'id_no',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言3',
|
||||
type: 'image',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 1,
|
||||
name: '留言4',
|
||||
type: 'text',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '数字',
|
||||
multiple: 0,
|
||||
type: 'tel',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '邮件',
|
||||
multiple: 0,
|
||||
type: 'email',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '日期',
|
||||
multiple: 0,
|
||||
type: 'date',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '时间',
|
||||
multiple: 0,
|
||||
type: 'time',
|
||||
required: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
properties: [
|
||||
{
|
||||
k_id: 124,
|
||||
k: '加料',
|
||||
is_multiple: true,
|
||||
v: [
|
||||
export function getSkuData(largeImageMode = false) {
|
||||
return {
|
||||
goods_id: '1',
|
||||
quota: 5,
|
||||
quota_used: 0,
|
||||
start_sale_num: 2,
|
||||
goods_info: {
|
||||
price: 1,
|
||||
title: '测试商品',
|
||||
picture: 'https://b.yzcdn.cn/vant/sku/shoes-1.png',
|
||||
},
|
||||
sku: {
|
||||
price: '1.00',
|
||||
stock_num: 227,
|
||||
none_sku: false,
|
||||
hide_stock: false,
|
||||
collection_id: 2261,
|
||||
tree: [
|
||||
{
|
||||
id: 1224,
|
||||
name: '布丁',
|
||||
price: 3,
|
||||
k: '颜色',
|
||||
k_s: 's1',
|
||||
k_id: '1',
|
||||
v: [
|
||||
{
|
||||
id: '1',
|
||||
name: '粉色',
|
||||
imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-1.png',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '黄色',
|
||||
imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-2.png',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '蓝色',
|
||||
imgUrl: 'https://b.yzcdn.cn/vant/sku/shoes-3.png',
|
||||
},
|
||||
],
|
||||
largeImageMode,
|
||||
},
|
||||
{
|
||||
id: 1225,
|
||||
name: '波霸',
|
||||
price: 4,
|
||||
k: '尺寸',
|
||||
k_s: 's2',
|
||||
k_id: '2',
|
||||
v: [
|
||||
{
|
||||
id: '1',
|
||||
name: '大',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '小',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 2259,
|
||||
s1: '2',
|
||||
s2: '1',
|
||||
price: 100,
|
||||
discount: 100,
|
||||
stock_num: 110,
|
||||
},
|
||||
{
|
||||
id: 1226,
|
||||
name: '珍珠',
|
||||
price: 5,
|
||||
id: 2260,
|
||||
s1: '3',
|
||||
s2: '1',
|
||||
price: 100,
|
||||
discount: 100,
|
||||
stock_num: 99,
|
||||
},
|
||||
{
|
||||
id: 2257,
|
||||
s1: '1',
|
||||
s2: '1',
|
||||
price: 100,
|
||||
discount: 100,
|
||||
stock_num: 111,
|
||||
},
|
||||
{
|
||||
id: 2258,
|
||||
s1: '1',
|
||||
s2: '2',
|
||||
price: 100,
|
||||
discount: 100,
|
||||
stock_num: 6,
|
||||
},
|
||||
],
|
||||
messages: [
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: '0',
|
||||
name: '留言1',
|
||||
type: 'text',
|
||||
required: '1',
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言2',
|
||||
type: 'id_no',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 0,
|
||||
name: '留言3',
|
||||
type: 'image',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
multiple: 1,
|
||||
name: '留言4',
|
||||
type: 'text',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '数字',
|
||||
multiple: 0,
|
||||
type: 'tel',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '邮件',
|
||||
multiple: 0,
|
||||
type: 'email',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '日期',
|
||||
multiple: 0,
|
||||
type: 'date',
|
||||
required: 0,
|
||||
},
|
||||
{
|
||||
datetime: '0',
|
||||
disable: false,
|
||||
name: '时间',
|
||||
multiple: 0,
|
||||
type: 'time',
|
||||
required: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
properties: [
|
||||
{
|
||||
k: '加料',
|
||||
k_id: 124,
|
||||
is_multiple: true,
|
||||
v: [
|
||||
{
|
||||
id: 1224,
|
||||
name: '布丁',
|
||||
price: 3,
|
||||
},
|
||||
{
|
||||
id: 1225,
|
||||
name: '波霸',
|
||||
price: 4,
|
||||
},
|
||||
{
|
||||
id: 1226,
|
||||
name: '珍珠',
|
||||
price: 5,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export const initialSku = {
|
||||
s1: '30349',
|
||||
s2: '1193',
|
||||
s1: '1',
|
||||
s2: '1',
|
||||
selectedNum: 3,
|
||||
selectedProp: {
|
||||
124: [1225, 1226],
|
||||
|
||||
+68
-34
@@ -1,21 +1,19 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<!-- 基础用法 -->
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="skuData.sku"
|
||||
:quota="skuData.quota"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:quota="skuData.quota"
|
||||
:quota-used="skuData.quota_used"
|
||||
:start-sale-num="skuData.start_sale_num"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
:message-config="messageConfig"
|
||||
:custom-sku-validator="customSkuValidator"
|
||||
:properties="skuData.properties"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:message-config="messageConfig"
|
||||
:start-sale-num="skuData.start_sale_num"
|
||||
:custom-sku-validator="customSkuValidator"
|
||||
disable-stepper-input
|
||||
reset-stepper-on-hide
|
||||
safe-area-inset-bottom
|
||||
@@ -29,48 +27,46 @@
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<!-- 自定义步进器 -->
|
||||
<demo-block :title="t('title2')">
|
||||
<demo-block :title="t('customStepper')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showStepper"
|
||||
:sku="skuData.sku"
|
||||
:quota="skuData.quota"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:quota="skuData.quota"
|
||||
:quota-used="skuData.quota_used"
|
||||
:start-sale-num="skuData.start_sale_num"
|
||||
:custom-stepper-config="customStepperConfig"
|
||||
:message-config="messageConfig"
|
||||
:properties="skuData.properties"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:start-sale-num="skuData.start_sale_num"
|
||||
:message-config="messageConfig"
|
||||
:custom-stepper-config="customStepperConfig"
|
||||
hide-quota-text
|
||||
safe-area-inset-bottom
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
/>
|
||||
<van-button block type="primary" @click="showStepper = true">
|
||||
{{ t('title2') }}
|
||||
{{ t('customStepper') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<!-- 隐藏售罄sku -->
|
||||
<demo-block :title="t('hideSoldoutSku')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showSoldout"
|
||||
:sku="skuData.sku"
|
||||
:quota="skuData.quota"
|
||||
:goods="skuData.goods_info"
|
||||
:goods-id="skuData.goods_id"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:quota="skuData.quota"
|
||||
:quota-used="skuData.quota_used"
|
||||
:start-sale-num="skuData.start_sale_num"
|
||||
:custom-stepper-config="customStepperConfig"
|
||||
:message-config="messageConfig"
|
||||
:show-soldout-sku="false"
|
||||
:properties="skuData.properties"
|
||||
:hide-stock="skuData.sku.hide_stock"
|
||||
:message-config="messageConfig"
|
||||
:start-sale-num="skuData.start_sale_num"
|
||||
:show-soldout-sku="false"
|
||||
:custom-stepper-config="customStepperConfig"
|
||||
hide-quota-text
|
||||
safe-area-inset-bottom
|
||||
@buy-clicked="onBuyClicked"
|
||||
@@ -82,7 +78,40 @@
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('advancedUsage')">
|
||||
<demo-block :title="t('largeImageMode')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showLargePicturePreview"
|
||||
:sku="skuData2.sku"
|
||||
:quota="skuData2.quota"
|
||||
:goods="skuData2.goods_info"
|
||||
:goods-id="skuData2.goods_id"
|
||||
:hide-stock="skuData2.sku.hide_stock"
|
||||
:properties="skuData2.properties"
|
||||
:quota-used="skuData2.quota_used"
|
||||
:message-config="messageConfig"
|
||||
:start-sale-num="skuData2.start_sale_num"
|
||||
:show-header-image="false"
|
||||
:custom-sku-validator="customSkuValidator"
|
||||
disable-stepper-input
|
||||
reset-stepper-on-hide
|
||||
safe-area-inset-bottom
|
||||
reset-selected-sku-on-hide
|
||||
@buy-clicked="onBuyClicked"
|
||||
@add-cart="onAddCartClicked"
|
||||
>
|
||||
</van-sku>
|
||||
<van-button
|
||||
block
|
||||
type="primary"
|
||||
@click="showLargePicturePreview = true"
|
||||
>
|
||||
{{ t('largeImageMode') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customBySlot')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showCustom"
|
||||
@@ -136,7 +165,7 @@
|
||||
</template>
|
||||
</van-sku>
|
||||
<van-button block type="primary" @click="showCustom = true">
|
||||
{{ t('advancedUsage') }}
|
||||
{{ t('customBySlot') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
@@ -144,31 +173,36 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { skuData, initialSku } from './data';
|
||||
import { initialSku, getSkuData } from './data';
|
||||
import { LIMIT_TYPE } from '../constants';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '自定义步进器',
|
||||
hideSoldoutSku: '隐藏售罄规格',
|
||||
stepperTitle: '我要买',
|
||||
button1: '积分兑换',
|
||||
button2: '买买买',
|
||||
actionsTop: '商品不多，赶快购买吧',
|
||||
stepperTitle: '我要买',
|
||||
customBySlot: '通过插槽定制',
|
||||
customStepper: '自定义步进器',
|
||||
hideSoldoutSku: '隐藏售罄规格',
|
||||
largeImageMode: '大图预览模式',
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom Stepper Related Config',
|
||||
hideSoldoutSku: 'Hide Soldout Sku',
|
||||
stepperTitle: 'Stepper title',
|
||||
button1: 'Button',
|
||||
button2: 'Button',
|
||||
actionsTop: 'Action top info',
|
||||
customBySlot: 'Custom By Slot',
|
||||
stepperTitle: 'Stepper title',
|
||||
customStepper: 'Custom Stepper',
|
||||
hideSoldoutSku: 'Hide Soldout Sku',
|
||||
largeImageMode: 'Large Image Mode',
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
this.skuData = skuData;
|
||||
this.skuData = getSkuData();
|
||||
this.skuData2 = getSkuData(true);
|
||||
this.initialSku = initialSku;
|
||||
|
||||
return {
|
||||
@@ -176,11 +210,11 @@ export default {
|
||||
showCustom: false,
|
||||
showStepper: false,
|
||||
showSoldout: false,
|
||||
closeOnClickOverlay: true,
|
||||
showLargePicturePreview: false,
|
||||
customSkuValidator: () => '请选择xxx',
|
||||
customStepperConfig: {
|
||||
quotaText: '单次限购100件',
|
||||
stockFormatter: (stock) => `剩余${stock}件`,
|
||||
stockFormatter: (stock) => `剩余${stock}`,
|
||||
handleOverLimit: (data) => {
|
||||
const { action, limitType, quota, startSaleNum = 1 } = data;
|
||||
|
||||
|
||||
+134
-45
@@ -25,37 +25,23 @@
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
margin: 0 @padding-md;
|
||||
|
||||
&__img-wrap {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin: @padding-sm 0;
|
||||
margin: @padding-sm @padding-sm @padding-sm 0;
|
||||
overflow: hidden;
|
||||
background: @background-color;
|
||||
border-radius: @border-radius-md;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__goods-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
min-height: 96px;
|
||||
padding: @padding-sm 20px @padding-sm @padding-xs;
|
||||
overflow: hidden;
|
||||
padding: @padding-sm 20px @padding-sm 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,26 +109,11 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding-bottom: @padding-sm;
|
||||
}
|
||||
|
||||
&__title-multiple {
|
||||
color: @gray-6;
|
||||
}
|
||||
|
||||
&__item {
|
||||
&__item,
|
||||
&__image-item {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
margin: 0 @padding-sm @padding-sm 0;
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
border-radius: @border-radius-md;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -156,6 +127,26 @@
|
||||
content: '';
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @red;
|
||||
|
||||
&::before {
|
||||
background: currentColor;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
margin: 0 @padding-sm @padding-sm 0;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
|
||||
&-img {
|
||||
z-index: 1;
|
||||
width: 24px;
|
||||
@@ -170,15 +161,6 @@
|
||||
padding: @padding-xs;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @red;
|
||||
|
||||
&::before {
|
||||
background: currentColor;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: @gray-5;
|
||||
background: @active-color;
|
||||
@@ -189,6 +171,112 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
margin-right: 0;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 110px;
|
||||
margin: 0 4px 4px 0;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
padding: @padding-base;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
||||
span {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: @gray-5;
|
||||
cursor: not-allowed;
|
||||
|
||||
&::before {
|
||||
z-index: 2;
|
||||
background: @active-color;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding-bottom: @padding-sm;
|
||||
}
|
||||
|
||||
&__title-multiple {
|
||||
color: @gray-6;
|
||||
}
|
||||
|
||||
&__scroller {
|
||||
margin: 0 -@padding-md;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: inline-flex;
|
||||
margin-bottom: 4px;
|
||||
padding: 0 @padding-md;
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background: @gray-3;
|
||||
border-radius: 2px;
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
&-slider {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background-color: @red;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-stepper-stock {
|
||||
@@ -234,7 +322,8 @@
|
||||
|
||||
&__image-cell {
|
||||
.van-cell__title {
|
||||
max-width: 90px;
|
||||
max-width: @field-label-width;
|
||||
margin-right: @field-label-margin-right;
|
||||
}
|
||||
|
||||
.van-cell__value {
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@
|
||||
export default {
|
||||
'zh-CN': {
|
||||
vanSku: {
|
||||
select: '选择',
|
||||
select: '请选择',
|
||||
selected: '已选',
|
||||
selectSku: '请先选择商品规格',
|
||||
soldout: '库存不足',
|
||||
|
||||
@@ -30,7 +30,15 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="sku-container">
|
||||
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
高级用法
|
||||
大图预览模式
|
||||
</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sku-container">
|
||||
<!----> <button class="van-button van-button--primary van-button--normal van-button--block">
|
||||
<div class="van-button__content"><span class="van-button__text">
|
||||
通过插槽定制
|
||||
</span></div>
|
||||
</button></div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { mount } from '../../../test';
|
||||
import Sku from '..';
|
||||
import { skuData, initialSku } from '../demo/data';
|
||||
import { getSkuData, initialSku } from '../demo/data';
|
||||
|
||||
const skuData = getSkuData();
|
||||
|
||||
test('resetSelectedSku method', () => {
|
||||
skuData.sku.messages = [];
|
||||
|
||||
@@ -86,12 +86,14 @@ export default createComponent({
|
||||
computed: {
|
||||
minusDisabled() {
|
||||
return (
|
||||
this.disabled || this.disableMinus || this.currentValue <= this.min
|
||||
this.disabled || this.disableMinus || this.currentValue <= +this.min
|
||||
);
|
||||
},
|
||||
|
||||
plusDisabled() {
|
||||
return this.disabled || this.disablePlus || this.currentValue >= this.max;
|
||||
return (
|
||||
this.disabled || this.disablePlus || this.currentValue >= +this.max
|
||||
);
|
||||
},
|
||||
|
||||
inputStyle() {
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
<div class="van-multi-ellipsis--l2">{{ t('text2') }}</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('hairline')">
|
||||
<demo-block card :title="t('hairline')">
|
||||
<div class="van-hairline--top" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('animation')">
|
||||
<demo-block card :title="t('animation')">
|
||||
<van-cell is-link title="Fade" @click="animate('van-fade')" />
|
||||
<van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
|
||||
<van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
|
||||
|
||||
+10
-10
@@ -67,7 +67,7 @@
|
||||
@action-sheet-max-height: 80%;
|
||||
@action-sheet-header-height: 44px;
|
||||
@action-sheet-header-font-size: @font-size-lg;
|
||||
@action-sheet-description-color: @gray-7;
|
||||
@action-sheet-description-color: @gray-6;
|
||||
@action-sheet-description-font-size: @font-size-md;
|
||||
@action-sheet-description-line-height: 20px;
|
||||
@action-sheet-item-height: 50px;
|
||||
@@ -107,12 +107,10 @@
|
||||
@address-list-edit-icon-size: 20px;
|
||||
|
||||
// Button
|
||||
@button-mini-height: 22px;
|
||||
@button-mini-min-width: 50px;
|
||||
@button-mini-height: 24px;
|
||||
@button-mini-font-size: @font-size-xs;
|
||||
@button-small-height: 30px;
|
||||
@button-small-height: 32px;
|
||||
@button-small-font-size: @font-size-sm;
|
||||
@button-small-min-width: 60px;
|
||||
@button-normal-font-size: @font-size-md;
|
||||
@button-large-height: 50px;
|
||||
@button-default-height: 44px;
|
||||
@@ -197,7 +195,7 @@
|
||||
@cell-label-color: @gray-6;
|
||||
@cell-label-font-size: @font-size-sm;
|
||||
@cell-label-line-height: 18px;
|
||||
@cell-label-margin-top: 3px;
|
||||
@cell-label-margin-top: @padding-base;
|
||||
@cell-value-color: @gray-6;
|
||||
@cell-icon-size: 16px;
|
||||
@cell-right-icon-color: @gray-6;
|
||||
@@ -250,7 +248,7 @@
|
||||
@contact-edit-buttons-padding: @padding-xl 0;
|
||||
@contact-edit-button-margin-bottom: @padding-sm;
|
||||
@contact-edit-button-font-size: 16px;
|
||||
@contact-edit-field-label-width: 65px;
|
||||
@contact-edit-field-label-width: 4em;
|
||||
|
||||
// ContactList
|
||||
@contact-list-edit-icon-size: 16px;
|
||||
@@ -345,7 +343,9 @@
|
||||
@empty-bottom-margin-top: 24px;
|
||||
|
||||
// Field
|
||||
@field-label-width: 90px;
|
||||
@field-label-width: 6em;
|
||||
@field-label-color: @gray-7;
|
||||
@field-label-margin-right: @padding-sm;
|
||||
@field-input-text-color: @text-color;
|
||||
@field-input-error-text-color: @red;
|
||||
@field-input-disabled-text-color: @gray-5;
|
||||
@@ -423,6 +423,7 @@
|
||||
// ImagePreview
|
||||
@image-preview-index-text-color: @white;
|
||||
@image-preview-index-font-size: @font-size-md;
|
||||
@image-preview-index-line-height: 22px;
|
||||
@image-preview-index-text-shadow: 0 1px 1px @gray-8;
|
||||
@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
|
||||
@image-preview-close-icon-size: 22px;
|
||||
@@ -536,7 +537,6 @@
|
||||
@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;
|
||||
@@ -583,7 +583,7 @@
|
||||
@rate-icon-size: 20px;
|
||||
@rate-icon-gutter: @padding-base;
|
||||
@rate-icon-void-color: @gray-5;
|
||||
@rate-icon-full-color: #ffd21e;
|
||||
@rate-icon-full-color: @red;
|
||||
@rate-icon-disabled-color: @gray-5;
|
||||
|
||||
// ShareSheet
|
||||
|
||||
+4
-4
@@ -14,7 +14,7 @@ Vue.use(SwipeItem);
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Use `autoplay` prop to set autoplay interval
|
||||
Use `autoplay` prop to set autoplay interval.
|
||||
|
||||
```html
|
||||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
@@ -37,7 +37,7 @@ Use `autoplay` prop to set autoplay interval
|
||||
|
||||
### Image Lazyload
|
||||
|
||||
Use [Lazyload](#/en-US/lazyload) component to lazyload image
|
||||
Use [Lazyload](#/en-US/lazyload) component to lazyload image.
|
||||
|
||||
```html
|
||||
<van-swipe>
|
||||
@@ -110,7 +110,7 @@ export default {
|
||||
</van-swipe>
|
||||
```
|
||||
|
||||
> It's not supported to set SwipeItem size in the loop mode
|
||||
> It's not supported to set SwipeItem size in the loop mode.
|
||||
|
||||
### Custom Indicator
|
||||
|
||||
@@ -187,7 +187,7 @@ export default {
|
||||
|
||||
### Swipe Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods.
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
|
||||
@@ -14,7 +14,7 @@ Vue.use(SwipeItem);
|
||||
|
||||
### 基础用法
|
||||
|
||||
每个 SwipeItem 代表一张轮播卡片，可以通过`autoplay`属性设置自动轮播的间隔
|
||||
每个 SwipeItem 代表一张轮播卡片，可以通过 `autoplay` 属性设置自动轮播的间隔。
|
||||
|
||||
```html
|
||||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
|
||||
@@ -37,7 +37,7 @@ Vue.use(SwipeItem);
|
||||
|
||||
### 图片懒加载
|
||||
|
||||
当 Swipe 中含有图片时，可以配合 [Lazyload](#/zh-CN/lazyload) 组件实现图片懒加载
|
||||
当 Swipe 中含有图片时，可以配合 [Lazyload](#/zh-CN/lazyload) 组件实现图片懒加载。
|
||||
|
||||
```html
|
||||
<van-swipe :autoplay="3000">
|
||||
@@ -90,7 +90,7 @@ export default {
|
||||
|
||||
### 纵向滚动
|
||||
|
||||
设置`vertical`属性后滑块会纵向排列，此时需要指定滑块容器的高度
|
||||
设置 `vertical` 属性后滑块会纵向排列，此时需要指定滑块容器的高度。
|
||||
|
||||
```html
|
||||
<van-swipe style="height: 200px;" vertical>
|
||||
@@ -103,7 +103,7 @@ export default {
|
||||
|
||||
### 自定义滑块大小
|
||||
|
||||
滑块默认宽度为`100%`，可以通过`width`属性设置单个滑块的宽度。纵向滚动模式下，可以通过`height`属性设置单个滑块的高度。
|
||||
滑块默认宽度为 `100%`，可以通过 `width` 属性设置单个滑块的宽度。纵向滚动模式下，可以通过 `height` 属性设置单个滑块的高度。
|
||||
|
||||
```html
|
||||
<van-swipe :loop="false" :width="300">
|
||||
@@ -114,11 +114,11 @@ export default {
|
||||
</van-swipe>
|
||||
```
|
||||
|
||||
> 目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false
|
||||
> 目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false。
|
||||
|
||||
### 自定义指示器
|
||||
|
||||
通过`indicator`插槽可以自定义指示器的样式
|
||||
通过 `indicator` 插槽可以自定义指示器的样式。
|
||||
|
||||
```html
|
||||
<van-swipe @change="onChange">
|
||||
@@ -193,7 +193,7 @@ export default {
|
||||
|
||||
### Swipe 方法
|
||||
|
||||
通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
@@ -226,3 +226,7 @@ export default {
|
||||
### 在桌面端无法操作组件？
|
||||
|
||||
参见[在桌面端使用](#/zh-CN/quickstart#zai-zhuo-mian-duan-shi-yong)。
|
||||
|
||||
### Swipe 组件功能太少，无法实现复杂效果？
|
||||
|
||||
Vant 中的 Swipe 组件是比较轻量的，因此功能也比较基础。如果需要更复杂的轮播效果，推荐使用社区里一些优质的轮播库，比如 [vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper)。
|
||||
|
||||
@@ -118,6 +118,7 @@ export default {
|
||||
| main-active-index | The index of selected parent node | _number \| string_ | `0` |
|
||||
| active-id | Id of selected item | _number \| string \|<br>(number \| string)[]_ | `0` |
|
||||
| max `v2.2.0` | Maximum number of selected items | _number \| string_ | `Infinity` |
|
||||
| selected-icon `v2.9.0` | Selected icon | _string_ | `success` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -126,6 +126,7 @@ export default {
|
||||
| main-active-index | 左侧选中项的索引 | _number \| string_ | `0` |
|
||||
| active-id | 右侧选中项的 id，支持传入数组 | _number \| string \|<br>(number \| string)[]_ | `0` |
|
||||
| max `v2.2.0` | 右侧项最大选中个数 | _number \| string_ | `Infinity` |
|
||||
| selected-icon `v2.9.0` | 自定义右侧栏选中状态的图标 | _string_ | `success` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
&__item {
|
||||
position: relative;
|
||||
padding: 0 32px 0 @padding-md;
|
||||
font-weight: bold;
|
||||
font-weight: @font-weight-bold;
|
||||
line-height: @tree-select-item-height;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
@@ -34,6 +34,7 @@ export type TreeSelectProps = {
|
||||
height: number | string;
|
||||
items: TreeSelectItem[];
|
||||
activeId: TreeSelectActiveId;
|
||||
selectedIcon: string;
|
||||
mainActiveIndex: number | string;
|
||||
};
|
||||
|
||||
@@ -49,7 +50,7 @@ function TreeSelect(
|
||||
slots: TreeSelectSlots,
|
||||
ctx: RenderContext<TreeSelectProps>
|
||||
) {
|
||||
const { height, items, mainActiveIndex, activeId } = props;
|
||||
const { items, height, activeId, selectedIcon, mainActiveIndex } = props;
|
||||
|
||||
const selectedItem: Partial<TreeSelectItem> = items[+mainActiveIndex] || {};
|
||||
const subItems = selectedItem.children || [];
|
||||
@@ -110,7 +111,7 @@ function TreeSelect(
|
||||
>
|
||||
{item.text}
|
||||
{isActiveItem(item.id) && (
|
||||
<Icon name="success" class={bem('selected')} />
|
||||
<Icon name={selectedIcon} class={bem('selected')} />
|
||||
)}
|
||||
</div>
|
||||
));
|
||||
@@ -152,6 +153,10 @@ TreeSelect.props = {
|
||||
type: [Number, String, Array],
|
||||
default: 0,
|
||||
},
|
||||
selectedIcon: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
mainActiveIndex: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
|
||||
@@ -34,3 +34,8 @@ exports[`nav info 1`] = `
|
||||
<div class="van-tree-select__content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`selected-icon prop 1`] = `
|
||||
<div class="van-ellipsis van-tree-select__item van-tree-select__item--active">city1<i class="van-icon van-icon-foo van-tree-select__selected">
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
@@ -330,3 +330,16 @@ test('should sync value before trigger click-item event', (done) => {
|
||||
const items = wrapper.findAll('.van-tree-select__item');
|
||||
items.at(1).trigger('click');
|
||||
});
|
||||
|
||||
test('selected-icon prop', () => {
|
||||
const wrapper = mount(TreeSelect, {
|
||||
propsData: {
|
||||
items: mockItems,
|
||||
activeId: 1,
|
||||
mainActiveIndex: 0,
|
||||
selectedIcon: 'foo',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-tree-select__item')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@@ -288,7 +288,7 @@ export default createComponent({
|
||||
if (status === 'uploading' || status === 'failed') {
|
||||
const MaskIcon =
|
||||
status === 'failed' ? (
|
||||
<Icon name="warning-o" class={bem('mask-icon')} />
|
||||
<Icon name="close" class={bem('mask-icon')} />
|
||||
) : (
|
||||
<Loading class={bem('loading')} />
|
||||
);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user