diff --git a/src/pages/componentsA/checkbox/checkbox.nvue b/src/pages/componentsA/checkbox/checkbox.nvue index 29c1cfd71..f8c65b1b5 100644 --- a/src/pages/componentsA/checkbox/checkbox.nvue +++ b/src/pages/componentsA/checkbox/checkbox.nvue @@ -21,7 +21,7 @@ - + 单独使用checkbox 是否同意用户协议? 切换 自定义形状 中国四大名著是? @@ -179,7 +179,7 @@ name: '橙子', disabled: false } - ], + ], aloneChecked: false, // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name,就会被默认选中 checkboxValue1: ['苹果', '橙子'], @@ -319,7 +319,7 @@ methods: { checkboxChange(n) { // console.log('change', n); - } + }, changeAloneChecked() { this.aloneChecked = !this.aloneChecked; } } } diff --git a/src/uni_modules/uview-plus/components/u-checkbox/props.js b/src/uni_modules/uview-plus/components/u-checkbox/props.js index 67ff6d4cf..6c0892293 100644 --- a/src/uni_modules/uview-plus/components/u-checkbox/props.js +++ b/src/uni_modules/uview-plus/components/u-checkbox/props.js @@ -64,6 +64,11 @@ export default { labelDisabled: { type: [String, Boolean], default: () => uni.$u.props.checkbox.labelDisabled + }, + // 是否独立使用 + usedAlone: { + type: [Boolean], + default: () => false } } } diff --git a/src/uni_modules/uview-plus/components/u-checkbox/u-checkbox.vue b/src/uni_modules/uview-plus/components/u-checkbox/u-checkbox.vue index ea1b92416..e00b849e1 100644 --- a/src/uni_modules/uview-plus/components/u-checkbox/u-checkbox.vue +++ b/src/uni_modules/uview-plus/components/u-checkbox/u-checkbox.vue @@ -161,19 +161,23 @@ style.width = uni.$u.addUnit(this.elSize) style.height = uni.$u.addUnit(this.elSize) // 如果是图标在右边的话,移除它的右边距 - if (this.parentData.iconPlacement === 'right') { - style.marginRight = 0 + if (!this.usedAlone) { + if (this.parentData.iconPlacement === 'right') { + style.marginRight = 0 + } } return style }, checkboxStyle() { const style = {} - if (this.parentData.borderBottom && this.parentData.placement === 'row') { - uni.$u.error('检测到您将borderBottom设置为true,需要同时将u-checkbox-group的placement设置为column才有效') - } - // 当父组件设置了显示下边框并且排列形式为纵向时,给内容和边框之间加上一定间隔 - if (this.parentData.borderBottom && this.parentData.placement === 'column') { - style.paddingBottom = '8px' + if (!this.usedAlone) { + if (this.parentData.borderBottom && this.parentData.placement === 'row') { + uni.$u.error('检测到您将borderBottom设置为true,需要同时将u-checkbox-group的placement设置为column才有效') + } + // 当父组件设置了显示下边框并且排列形式为纵向时,给内容和边框之间加上一定间隔 + if (this.parentData.borderBottom && this.parentData.placement === 'column') { + style.paddingBottom = '8px' + } } return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)) } @@ -184,10 +188,12 @@ emits: ["change"], methods: { init() { - // 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环引用 - this.updateParentData() - if (!this.parent) { - uni.$u.error('u-checkbox必须搭配u-checkbox-group组件使用') + if (!this.usedAlone) { + // 支付宝小程序不支持provide/inject,所以使用这个方法获取整个父组件,在created定义,避免循环引用 + this.updateParentData() + if (!this.parent) { + uni.$u.error('u-checkbox必须搭配u-checkbox-group组件使用') + } } // #ifdef VUE2 const value = this.parentData.value @@ -198,7 +204,7 @@ // 设置初始化时,是否默认选中的状态,父组件u-checkbox-group的value可能是array,所以额外判断 if (this.checked) { this.isChecked = true - } else if (uni.$u.test.array(value)) { + } else if (!this.usedAlone && uni.$u.test.array(value)) { // 查找数组是是否存在this.name元素值 this.isChecked = value.some(item => { return item === this.name @@ -210,7 +216,11 @@ }, // 横向两端排列时,点击组件即可触发选中事件 wrapperClickHandler(e) { - this.parentData.iconPlacement === 'right' && this.iconClickHandler(e) + if (!this.usedAlone) { + this.parentData.iconPlacement === 'right' && this.iconClickHandler(e) + } else { + this.iconClickHandler(e) + } }, // 点击图标 iconClickHandler(e) { @@ -242,7 +252,9 @@ // 将本组件标记为与原来相反的状态 this.isChecked = !this.isChecked this.emitEvent() - typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this) + if (!this.usedAlone) { + typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this) + } } }, watch:{