feat(Area): columns placeholder (#4629)

docs/src/docs-entry.js

@@ -2,7 +2,6 @@
 // This file is auto gererated by build/build-entry.js
 export default {
   'changelog.en-US': () => import('../markdown/changelog.en-US.md'),
-  'changelog.generated': () => import('../markdown/changelog.generated.md'),
   'changelog.zh-CN': () => import('../markdown/changelog.zh-CN.md'),
   'contribution.zh-CN': () => import('../markdown/contribution.zh-CN.md'),
   'design.zh-CN': () => import('../markdown/design.zh-CN.md'),

packages/area/demo/index.vue

@@ -42,14 +42,14 @@ export default {
       title2: '选中省市区',
       title3: '配置显示列',
       title4: '配置列占位提示文字',
-      columnsPlaceholder: ['请选择'],
+      columnsPlaceholder: ['请选择', '请选择', '请选择'],
       areaList: AreaList
     },
     'en-US': {
       title2: 'Initial Value',
       title3: 'Columns Number',
       title4: 'Columns Placeholder',
-      columnsPlaceholder: ['Choose'],
+      columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
       areaList: AreaListEn
     }
   },

packages/area/en-US.md

@@ -43,7 +43,7 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 ```html
 <van-area
   :area-list="areaList"
-  :columns-placeholder="['Choose']"
+  :columns-placeholder="['Choose', 'Choose', 'Choose']"
   title="Title"
 />
 ```

packages/area/index.js

@@ -4,6 +4,8 @@ import { pickerProps } from '../picker/shared';
 
 const [sfc, bem] = use('area');
 
+const COLUMNSPLACEHOLDERCODE = '000000';
+
 export default sfc({
   props: {
     ...pickerProps,
@@ -92,14 +94,6 @@ 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') {
@@ -109,6 +103,15 @@ export default sfc({
         result = result.filter(item => item.code.indexOf(code) === 0);
       }
 
+      if (this.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: this.typeToColumnsPlaceholder[type]
+        });
+      }
+
       return result;
     },
 
@@ -132,19 +135,28 @@ export default sfc({
       return 0;
     },
 
-    onChange(picker, values, index) {
-      this.code = values[index].code;
-      this.setValues();
-      this.$emit('change', picker, picker.getValues(), index);
-    },
-
-    onConfirm(values, index) {
-      values.forEach(value => {
-        if (value.code === '000000') {
+    // parse output columns data
+    parseOutputValues(values) {
+      return values.map((value = {}, index) => {
+        value = JSON.parse(JSON.stringify(value));
+        if (!value.code || value.name === this.columnsPlaceholder[index]) {
           value.code = '';
           value.name = '';
         }
+        return value;
       });
+    },
+
+    onChange(picker, values, index) {
+      this.code = values[index].code;
+      this.setValues();
+      let getValues = picker.getValues();
+      getValues = this.parseOutputValues(getValues);
+      this.$emit('change', picker, getValues, index);
+    },
+
+    onConfirm(values, index) {
+      values = this.parseOutputValues(values);
       this.setValues();
       this.$emit('confirm', values, index);
     },
@@ -154,7 +166,7 @@ export default sfc({
 
       if (!code) {
         if (this.columnsPlaceholder.length) {
-          code = '000000';
+          code = COLUMNSPLACEHOLDERCODE;
         } else if (Object.keys(this.county)[0]) {
           code = Object.keys(this.county)[0];
         } else {

packages/area/zh-CN.md

@@ -42,7 +42,7 @@ Vue.use(Area);
 ```html
 <van-area
   :area-list="areaList"
-  :columns-placeholder="['请选择']"
+  :columns-placeholder="['请选择', '请选择', '请选择']"
   title="标题"
 />
 ```