[Improvement] Area: add reset method (#1427)

packages/area/demo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-area :area-list="$t('areaList')" />
+      <van-area ref="area" :area-list="$t('areaList')" />
     </demo-block>
 
     <demo-block :title="$t('title2')">
@@ -33,6 +33,9 @@ export default {
   },
 
   data() {
+    setTimeout(() => {
+      this.$refs.area.reset();
+    }, 3000);
     return {
       value: '330302'
     };

packages/area/en-US.md

@@ -57,6 +57,14 @@ Set `columns-num` with 2, you'll have a 2 level picker.
 | cancel | triggers when clicking the cancel button | - |
 | change | Triggered when current option changed | Picker instance, current values，column index |
 
+### Methods
+
+Use ref to get area instance and call instance methods
+
+| Name | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| reset | - | - | Reset all options |
+
 ### Data Structure
 
 #### areaList

packages/area/index.vue

@@ -154,6 +154,11 @@ export default create({
 
     getValues() {
       return this.$refs.picker ? this.$refs.picker.getValues() : [];
+    },
+
+    reset() {
+      this.code = '';
+      this.setValues();
     }
   }
 });

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

@@ -87,6 +87,69 @@ exports[`change option 3`] = `
 </div>
 `;
 
+exports[`reset method 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">北京市</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">天津市</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>
+      </ul>
+    </div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;
+
+exports[`reset method 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 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">

packages/area/test/index.spec.js

@@ -64,8 +64,25 @@ test('getValues method', () => {
   const wrapper = mount(Area, {
     propsData: {
       areaList
+    },
+    created() {
+      expect(this.getValues()).toEqual([]);
     }
   });
 
   expect(wrapper.vm.getValues()).toEqual(firstOption);
 });
+
+test('reset method', async() => {
+  const wrapper = mount(Area, {
+    propsData: {
+      areaList,
+      value: '120225'
+    }
+  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+  wrapper.vm.reset();
+  expect(wrapper).toMatchSnapshot();
+});

packages/area/zh-CN.md

@@ -55,6 +55,14 @@ Vue.use(Area);
 | cancel | 点击取消按钮时 | - |
 | change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
 
+### 方法
+
+通过 ref 可以获取到 area 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| reset | - | - | 重置所有选项到第一项 |
+
 ### 数据格式
 
 #### 省市县列表数据格式