From 0718339c8161164ccbcf18db73e8064be7bd953d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 6 Jul 2018 20:04:38 +0800
Subject: [PATCH] [Improvement] Area: add reset method (#1427)

---
 packages/area/demo/index.vue                  |  5 +-
 packages/area/en-US.md                        |  8 +++
 packages/area/index.vue                       |  5 ++
 .../test/__snapshots__/index.spec.js.snap     | 63 +++++++++++++++++++
 packages/area/test/index.spec.js              | 17 +++++
 packages/area/zh-CN.md                        |  8 +++
 6 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/packages/area/demo/index.vue b/packages/area/demo/index.vue
index 688805cb3..9b8384518 100644
--- a/packages/area/demo/index.vue
+++ b/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'
     };
diff --git a/packages/area/en-US.md b/packages/area/en-US.md
index d29a8c622..7b7e36bdf 100644
--- a/packages/area/en-US.md
+++ b/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
diff --git a/packages/area/index.vue b/packages/area/index.vue
index 2bd678316..2470dff3d 100644
--- a/packages/area/index.vue
+++ b/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();
     }
   }
 });
diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap
index 456e09786..8e29480f7 100644
--- a/packages/area/test/__snapshots__/index.spec.js.snap
+++ b/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">
diff --git a/packages/area/test/index.spec.js b/packages/area/test/index.spec.js
index d74113df0..fc613f3ce 100644
--- a/packages/area/test/index.spec.js
+++ b/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();
+});
diff --git a/packages/area/zh-CN.md b/packages/area/zh-CN.md
index 351217398..0dcd348f0 100644
--- a/packages/area/zh-CN.md
+++ b/packages/area/zh-CN.md
@@ -55,6 +55,14 @@ Vue.use(Area);
 | cancel | 点击取消按钮时 | - |
 | change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
 
+### 方法
+
+通过 ref 可以获取到 area 实例并调用实例方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|-----------|-----------|-----------|-------------|
+| reset | - | - | 重置所有选项到第一项 |
+
 ### 数据格式
 
 #### 省市县列表数据格式