feat: migrate Area component

components.js

@@ -67,4 +67,5 @@ module.exports = [
   'image-preview',
   'index-bar',
   'index-anchor',
+  'area',
 ];

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

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, [
+        onChange={this.onChange}
-          'title',
+        onConfirm={this.onConfirm}
-          'columns-top',
-          'columns-bottom',
-        ])}
-        {...{ on }}
       />
     );
   },

vant.config.js

@@ -331,10 +331,10 @@ module.exports = {
               //   path: 'address-list',
               //   title: 'AddressList 地址列表',
               // },
-              // {
+              {
-              //   path: 'area',
+                path: 'area',
-              //   title: 'Area 省市区选择',
+                title: 'Area 省市区选择',
-              // },
+              },
               // {
               //   path: 'card',
               //   title: 'Card 商品卡片',
@@ -665,10 +665,10 @@ module.exports = {
               //   path: 'address-list',
               //   title: 'AddressList',
               // },
-              // {
+              {
-              //   path: 'area',
+                path: 'area',
-              //   title: 'Area',
+                title: 'Area',
-              // },
+              },
               // {
               //   path: 'card',
               //   title: 'Card',