mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat(Area): add columns-placeholder prop (#4580)
This commit is contained in:
Jake
neverland
parent
e6e322441c
commit
3b32245bc8
@ -25,7 +25,7 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
|
||||
<div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
|
||||
<div class="van-cell van-address-item van-address-item--disabled">
|
||||
<div class="van-cell__value van-cell__value--alone van-address-item__value">
|
||||
<div class="van-address-item__name">王五，1320000000</div>
|
||||
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
|
||||
|
||||
@ -21,6 +21,14 @@
|
||||
:title="$t('title')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-area
|
||||
:area-list="$t('areaList')"
|
||||
:columns-placeholder="$t('columnsPlaceholder')"
|
||||
:title="$t('title')"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -33,11 +41,15 @@ export default {
|
||||
'zh-CN': {
|
||||
title2: '选中省市区',
|
||||
title3: '配置显示列',
|
||||
title4: '配置列占位提示文字',
|
||||
columnsPlaceholder: ['请选择'],
|
||||
areaList: AreaList
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Initial Value',
|
||||
title3: 'Columns Number',
|
||||
title4: 'Columns Placeholder',
|
||||
columnsPlaceholder: ['Choose'],
|
||||
areaList: AreaListEn
|
||||
}
|
||||
},
|
||||
|
||||
@ -36,6 +36,17 @@ Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
<van-area :area-list="areaList" :columns-num="2" title="Title" />
|
||||
```
|
||||
|
||||
### Columns Placeholder
|
||||
|
||||
`columns-placeholder` property is used to config placeholder of columns.
|
||||
|
||||
```html
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
:columns-placeholder="['Choose']"
|
||||
title="Title"
|
||||
/>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
@ -45,6 +56,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
| title | Toolbar title | `String` | - |
|
||||
| area-list | Area data | `Object` | - |
|
||||
| columns-num | level of picker | `String | Number` | `3` |
|
||||
| columns-placeholder | placeholder of columns | `string[]` | `[]` | - |
|
||||
| item-height | Option height | `Number` | `44` |
|
||||
| loading | Whether to show loading prompt | `Boolean` | `false` |
|
||||
| visible-item-count | Count of visible columns | `Number` | `5` |
|
||||
|
||||
@ -15,6 +15,10 @@ export default sfc({
|
||||
columnsNum: {
|
||||
type: [String, Number],
|
||||
default: 3
|
||||
},
|
||||
columnsPlaceholder: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
|
||||
@ -40,6 +44,13 @@ export default sfc({
|
||||
|
||||
displayColumns() {
|
||||
return this.columns.slice(0, +this.columnsNum);
|
||||
},
|
||||
typeToColumnsPlaceholder() {
|
||||
return {
|
||||
province: this.columnsPlaceholder[0] || '',
|
||||
city: this.columnsPlaceholder[1] || '',
|
||||
county: this.columnsPlaceholder[2] || '',
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
@ -81,6 +92,14 @@ export default sfc({
|
||||
name: list[listCode]
|
||||
}));
|
||||
|
||||
if (this.columnsPlaceholder.length) {
|
||||
// set columns placeholder
|
||||
result.unshift({
|
||||
code: '000000',
|
||||
name: this.typeToColumnsPlaceholder[type]
|
||||
});
|
||||
}
|
||||
|
||||
if (code) {
|
||||
// oversea code
|
||||
if (code[0] === '9' && type === 'city') {
|
||||
@ -119,8 +138,30 @@ export default sfc({
|
||||
this.$emit('change', picker, picker.getValues(), index);
|
||||
},
|
||||
|
||||
onConfirm(values, index) {
|
||||
values.forEach(value => {
|
||||
if (value.code === '000000') {
|
||||
value.code = '';
|
||||
value.name = '';
|
||||
}
|
||||
});
|
||||
this.setValues();
|
||||
this.$emit('confirm', values, index);
|
||||
},
|
||||
|
||||
setValues() {
|
||||
let code = this.code || Object.keys(this.county)[0] || '';
|
||||
let { code } = this;
|
||||
|
||||
if (!code) {
|
||||
if (this.columnsPlaceholder.length) {
|
||||
code = '000000';
|
||||
} else if (Object.keys(this.county)[0]) {
|
||||
code = Object.keys(this.county)[0];
|
||||
} else {
|
||||
code = '';
|
||||
}
|
||||
}
|
||||
|
||||
const { picker } = this.$refs;
|
||||
const province = this.getList('province');
|
||||
const city = this.getList('city', code.slice(0, 2));
|
||||
@ -186,7 +227,8 @@ export default sfc({
|
||||
render(h) {
|
||||
const on = {
|
||||
...this.$listeners,
|
||||
change: this.onChange
|
||||
change: this.onChange,
|
||||
confirm: this.onConfirm
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -63,5 +63,27 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-ellipsis van-picker__title">标题</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-picker-column" style="height:220px;">
|
||||
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;"></ul>
|
||||
</div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -96,24 +96,23 @@ exports[`change option 3`] = `
|
||||
exports[`columns-num prop 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker-column">
|
||||
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
|
||||
<div class="van-picker-column" style="height: 220px;">
|
||||
<ul style="transition: 0ms; transform: translate3d(0, 88px, 0); line-height: 44px;">
|
||||
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
|
||||
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
|
||||
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,6 +35,18 @@ Vue.use(Area);
|
||||
<van-area :area-list="areaList" :columns-num="2" title="标题" />
|
||||
```
|
||||
|
||||
### 配置列占位提示文字
|
||||
|
||||
可以通过`columns-placeholder`属性配置每一列的占位提示文字
|
||||
|
||||
```html
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
:columns-placeholder="['请选择']"
|
||||
title="标题"
|
||||
/>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
@ -43,6 +55,7 @@ Vue.use(Area);
|
||||
| title | 顶部栏标题 | `String` | - | - |
|
||||
| area-list | 省市区数据，格式见下方 | `Object` | - | - |
|
||||
| columns-num | 显示列数，3-省市区，2-省市，1-省 | `String | Number` | `3` | - |
|
||||
| columns-placeholder | 列占位提示文字 | `string[]` | `[]` | - |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` | - |
|
||||
| item-height | 选项高度 | `Number` | `44` | - |
|
||||
| visible-item-count | 可见的选项个数 | `Number` | `5` | - |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user