checkbox支持独立使用

ijry · Apr 10, 2024 · de52dc4 · de52dc4
1 parent 17560bb
commit de52dc4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/src/pages/componentsA/checkbox/checkbox.nvue b/src/pages/componentsA/checkbox/checkbox.nvue
@@ -21,7 +21,7 @@
 					</up-checkbox-group>
 				</view>
 			</view>
-		</view>
+		</view>		<view class="u-demo-block">			<text class="u-demo-block__title">单独使用checkbox</text>			<text class="u-block__title">是否同意用户协议？</text>			<view class="u-demo-block__content">				<view class="u-page__checkbox-item">					<up-checkbox						:customStyle="{marginBottom: '8px'}"						label="同意用户协议与隐私条款"						name="agree"						:checked="aloneChecked"					>					</up-checkbox>					<up-button type="primary" size="small" style="width: 120px;"						@click="changeAloneChecked">切换</up-button>				</view>			</view>		</view>
 		<view class="u-demo-block">
 			<text class="u-demo-block__title">自定义形状</text>
 			<text class="u-block__title">中国四大名著是？</text>
@@ -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;			}
 		}
 	}
 </script>

diff --git 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
@@ -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:{