feat: migrate NumberKeyboard component

components.js

@@ -52,4 +52,5 @@ module.exports = [
   'radio',
   'radio-group',
   'datetime-picker',
+  'number-keyboard',
 ];

src/number-keyboard/Key.js

@@ -18,6 +18,8 @@ export default createComponent({
     loading: Boolean,
   },
 
+  emits: ['press'],
+
   data() {
     return {
       active: false,
@@ -57,7 +59,7 @@ export default createComponent({
     genContent() {
       const isExtra = this.type === 'extra';
       const isDelete = this.type === 'delete';
-      const text = this.slots('default') || this.text;
+      const text = this.$slots.default ? this.$slots.default() : this.text;
 
       if (this.loading) {
         return <Loading class={bem('loading-icon')} />;

src/number-keyboard/README.md

@@ -14,7 +14,7 @@ Vue.use(NumberKeyboard);
 ### Default Keyboard
 
 ```html
-<van-cell @touchstart.native.stop="show = true">
+<van-cell @touchstart.stop="show = true">
   Show Keyboard
 </van-cell>
 <van-number-keyboard
@@ -64,7 +64,7 @@ export default {
 Use `extra-key` prop to set the content of bottom left button
 
 ```html
-<van-cell plain type="primary" @touchstart.native.stop="show = true">
+<van-cell plain type="primary" @touchstart.stop="show = true">
   Show IdNumber Keyboard
 </van-cell>
 
@@ -83,7 +83,7 @@ Use `extra-key` prop to set the content of bottom left button
 Use `title` prop to set keyboard title
 
 ```html
-<van-cell plain type="info" @touchstart.native.stop="show = true">
+<van-cell plain type="info" @touchstart.stop="show = true">
   Show Keyboard With Title
 </van-cell>
 <van-number-keyboard
@@ -100,7 +100,7 @@ Use `title` prop to set keyboard title
 ### Multiple ExtraKey
 
 ```html
-<van-cell plain type="primary" @touchstart.native.stop="show = true">
+<van-cell plain type="primary" @touchstart.stop="show = true">
   Show Keyboard With Multiple ExtraKey
 </van-cell>
 <van-number-keyboard
@@ -116,12 +116,7 @@ Use `title` prop to set keyboard title
 ### Bind Value
 
 ```html
-<van-field
-  readonly
-  clickable
-  :value="value"
-  @touchstart.native.stop="show = true"
-/>
+<van-field readonly clickable :value="value" @touchstart.stop="show = true" />
 <van-number-keyboard
   v-model="value"
   :show="show"

src/number-keyboard/README.zh-CN.md

@@ -20,7 +20,7 @@ Vue.use(NumberKeyboard);
 数字键盘提供了 `input`、`delete`、`blur` 事件，分别对应输入内容、删除内容和失去焦点的动作
 
 ```html
-<van-cell @touchstart.native.stop="show = true">
+<van-cell @touchstart.stop="show = true">
   弹出默认键盘
 </van-cell>
 <van-number-keyboard
@@ -74,7 +74,7 @@ export default {
 通过 `extra-key` 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 `extra-key` 设置为 `X`
 
 ```html
-<van-cell plain type="primary" @touchstart.native.stop="show = true">
+<van-cell plain type="primary" @touchstart.stop="show = true">
   弹出身份证号键盘
 </van-cell>
 <van-number-keyboard
@@ -92,7 +92,7 @@ export default {
 通过 `title` 属性可以设置键盘标题
 
 ```html
-<van-cell plain type="info" @touchstart.native.stop="show = true">
+<van-cell plain type="info" @touchstart.stop="show = true">
   弹出带标题的键盘
 </van-cell>
 <van-number-keyboard
@@ -111,7 +111,7 @@ export default {
 当 theme 为 `custom` 时，支持以数组的形式配置两个 `extra-key`
 
 ```html
-<van-cell plain type="primary" @touchstart.native.stop="show = true">
+<van-cell plain type="primary" @touchstart.stop="show = true">
   弹出配置多个按键的键盘
 </van-cell>
 <van-number-keyboard
@@ -129,12 +129,7 @@ export default {
 可以通过 `v-model` 绑定键盘当前输入值
 
 ```html
-<van-field
-  readonly
-  clickable
-  :value="value"
-  @touchstart.native.stop="show = true"
-/>
+<van-field readonly clickable :value="value" @touchstart.stop="show = true" />
 <van-number-keyboard
   v-model="value"
   :show="show"

src/number-keyboard/demo/index.vue

@@ -1,27 +1,27 @@
 <template>
   <demo-section>
-    <van-cell is-link @touchstart.native.stop="keyboard = 'default'">
+    <van-cell is-link @touchstart.stop="keyboard = 'default'">
       {{ t('button1') }}
     </van-cell>
-    <van-cell is-link @touchstart.native.stop="keyboard = 'custom'">
+    <van-cell is-link @touchstart.stop="keyboard = 'custom'">
       {{ t('button2') }}
     </van-cell>
-    <van-cell is-link @touchstart.native.stop="keyboard = 'extraKey'">
+    <van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
       {{ t('button3') }}
     </van-cell>
-    <van-cell is-link @touchstart.native.stop="keyboard = 'title'">
+    <van-cell is-link @touchstart.stop="keyboard = 'title'">
       {{ t('button4') }}
     </van-cell>
-    <van-cell is-link @touchstart.native.stop="keyboard = 'multiExtraKey'">
+    <van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
       {{ t('button5') }}
     </van-cell>
     <van-field
       readonly
       clickable
-      :value="value"
       :label="t('bindValue')"
+      :model-value="value"
       :placeholder="t('clickToInput')"
-      @touchstart.native.stop="keyboard = 'bindValue'"
+      @touchstart.stop="keyboard = 'bindValue'"
     />
 
     <van-number-keyboard

src/number-keyboard/index.js

@@ -1,3 +1,4 @@
+import { Transition } from 'vue';
 import { createNamespace } from '../utils';
 import { stopPropagation } from '../utils/dom/event';
 import { PortalMixin } from '../mixins/portal';
@@ -16,10 +17,6 @@ export default createComponent({
     }),
   ],
 
-  model: {
-    event: 'update:value',
-  },
-
   props: {
     show: Boolean,
     title: String,
@@ -31,7 +28,7 @@ export default createComponent({
       type: String,
       default: 'default',
     },
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -61,6 +58,16 @@ export default createComponent({
     },
   },
 
+  emits: [
+    'show',
+    'hide',
+    'blur',
+    'input',
+    'close',
+    'delete',
+    'update:modelValue',
+  ],
+
   watch: {
     show(val) {
       if (!this.transition) {
@@ -141,22 +148,22 @@ export default createComponent({
         return;
       }
 
-      const { value } = this;
+      const value = this.modelValue;
 
       if (type === 'delete') {
         this.$emit('delete');
-        this.$emit('update:value', value.slice(0, value.length - 1));
+        this.$emit('update:modelValue', value.slice(0, value.length - 1));
       } else if (type === 'close') {
         this.onClose();
       } else if (value.length < this.maxlength) {
         this.$emit('input', text);
-        this.$emit('update:value', value + text);
+        this.$emit('update:modelValue', value + text);
       }
     },
 
     genTitle() {
       const { title, theme, closeButtonText } = this;
-      const titleLeft = this.slots('title-left');
+      const titleLeft = this.$slots['title-left'];
       const showClose = closeButtonText && theme === 'default';
       const showTitle = title || showClose || titleLeft;
 
@@ -178,19 +185,28 @@ export default createComponent({
     },
 
     genKeys() {
-      return this.keys.map((key) => (
-        <Key
-          key={key.text}
-          text={key.text}
-          type={key.type}
-          wider={key.wider}
-          color={key.color}
-          onPress={this.onPress}
-        >
-          {key.type === 'delete' && this.slots('delete')}
-          {key.type === 'extra' && this.slots('extra-key')}
-        </Key>
-      ));
+      return this.keys.map((key) => {
+        const slots = {};
+
+        if (key.type === 'delete') {
+          slots.default = this.$slots.delete;
+        }
+        if (key.type === 'extra') {
+          slots.default = this.$slots['extra-key'];
+        }
+
+        return (
+          <Key
+            v-slots={slots}
+            key={key.text}
+            text={key.text}
+            type={key.type}
+            wider={key.wider}
+            color={key.color}
+            onPress={this.onPress}
+          />
+        );
+      });
     },
 
     genSidebar() {
@@ -199,13 +215,12 @@ export default createComponent({
           <div class={bem('sidebar')}>
             {this.showDeleteKey && (
               <Key
+                v-slots={{ delete: this.$slots.delete }}
                 large
                 text={this.deleteButtonText}
                 type="delete"
                 onPress={this.onPress}
-              >
-                {this.slots('delete')}
-              </Key>
+              />
             )}
             <Key
               large
@@ -225,7 +240,7 @@ export default createComponent({
     const Title = this.genTitle();
 
     return (
-      <transition name={this.transition ? 'van-slide-up' : ''}>
+      <Transition name={this.transition ? 'van-slide-up' : ''}>
         <div
           vShow={this.show}
           style={{ zIndex: this.zIndex }}
@@ -240,7 +255,7 @@ export default createComponent({
             {this.genSidebar()}
           </div>
         </div>
-      </transition>
+      </Transition>
     );
   },
 });

vant.config.js

@@ -135,10 +135,10 @@ module.exports = {
               //   path: 'form',
               //   title: 'Form 表单',
               // },
-              // {
-              //   path: 'number-keyboard',
-              //   title: 'NumberKeyboard 数字键盘',
-              // },
+              {
+                path: 'number-keyboard',
+                title: 'NumberKeyboard 数字键盘',
+              },
               // {
               //   path: 'password-input',
               //   title: 'PasswordInput 密码输入框',
@@ -469,10 +469,10 @@ module.exports = {
               //   path: 'form',
               //   title: 'Form',
               // },
-              // {
-              //   path: 'number-keyboard',
-              //   title: 'NumberKeyboard',
-              // },
+              {
+                path: 'number-keyboard',
+                title: 'NumberKeyboard',
+              },
               // {
               //   path: 'password-input',
               //   title: 'PasswordInput',