feat: migrate Picker component

components.js

@@ -43,4 +43,5 @@ module.exports = [
   'tab',
   'tabs',
   'sticky',
+  'picker',
 ];

src/picker/PickerColumn.js

@@ -43,6 +43,8 @@ export default createComponent({
     },
   },
 
+  emits: ['change'],
+
   data() {
     return {
       offset: 0,
@@ -266,28 +268,22 @@ export default createComponent({
 
         const data = {
           style: optionStyle,
-          attrs: {
+          role: 'button',
-            role: 'button',
+          tabindex: disabled ? -1 : 0,
-            tabindex: disabled ? -1 : 0,
-          },
           class: [
             bem('item', {
               disabled,
               selected: index === this.currentIndex,
             }),
           ],
-          on: {
+          onClick: () => {
-            click: () => {
+            this.onClickItem(index);
-              this.onClickItem(index);
-            },
           },
         };
 
         const childData = {
           class: 'van-ellipsis',
-          domProps: {
+          [this.allowHtml ? 'innerHTML' : 'textContent']: text,
-            [this.allowHtml ? 'innerHTML' : 'textContent']: text,
-          },
         };
 
         return (

src/picker/demo/index.vue

@@ -62,14 +62,14 @@
 
     <demo-block card v-if="!isWeapp" :title="t('withPopup')">
       <van-field
+        v-model="fieldValue"
         readonly
         clickable
         :label="t('city')"
-        :value="fieldValue"
         :placeholder="t('chooseCity')"
         @click="onClickField"
       />
-      <van-popup v-model="showPicker" round position="bottom">
+      <van-popup v-model:show="showPicker" round position="bottom">
         <van-picker
           show-toolbar
           :title="t('title')"

src/picker/index.js

@@ -32,6 +32,8 @@ export default createComponent({
     },
   },
 
+  emits: ['confirm', 'cancel', 'change'],
+
   data() {
     return {
       children: [],
@@ -62,7 +64,9 @@ export default createComponent({
 
   watch: {
     columns: {
-      handler: 'format',
+      handler() {
+        this.format();
+      },
       immediate: true,
     },
   },
@@ -261,10 +265,8 @@ export default createComponent({
     },
 
     genTitle() {
-      const titleSlot = this.slots('title');
+      if (this.$slots.title) {
-
+        return this.$slots.title();
-      if (titleSlot) {
-        return titleSlot;
       }
 
       if (this.title) {
@@ -276,19 +278,25 @@ export default createComponent({
       if (this.showToolbar) {
         return (
           <div class={bem('toolbar')}>
-            {this.slots() || [
+            {this.$slots.default
-              <button type="button" class={bem('cancel')} onClick={this.cancel}>
+              ? this.$slots.default()
-                {this.cancelButtonText || t('cancel')}
+              : [
-              </button>,
+                  <button
-              this.genTitle(),
+                    type="button"
-              <button
+                    class={bem('cancel')}
-                type="button"
+                    onClick={this.cancel}
-                class={bem('confirm')}
+                  >
-                onClick={this.confirm}
+                    {this.cancelButtonText || t('cancel')}
-              >
+                  </button>,
-                {this.confirmButtonText || t('confirm')}
+                  this.genTitle(),
-              </button>,
+                  <button
-            ]}
+                    type="button"
+                    class={bem('confirm')}
+                    onClick={this.confirm}
+                  >
+                    {this.confirmButtonText || t('confirm')}
+                  </button>,
+                ]}
           </div>
         );
       }
@@ -339,15 +347,15 @@ export default createComponent({
     },
   },
 
-  render(h) {
+  render() {
     return (
       <div class={bem()}>
-        {this.toolbarPosition === 'top' ? this.genToolbar() : h()}
+        {this.toolbarPosition === 'top' ? this.genToolbar() : null}
-        {this.loading ? <Loading class={bem('loading')} /> : h()}
+        {this.loading ? <Loading class={bem('loading')} /> : null}
-        {this.slots('columns-top')}
+        {this.$slots['columns-top']?.()}
         {this.genColumns()}
-        {this.slots('columns-bottom')}
+        {this.$slots['columns-bottom']?.()}
-        {this.toolbarPosition === 'bottom' ? this.genToolbar() : h()}
+        {this.toolbarPosition === 'bottom' ? this.genToolbar() : null}
       </div>
     );
   },

vant.config.js

@@ -143,10 +143,10 @@ module.exports = {
               //   path: 'password-input',
               //   title: 'PasswordInput 密码输入框',
               // },
-              // {
+              {
-              //   path: 'picker',
+                path: 'picker',
-              //   title: 'Picker 选择器',
+                title: 'Picker 选择器',
-              // },
+              },
               // {
               //   path: 'radio',
               //   title: 'Radio 单选框',
@@ -477,10 +477,10 @@ module.exports = {
               //   path: 'password-input',
               //   title: 'PasswordInput',
               // },
-              // {
+              {
-              //   path: 'picker',
+                path: 'picker',
-              //   title: 'Picker',
+                title: 'Picker',
-              // },
+              },
               // {
               //   path: 'radio',
               //   title: 'Radio',