diff --git a/example/pages/area/index.wxml b/example/pages/area/index.wxml
index 35e0cad0..79e453f2 100644
--- a/example/pages/area/index.wxml
+++ b/example/pages/area/index.wxml
@@ -30,5 +30,17 @@
/>
+
+
+
+
diff --git a/packages/area/README.md b/packages/area/README.md
index 72c1c574..89081ede 100644
--- a/packages/area/README.md
+++ b/packages/area/README.md
@@ -41,6 +41,18 @@
```
+### 配置列占位提示文字
+
+可以通过`columns-placeholder`属性配置每一列的占位提示文字
+
+```html
+
+```
+
## API
### Props
@@ -51,6 +63,7 @@
| 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` | - |
diff --git a/packages/area/index.ts b/packages/area/index.ts
index a5e2538c..01e963c9 100644
--- a/packages/area/index.ts
+++ b/packages/area/index.ts
@@ -7,6 +7,8 @@ type AreaItem = {
code: string;
};
+const COLUMNSPLACEHOLDERCODE = '000000';
+
VantComponent({
classes: ['active-class', 'toolbar-class', 'column-class'],
@@ -20,12 +22,25 @@ VantComponent({
columnsNum: {
type: null,
value: 3
+ },
+ columnsPlaceholder: {
+ type: Array,
+ observer(val) {
+ this.setData({
+ typeToColumnsPlaceholder: {
+ province: val[0] || '',
+ city: val[1] || '',
+ county: val[2] || '',
+ }
+ });
+ }
}
},
data: {
columns: [{ values: [] }, { values: [] }, { values: [] }],
- displayColumns: [{ values: [] }, { values: [] }, { values: [] }]
+ displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
+ typeToColumnsPlaceholder: {}
},
watch: {
@@ -62,7 +77,10 @@ VantComponent({
},
onConfirm(event: Weapp.Event) {
- this.emit('confirm', event.detail);
+ const { index } = event.detail;
+ let { value } = event.detail;
+ value = this.parseOutputValues(value);
+ this.emit('confirm', { value, index });
},
emit(type: string, detail) {
@@ -71,13 +89,28 @@ VantComponent({
this.$emit(type, detail);
},
+ // parse output columns data
+ parseOutputValues(values) {
+ const { columnsPlaceholder } = this.data;
+ return values.map((value = {}, index) => {
+ value = JSON.parse(JSON.stringify(value));
+ if (!value.code || value.name === columnsPlaceholder[index]) {
+ value.code = '';
+ value.name = '';
+ }
+ return value;
+ });
+ },
+
onChange(event: Weapp.Event) {
const { index, picker, value } = event.detail;
this.code = value[index].code;
+ let getValues = picker.getValues();
+ getValues = this.parseOutputValues(getValues);
this.setValues().then(() => {
this.$emit('change', {
picker,
- values: picker.getValues(),
+ values: getValues,
index
});
});
@@ -89,6 +122,7 @@ VantComponent({
},
getList(type: string, code?: string): AreaItem[] {
+ const { typeToColumnsPlaceholder } = this.data;
let result = [];
if (type !== 'province' && !code) {
return result;
@@ -109,6 +143,15 @@ VantComponent({
result = result.filter(item => item.code.indexOf(code) === 0);
}
+ if (typeToColumnsPlaceholder[type] && result.length) {
+ // set columns placeholder
+ const codeFill = type === 'province' ? '' : type === 'city' ? COLUMNSPLACEHOLDERCODE.slice(2, 4) : COLUMNSPLACEHOLDERCODE.slice(4, 6);
+ result.unshift({
+ code: `${code}${codeFill}`,
+ name: typeToColumnsPlaceholder[type]
+ });
+ }
+
return result;
},
@@ -133,7 +176,18 @@ VantComponent({
setValues() {
const county = this.getConfig('county');
- let code = this.code || Object.keys(county)[0] || '';
+ let { code } = this;
+
+ if (!code) {
+ if (this.data.columnsPlaceholder.length) {
+ code = COLUMNSPLACEHOLDERCODE;
+ } else if (Object.keys(county)[0]) {
+ code = Object.keys(county)[0];
+ } else {
+ code = '';
+ }
+ }
+
const province = this.getList('province');
const city = this.getList('city', code.slice(0, 2));