blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Area): add columns-placeholder prop (#4566)

Browse Source
This commit is contained in:
Jake 2019-09-25 21:33:46 +08:00 committed by neverland
parent 89d97ee5cb
commit 306d595fbd
5 changed files with 148 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/area/README.md
View File

@ -40,6 +40,18 @@ 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
### Props
@ -50,6 +62,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` | - |

13
src/area/README.zh-CN.md
View File

@ -39,6 +39,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
### Props
@ -49,6 +61,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` | - |

16
src/area/demo/index.vue
View File

@ -18,6 +18,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>
@ -30,12 +38,16 @@ export default {
'zh-CN': {
title2: '选中省市区',
title3: '配置显示列',
areaList: AreaList
title4: '配置列占位提示文字',
columnsPlaceholder: ['请选择'],
areaList: AreaList,
},
'en-US': {
title2: 'Initial Value',
title3: 'Columns Number',
areaList: AreaListEn
title4: 'Columns Placeholder',
columnsPlaceholder: ['Choose'],
areaList: AreaListEn,
}
},

47
src/area/index.js
View File

@ -23,6 +23,10 @@ export default createComponent({
isOverseaCode: {
type: Function,
default: isOverseaCode
},
columnsPlaceholder: {
type: Array,
default: () => []
}
},
@ -48,6 +52,14 @@ export default createComponent({
displayColumns() {
return this.columns.slice(0, +this.columnsNum);
},
typeToColumnsPlaceholder() {
return {
province: this.columnsPlaceholder[0] || '',
city: this.columnsPlaceholder[1] || '',
county: this.columnsPlaceholder[2] || '',
};
}
},
@ -87,6 +99,14 @@ export default createComponent({
name: list[listCode]
}));
if (this.columnsPlaceholder.length) {
// set columns placeholder
result.unshift({
code: '000000',
name: this.typeToColumnsPlaceholder[type]
});
}
if (code) {
// oversea code
if (this.isOverseaCode(code) && type === 'city') {
@ -126,8 +146,30 @@ export default createComponent({
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));
@ -193,7 +235,8 @@ export default createComponent({
render() {
const on = {
...this.$listeners,
change: this.onChange
change: this.onChange,
confirm: this.onConfirm
};
return (

63
src/area/test/__snapshots__/demo.spec.js.snap
View File

@ -214,5 +214,68 @@ exports[`renders demo correctly 1`] = `
<!---->
</div>
</div>
<div>
<div class="van-picker van-area">
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
<div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">请选择</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;"></li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;"></li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
</div>
</div>
</div>
`;