[Improvement] Area: default option (#1272)

packages/address-edit/test/__snapshots__/demo.spec.js.snap

@@ -108,8 +108,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-picker__columns" style="height:220px;">
             <div class="van-picker-column" style="height:220px;">
               <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-                <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
+                <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
-                <li class="van-ellipsis van-picker-column__item">北京市</li>
                 <li class="van-ellipsis van-picker-column__item">天津市</li>
                 <li class="van-ellipsis van-picker-column__item">河北省</li>
                 <li class="van-ellipsis van-picker-column__item">山西省</li>
@@ -147,12 +146,26 @@ exports[`renders demo correctly 1`] = `
             </div>
             <div class="van-picker-column" style="height:220px;">
               <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-                <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
+                <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+                <li class="van-ellipsis van-picker-column__item">县</li>
               </ul>
             </div>
             <div class="van-picker-column" style="height:220px;">
               <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-                <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择地区</li>
+                <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
+                <li class="van-ellipsis van-picker-column__item">西城区</li>
+                <li class="van-ellipsis van-picker-column__item">朝阳区</li>
+                <li class="van-ellipsis van-picker-column__item">丰台区</li>
+                <li class="van-ellipsis van-picker-column__item">石景山区</li>
+                <li class="van-ellipsis van-picker-column__item">海淀区</li>
+                <li class="van-ellipsis van-picker-column__item">门头沟区</li>
+                <li class="van-ellipsis van-picker-column__item">房山区</li>
+                <li class="van-ellipsis van-picker-column__item">通州区</li>
+                <li class="van-ellipsis van-picker-column__item">顺义区</li>
+                <li class="van-ellipsis van-picker-column__item">昌平区</li>
+                <li class="van-ellipsis van-picker-column__item">大兴区</li>
+                <li class="van-ellipsis van-picker-column__item">怀柔区</li>
+                <li class="van-ellipsis van-picker-column__item">平谷区</li>
               </ul>
             </div>
             <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -188,33 +188,20 @@ exports[`create a AddressEdit with props 1`] = `
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
-            <li class="van-ellipsis van-picker-column__item">北京市</li>
+            <li class="van-ellipsis van-picker-column__item">天津市</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
-            <li class="van-ellipsis van-picker-column__item">北京市</li>
+            <li class="van-ellipsis van-picker-column__item">县</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择地区</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
-            <li class="van-ellipsis van-picker-column__item">东城区</li>
             <li class="van-ellipsis van-picker-column__item">西城区</li>
-            <li class="van-ellipsis van-picker-column__item">朝阳区</li>
-            <li class="van-ellipsis van-picker-column__item">丰台区</li>
-            <li class="van-ellipsis van-picker-column__item">石景山区</li>
-            <li class="van-ellipsis van-picker-column__item">海淀区</li>
-            <li class="van-ellipsis van-picker-column__item">门头沟区</li>
-            <li class="van-ellipsis van-picker-column__item">房山区</li>
-            <li class="van-ellipsis van-picker-column__item">通州区</li>
-            <li class="van-ellipsis van-picker-column__item">顺义区</li>
-            <li class="van-ellipsis van-picker-column__item">昌平区</li>
-            <li class="van-ellipsis van-picker-column__item">大兴区</li>
-            <li class="van-ellipsis van-picker-column__item">怀柔区</li>
-            <li class="van-ellipsis van-picker-column__item">平谷区</li>
           </ul>
         </div>
         <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>

packages/address-edit/test/index.spec.js

@@ -212,22 +212,22 @@ test('set/get area code', async() => {
     propsData: { areaList }
   });
 
-  expect(wrapper.vm.getArea()).toEqual([
-    { code: '-1', name: '选择省份' },
-    { code: '-1', name: '选择城市' },
-    { code: '-1', name: '选择地区' }
-  ]);
-
-  wrapper.vm.setAreaCode('110101');
-
-  await later(50);
-  expect(wrapper.vm.data.area_code).toEqual('110101');
   expect(wrapper.vm.getArea()).toEqual([
     { code: '110000', name: '北京市' },
     { code: '110100', name: '北京市' },
     { code: '110101', name: '东城区' }
   ]);
 
+  wrapper.vm.setAreaCode('110102');
+
+  await later(50);
+  expect(wrapper.vm.data.area_code).toEqual('110102');
+  expect(wrapper.vm.getArea()).toEqual([
+    { code: '110000', name: '北京市' },
+    { code: '110100', name: '北京市' },
+    { code: '110102', name: '西城区' }
+  ]);
+
   wrapper.vm.$refs = [];
   wrapper.vm.setAreaCode('110102');
   expect(wrapper.vm.getArea()).toEqual([]);

packages/area/demo/area.simple.js

@@ -1,26 +1,21 @@
 export default {
   'province_list': {
-    '110000': '北京市'
+    '110000': '北京市',
+    '120000': '天津市'
   },
   'city_list': {
-    '110100': '北京市'
+    '110100': '北京市',
+    '110200': '县',
+    '120100': '天津市',
+    '120200': '县'
   },
   'county_list': {
     '110101': '东城区',
     '110102': '西城区',
-    '110105': '朝阳区',
-    '110106': '丰台区',
-    '110107': '石景山区',
-    '110108': '海淀区',
-    '110109': '门头沟区',
-    '110111': '房山区',
-    '110112': '通州区',
-    '110113': '顺义区',
-    '110114': '昌平区',
-    '110115': '大兴区',
-    '110116': '怀柔区',
-    '110117': '平谷区',
     '110228': '密云县',
-    '110229': '延庆县'
+    '110229': '延庆县',
+    '120101': '和平区',
+    '120102': '河东区',
+    '120225': '蓟县'
   }
 };

packages/area/index.vue

@@ -28,13 +28,12 @@ export default create({
   },
 
   props: {
-    value: {},
+    value: String,
     title: String,
     loading: Boolean,
     areaList: Object,
     itemHeight: Number,
     visibleItemCount: Number,
-    // 省市县显示列数，3-省市县，2-省市，1-省
     columnsNum: {
       type: [String, Number],
       default: 3
@@ -47,99 +46,74 @@ export default create({
     },
 
     columns() {
-      const columns = [];
-
       if (!this.listValid) {
-        return columns;
+        return [];
       }
 
-      const code = this.value || '';
+      const code = this.getCode();
-      const columnsNum = +this.columnsNum;
+      return [
-
+        { values: this.getList('province') },
-      columns.push({
+        { values: this.getList('city', code.slice(0, 2)) },
-        values: this.getList('province')
+        { values: this.getList('county', code.slice(0, 4)) }
-      });
+      ].slice(0, +this.columnsNum);
-
-      if (columnsNum > 1) {
-        columns.push({
-          values: this.getList('city', code.slice(0, 2))
-        });
-      }
-
-      if (columnsNum > 2) {
-        columns.push({
-          values: this.getList('county', code.slice(0, 4))
-        });
-      }
-
-      return columns;
     }
   },
 
-  mounted() {
-    this.setIndex();
-  },
-
   watch: {
-    value() {
+    columns: {
-      this.setIndex();
+      handler() {
-    },
+        this.$nextTick(this.setIndex);
-
+      },
-    areaList() {
+      immediate: true
-      this.setIndex();
     }
   },
 
   methods: {
     setIndex() {
-      this.$nextTick(() => {
+      const code = this.getCode();
-        const code = this.value || '';
+      this.$refs.picker && this.$refs.picker.setIndexes([
-        const { picker } = this.$refs;
+        this.getIndex('province', code),
-        picker && picker.setIndexes([
+        this.getIndex('city', code),
-          this.getIndex('province', code),
+        this.getIndex('county', code)
-          this.getIndex('city', code),
+      ]);
-          this.getIndex('county', code)
-        ]);
-      });
     },
 
-    // 根据省市县类型和对应的`code`获取对应列表
+    getCode() {
+      return (
+        this.value ||
+        (this.listValid && Object.keys(this.areaList.county_list)[0]) ||
+        ''
+      );
+    },
+
+    // get list by code
     getList(type, code) {
       let result = [];
-
+      if (!this.listValid || (type !== 'province' && !code)) {
-      if (this.listValid && (type === 'province' || code)) {
+        return result;
-        const { areaList } = this;
-        const list =
-          type === 'province'
-            ? areaList.province_list
-            : type === 'city' ? areaList.city_list : areaList.county_list;
-
-        result = Object.keys(list).map(code => ({
-          code,
-          name: list[code]
-        }));
-
-        if (type !== 'province' && code) {
-          result = result.filter(item => item.code.indexOf(code) === 0);
-        }
       }
 
-      result.unshift({
+      const list = this.areaList[`${type}_list`];
-        code: '-1',
+      result = Object.keys(list).map(code => ({
-        name: this.$t(type)
+        code,
-      });
+        name: list[code]
+      }));
+
+      if (code) {
+        result = result.filter(item => item.code.indexOf(code) === 0);
+      }
 
       return result;
     },
 
-    // 获取对应省市县在列表中的索引
+    // get index by code
     getIndex(type, code) {
       const compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
-      const areaList = this.getList(type, code.slice(0, compareNum - 2));
+      const list = this.getList(type, code.slice(0, compareNum - 2));
       code = code.slice(0, compareNum);
 
-      for (let i = 0; i < areaList.length; i++) {
+      for (let i = 0; i < list.length; i++) {
-        if (areaList[i].code.slice(0, compareNum) === code) {
+        if (list[i].code.slice(0, compareNum) === code) {
           return i;
         }
       }
@@ -148,14 +122,15 @@ export default create({
     },
 
     onChange(picker, values, index) {
-      const code = values[index].code;
+      let code = values[index].code;
-      // 处理省变化
+
       if (index === 0) {
-        picker.setColumnValues(1, this.getList('city', code.slice(0, 2)));
+        const cityList = this.getList('city', code.slice(0, 2));
-        picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
+        picker.setColumnValues(1, cityList);
-      } else if (index === 1) {
+        code = cityList[0].code;
-        picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
       }
+
+      picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
       this.$emit('change', picker, values, index);
     },
 

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

@@ -13,8 +13,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
-            <li class="van-ellipsis van-picker-column__item">北京市</li>
             <li class="van-ellipsis van-picker-column__item">天津市</li>
             <li class="van-ellipsis van-picker-column__item">河北省</li>
             <li class="van-ellipsis van-picker-column__item">山西省</li>
@@ -52,12 +51,26 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+            <li class="van-ellipsis van-picker-column__item">县</li>
           </ul>
         </div>
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择地区</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
+            <li class="van-ellipsis van-picker-column__item">西城区</li>
+            <li class="van-ellipsis van-picker-column__item">朝阳区</li>
+            <li class="van-ellipsis van-picker-column__item">丰台区</li>
+            <li class="van-ellipsis van-picker-column__item">石景山区</li>
+            <li class="van-ellipsis van-picker-column__item">海淀区</li>
+            <li class="van-ellipsis van-picker-column__item">门头沟区</li>
+            <li class="van-ellipsis van-picker-column__item">房山区</li>
+            <li class="van-ellipsis van-picker-column__item">通州区</li>
+            <li class="van-ellipsis van-picker-column__item">顺义区</li>
+            <li class="van-ellipsis van-picker-column__item">昌平区</li>
+            <li class="van-ellipsis van-picker-column__item">大兴区</li>
+            <li class="van-ellipsis van-picker-column__item">怀柔区</li>
+            <li class="van-ellipsis van-picker-column__item">平谷区</li>
           </ul>
         </div>
         <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@@ -75,8 +88,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
-            <li class="van-ellipsis van-picker-column__item">北京市</li>
             <li class="van-ellipsis van-picker-column__item">天津市</li>
             <li class="van-ellipsis van-picker-column__item">河北省</li>
             <li class="van-ellipsis van-picker-column__item">山西省</li>
@@ -114,8 +126,7 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">杭州市</li>
-            <li class="van-ellipsis van-picker-column__item">杭州市</li>
             <li class="van-ellipsis van-picker-column__item">宁波市</li>
             <li class="van-ellipsis van-picker-column__item">温州市</li>
             <li class="van-ellipsis van-picker-column__item">嘉兴市</li>
@@ -130,8 +141,7 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择地区</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">鹿城区</li>
-            <li class="van-ellipsis van-picker-column__item">鹿城区</li>
             <li class="van-ellipsis van-picker-column__item">龙湾区</li>
             <li class="van-ellipsis van-picker-column__item">瓯海区</li>
             <li class="van-ellipsis van-picker-column__item">洞头区</li>
@@ -159,8 +169,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择省份</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
-            <li class="van-ellipsis van-picker-column__item">北京市</li>
             <li class="van-ellipsis van-picker-column__item">天津市</li>
             <li class="van-ellipsis van-picker-column__item">河北省</li>
             <li class="van-ellipsis van-picker-column__item">山西省</li>
@@ -198,7 +207,8 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-picker-column" style="height:220px;">
           <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">选择城市</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+            <li class="van-ellipsis van-picker-column__item">县</li>
           </ul>
         </div>
         <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>

packages/area/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`change option 1`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div class="van-picker__cancel">取消</div>
+    <!---->
+    <div class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">天津市</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
+        <li class="van-ellipsis van-picker-column__item">西城区</li>
+      </ul>
+    </div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;
+
+exports[`change option 2`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div class="van-picker__cancel">取消</div>
+    <!---->
+    <div class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item">北京市</li>
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">和平区</li>
+        <li class="van-ellipsis van-picker-column__item">河东区</li>
+      </ul>
+    </div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;
+
+exports[`change option 3`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div class="van-picker__cancel">取消</div>
+    <!---->
+    <div class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item">北京市</li>
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item">和平区</li>
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">河东区</li>
+      </ul>
+    </div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;
+
+exports[`watch areaList & code 1`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div class="van-picker__cancel">取消</div>
+    <!---->
+    <div class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;
+
+exports[`watch areaList & code 2`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div class="van-picker__cancel">取消</div>
+    <!---->
+    <div class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">天津市</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
+        <li class="van-ellipsis van-picker-column__item">西城区</li>
+      </ul>
+    </div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;
+
+exports[`watch areaList & code 3`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div class="van-picker__cancel">取消</div>
+    <!---->
+    <div class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">天津市</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
+        <li class="van-ellipsis van-picker-column__item">西城区</li>
+      </ul>
+    </div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;
+
+exports[`watch areaList & code 4`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div class="van-picker__cancel">取消</div>
+    <!---->
+    <div class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">天津市</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
+        <li class="van-ellipsis van-picker-column__item">县</li>
+      </ul>
+    </div>
+    <div class="van-picker-column" style="height: 220px;">
+      <ul style="line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
+        <li class="van-ellipsis van-picker-column__item">西城区</li>
+      </ul>
+    </div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;

packages/area/test/index.spec.js

@@ -0,0 +1,68 @@
+import Area from '..';
+import { mount } from '@vue/test-utils';
+import areaList from '../demo/area.simple';
+import { later, triggerDrag } from '../../../test/utils';
+
+const firstOption = [
+  { code: '110000', name: '北京市' },
+  { code: '110100', name: '北京市' },
+  { code: '110101', name: '东城区' }
+];
+
+test('confirm & cancel event', () => {
+  const wrapper = mount(Area, {
+    propsData: {
+      areaList
+    }
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  wrapper.find('.van-picker__cancel').trigger('click');
+
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(firstOption);
+  expect(wrapper.emitted('cancel')[0][0]).toEqual(firstOption);
+});
+
+test('watch areaList & code', async() => {
+  const wrapper = mount(Area);
+  expect(wrapper).toMatchSnapshot();
+  wrapper.setProps({ areaList });
+  expect(wrapper).toMatchSnapshot();
+  wrapper.setProps({ value: '110117' });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+
+  wrapper.setProps({
+    value: '',
+    areaList: null
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('change option', () => {
+  const wrapper = mount(Area, {
+    propsData: {
+      areaList
+    }
+  });
+
+  const columns = wrapper.findAll('.van-picker-column');
+  expect(wrapper).toMatchSnapshot();
+  triggerDrag(columns.at(0), 0, -100);
+  expect(wrapper).toMatchSnapshot();
+  triggerDrag(columns.at(2), 0, -100);
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('getValues method', () => {
+  const wrapper = mount(Area, {
+    propsData: {
+      areaList
+    },
+    created() {
+      expect(this.getValues()).toEqual([]);
+    }
+  });
+  expect(wrapper.vm.getValues()).toEqual(firstOption);
+});

packages/vant-css/src/picker.css

@@ -62,7 +62,7 @@
   &-column {
     flex: 1;
     overflow: hidden;
-    font-size: 17px;
+    font-size: 16px;
     text-align: center;
 
     &__item {