feat(Area): columns placeholder (#4623)

src/area/README.md

@@ -47,7 +47,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"
 />
 ```

src/area/README.zh-CN.md

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

src/area/demo/index.vue

@@ -39,14 +39,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,
     }
   },

src/area/index.js

@@ -4,6 +4,8 @@ import { pickerProps } from '../picker/shared';
 
 const [createComponent, bem] = createNamespace('area');
 
+const COLUMNSPLACEHOLDERCODE = '000000';
+
 function isOverseaCode(code) {
   return code[0] === '9';
 }
@@ -99,14 +101,6 @@ 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') {
@@ -116,6 +110,15 @@ export default createComponent({
         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;
     },
 
@@ -140,19 +143,28 @@ export default createComponent({
       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);
     },
@@ -162,7 +174,7 @@ export default createComponent({
 
       if (!code) {
         if (this.columnsPlaceholder.length) {
-          code = '000000';
+          code = COLUMNSPLACEHOLDERCODE;
         } else if (Object.keys(this.county)[0]) {
           code = Object.keys(this.county)[0];
         } else {

src/area/test/__snapshots__/demo.spec.js.snap

@@ -262,14 +262,10 @@ exports[`renders demo correctly 1`] = `
           </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>
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></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>
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"></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>