feat: migrate Checkbox/CheckboxGroup

components.js

@@ -47,4 +47,6 @@ module.exports = [
   'dialog',
   'toast',
   'calendar',
+  'checkbox',
+  'checkbox-group',
 ];

src/checkbox-group/index.js

@@ -13,14 +13,16 @@ export default createComponent({
     direction: String,
     iconSize: [Number, String],
     checkedColor: String,
-    value: {
+    modelValue: {
       type: Array,
       default: () => [],
     },
   },
 
+  emits: ['change', 'update:modelValue'],
+
   watch: {
-    value(val) {
+    modelValue(val) {
       this.$emit('change', val);
     },
   },
@@ -29,7 +31,7 @@ export default createComponent({
     // @exposed-api
     toggleAll(checked) {
       if (checked === false) {
-        this.$emit('input', []);
+        this.$emit('update:modelValue', []);
         return;
       }
 
@@ -39,11 +41,11 @@ export default createComponent({
       }
 
       const names = children.map((item) => item.name);
-      this.$emit('input', names);
+      this.$emit('update:modelValue', names);
     },
   },
 
   render() {
-    return <div class={bem([this.direction])}>{this.slots()}</div>;
+    return <div class={bem([this.direction])}>{this.$slots.default?.()}</div>;
   },
 });

src/checkbox/index.js

@@ -12,27 +12,29 @@ export default createComponent({
     }),
   ],
 
+  emits: ['click', 'change', 'update:modelValue'],
+
   computed: {
     checked: {
       get() {
         if (this.parent) {
-          return this.parent.value.indexOf(this.name) !== -1;
+          return this.parent.modelValue.indexOf(this.name) !== -1;
         }
-        return this.value;
+        return this.modelValue;
       },
 
       set(val) {
         if (this.parent) {
           this.setParentValue(val);
         } else {
-          this.$emit('input', val);
+          this.$emit('update:modelValue', val);
         }
       },
     },
   },
 
   watch: {
-    value(val) {
+    modelValue(val) {
       this.$emit('change', val);
     },
   },
@@ -51,7 +53,7 @@ export default createComponent({
 
     setParentValue(val) {
       const { parent } = this;
-      const value = parent.value.slice();
+      const value = parent.modelValue.slice();
 
       if (val) {
         if (parent.max && value.length >= parent.max) {
@@ -61,7 +63,7 @@ export default createComponent({
         /* istanbul ignore else */
         if (value.indexOf(this.name) === -1) {
           value.push(this.name);
-          parent.$emit('input', value);
+          parent.$emit('update:modelValue', value);
         }
       } else {
         const index = value.indexOf(this.name);
@@ -69,7 +71,7 @@ export default createComponent({
         /* istanbul ignore else */
         if (index !== -1) {
           value.splice(index, 1);
-          parent.$emit('input', value);
+          parent.$emit('update:modelValue', value);
         }
       }
     },

src/mixins/checkbox.js

@@ -11,9 +11,9 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
 
   props: {
     name: null,
-    value: null,
     disabled: Boolean,
     iconSize: [Number, String],
+    modelValue: null,
     checkedColor: String,
     labelPosition: String,
     labelDisabled: Boolean,
@@ -93,7 +93,9 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
           ])}
           style={{ fontSize: addUnit(iconSize) }}
         >
-          {this.slots('icon', { checked }) || (
+          {this.$slots.icon ? (
+            this.$slots.icon({ checked })
+          ) : (
             <Icon name="success" style={this.iconStyle} />
           )}
         </div>
@@ -101,9 +103,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
     },
 
     genLabel() {
-      const slot = this.slots();
-
-      if (slot) {
+      if (this.$slots.default) {
         return (
           <span
             class={bem('label', [
@@ -111,7 +111,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({
               { disabled: this.isDisabled },
             ])}
           >
-            {slot}
+            {this.$slots.default()}
           </span>
         );
       }

vant.config.js

@@ -119,10 +119,10 @@ module.exports = {
                 path: 'calendar',
                 title: 'Calendar 日历',
               },
-              // {
-              //   path: 'checkbox',
-              //   title: 'Checkbox 复选框',
-              // },
+              {
+                path: 'checkbox',
+                title: 'Checkbox 复选框',
+              },
               // {
               //   path: 'datetime-picker',
               //   title: 'DatetimePicker 时间选择',
@@ -453,10 +453,10 @@ module.exports = {
                 path: 'calendar',
                 title: 'Calendar',
               },
-              // {
-              //   path: 'checkbox',
-              //   title: 'Checkbox',
-              // },
+              {
+                path: 'checkbox',
+                title: 'Checkbox',
+              },
               // {
               //   path: 'datetime-picker',
               //   title: 'DatetimePicker',