diff --git a/components.js b/components.js index d601c0a41..82dcf8712 100644 --- a/components.js +++ b/components.js @@ -47,4 +47,6 @@ module.exports = [ 'dialog', 'toast', 'calendar', + 'checkbox', + 'checkbox-group', ]; diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js index 2bd6cac3e..fd77c0ed9 100644 --- a/src/checkbox-group/index.js +++ b/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
{this.slots()}
; + return
{this.$slots.default?.()}
; }, }); diff --git a/src/checkbox/index.js b/src/checkbox/index.js index 507f6f9c9..4ad225a3a 100644 --- a/src/checkbox/index.js +++ b/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); } } }, diff --git a/src/mixins/checkbox.js b/src/mixins/checkbox.js index 5fc341d67..548a10e93 100644 --- a/src/mixins/checkbox.js +++ b/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 }) + ) : ( )} @@ -101,9 +103,7 @@ export const CheckboxMixin = ({ parent, bem, role }) => ({ }, genLabel() { - const slot = this.slots(); - - if (slot) { + if (this.$slots.default) { return ( ({ { disabled: this.isDisabled }, ])} > - {slot} + {this.$slots.default()} ); } diff --git a/vant.config.js b/vant.config.js index ac3fe0f12..d59c41e2d 100644 --- a/vant.config.js +++ b/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',