From 789a2fda1efd08cbc0bcfaecb0740c0602c81f9b Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 17 Aug 2020 11:31:19 +0800
Subject: [PATCH] feat: migrate Area component

---
 components.js                       |  1 +
 docs/markdown/changelog-v3.zh-CN.md |  1 +
 src/area/index.js                   | 43 ++++++++++-------------------
 vant.config.js                      | 16 +++++------
 4 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/components.js b/components.js
index e66df7719..5d91abde8 100644
--- a/components.js
+++ b/components.js
@@ -67,4 +67,5 @@ module.exports = [
   'image-preview',
   'index-bar',
   'index-anchor',
+  'area',
 ];
diff --git a/docs/markdown/changelog-v3.zh-CN.md b/docs/markdown/changelog-v3.zh-CN.md
index 7dae327d8..3ff963924 100644
--- a/docs/markdown/changelog-v3.zh-CN.md
+++ b/docs/markdown/changelog-v3.zh-CN.md
@@ -29,6 +29,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - ActionSheet
 - Calendar
 - Dialog
+- ImagePreview
 - Notify
 - Popup
 - ShareSheet
diff --git a/src/area/index.js b/src/area/index.js
index 293cf549c..214aec1d6 100644
--- a/src/area/index.js
+++ b/src/area/index.js
@@ -10,21 +10,6 @@ function isOverseaCode(code) {
   return code[0] === '9';
 }
 
-function pickSlots(instance, keys) {
-  const { $slots, $scopedSlots } = instance;
-  const scopedSlots = {};
-
-  keys.forEach((key) => {
-    if ($scopedSlots[key]) {
-      scopedSlots[key] = $scopedSlots[key];
-    } else if ($slots[key]) {
-      scopedSlots[key] = () => $slots[key];
-    }
-  });
-
-  return scopedSlots;
-}
-
 export default createComponent({
   props: {
     ...pickerProps,
@@ -47,6 +32,8 @@ export default createComponent({
     },
   },
 
+  emits: ['change', 'confirm'],
+
   data() {
     return {
       code: this.value,
@@ -78,6 +65,13 @@ export default createComponent({
         county: this.columnsPlaceholder[2] || '',
       };
     },
+
+    pickerSlots() {
+      return ['title', 'columns-top', 'columns-bottom'].reduce((slots, key) => {
+        slots[key] = this.$slots[key];
+        return slots;
+      }, {});
+    },
   },
 
   watch: {
@@ -88,7 +82,9 @@ export default createComponent({
 
     areaList: {
       deep: true,
-      handler: 'setValues',
+      handler() {
+        this.setValues();
+      },
     },
 
     columnsNum() {
@@ -297,14 +293,9 @@ export default createComponent({
   },
 
   render() {
-    const on = {
-      ...this.$listeners,
-      change: this.onChange,
-      confirm: this.onConfirm,
-    };
-
     return (
       <Picker
+        v-slots={this.pickerSlots}
         ref="picker"
         class={bem()}
         showToolbar
@@ -317,12 +308,8 @@ export default createComponent({
         visibleItemCount={this.visibleItemCount}
         cancelButtonText={this.cancelButtonText}
         confirmButtonText={this.confirmButtonText}
-        scopedSlots={pickSlots(this, [
-          'title',
-          'columns-top',
-          'columns-bottom',
-        ])}
-        {...{ on }}
+        onChange={this.onChange}
+        onConfirm={this.onConfirm}
       />
     );
   },
diff --git a/vant.config.js b/vant.config.js
index a42ec552e..ea4b609f8 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -331,10 +331,10 @@ module.exports = {
               //   path: 'address-list',
               //   title: 'AddressList 地址列表',
               // },
-              // {
-              //   path: 'area',
-              //   title: 'Area 省市区选择',
-              // },
+              {
+                path: 'area',
+                title: 'Area 省市区选择',
+              },
               // {
               //   path: 'card',
               //   title: 'Card 商品卡片',
@@ -665,10 +665,10 @@ module.exports = {
               //   path: 'address-list',
               //   title: 'AddressList',
               // },
-              // {
-              //   path: 'area',
-              //   title: 'Area',
-              // },
+              {
+                path: 'area',
+                title: 'Area',
+              },
               // {
               //   path: 'card',
               //   title: 'Card',