feat(Area): add columns placeholder (#2198)

example/pages/area/index.js

@@ -23,7 +23,7 @@ Page({
   onChange(event) {
     const { values } = event.detail;
 
-    Toast(values.map(item => item.name).join('-'));
+    Toast(values.map(item => (item ? item.name : '')).join('-'));
   },
 
   onConfirm(event) {

example/pages/area/index.wxml

@@ -30,5 +30,17 @@
   />
 </demo-block>
 
+<demo-block title="配置列占位提示文字">
+  <van-area
+    title="标题"
+    columns-num="{{ 2 }}"
+    loading="{{ loading }}"
+    area-list="{{ areaList }}"
+    columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"
+    bind:change="onChange"
+    bind:confirm="onConfirm"
+  />
+</demo-block>
+
 
 <van-toast id="van-toast" />

packages/area/README.md

@@ -41,6 +41,18 @@
 <van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />
 ```
 
+### 配置列占位提示文字
+
+可以通过`columns-placeholder`属性配置每一列的占位提示文字
+
+```html
+<van-area
+  :area-list="{{ areaList }}"
+  :columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"
+  title="标题"
+/>
+```
+
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -49,6 +61,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` |

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: [String, Number],
       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: {
@@ -44,9 +59,9 @@ VantComponent({
   },
 
   mounted() {
-    setTimeout(()=>{
+    setTimeout(() => {
-      this.setValues()
+      this.setValues();
-    }, 0)
+    }, 0);
   },
 
   methods: {
@@ -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,31 @@ VantComponent({
       this.$emit(type, detail);
     },
 
+    // parse output columns data
+    parseOutputValues(values) {
+      const { columnsPlaceholder } = this.data;
+      return values.map((value, index) => {
+        // save undefined value
+        if (!value) return value;
+
+        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 +125,7 @@ VantComponent({
     },
 
     getList(type: string, code?: string): AreaItem[] {
+      const { typeToColumnsPlaceholder } = this.data;
       let result = [];
       if (type !== 'province' && !code) {
         return result;
@@ -109,6 +146,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 +179,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));