From cf3b797b2091f4531d1a08df0abe70105717702b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Mon, 3 Jun 2019 11:06:27 +0800
Subject: [PATCH] [bugfix] Area: should support set columns-num dynamically

---
 packages/area/index.js                        |  6 +++++
 .../test/__snapshots__/index.spec.js.snap     | 26 +++++++++++++++++++
 packages/area/test/index.spec.js              | 16 ++++++++++++
 3 files changed, 48 insertions(+)

diff --git a/packages/area/index.js b/packages/area/index.js
index 7d17b8e61..e10fdee84 100644
--- a/packages/area/index.js
+++ b/packages/area/index.js
@@ -54,6 +54,12 @@ export default sfc({
       handler() {
         this.setValues();
       }
+    },
+
+    columnsNum() {
+      this.$nextTick(() => {
+        this.setValues();
+      });
     }
   },
 
diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap
index 5021bcc1f..b8f9bef35 100644
--- a/packages/area/test/__snapshots__/index.spec.js.snap
+++ b/packages/area/test/__snapshots__/index.spec.js.snap
@@ -96,6 +96,32 @@ exports[`change option 3`] = `
 </div>
 `;
 
+exports[`columns-num prop 1`] = `
+<div class="van-picker van-area">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
+    <div role="button" tabindex="0" class="van-picker__confirm">确认</div>
+  </div>
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <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 class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
+      </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 class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
+        <li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;
+
 exports[`reset method 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 229fddbeb..7df588f3a 100644
--- a/packages/area/test/index.spec.js
+++ b/packages/area/test/index.spec.js
@@ -106,3 +106,19 @@ test('reset method', async () => {
   wrapper.vm.reset();
   expect(wrapper).toMatchSnapshot();
 });
+
+test('columns-num prop', async () => {
+  const wrapper = mount(Area, {
+    propsData: {
+      areaList,
+      columnsNum: 3
+    }
+  });
+
+  wrapper.setProps({
+    columnsNum: 2
+  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});