From 41bd81fd0bc6458c1c2101636fc4f9c4727e4b00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=8B=E8=99=B9=E8=8B=8D?= <songhc_ylz@newhope.cn>
Date: Thu, 4 May 2023 13:58:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20checkbox=20?=
 =?UTF-8?q?=E4=B8=AD=E9=97=B4=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/u-checkbox/u-checkbox.vue         | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue b/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue
index bf8a20f..741d47c 100644
--- a/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue
+++ b/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue
@@ -1,7 +1,8 @@
 <template>
 	<view class="u-checkbox" :style="[checkboxStyle]">
 		<view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
-			<u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" />
+			<u-icon v-if="indeterminate" class="u-checkbox__icon-wrap__icon" name="minus" :size="checkboxIconSize" :color="iconColor" />
+			<u-icon v-else class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" />
 		</view>
 		<view
 			class="u-checkbox__label"
@@ -82,6 +83,11 @@ export default {
 		size: {
 			type: [String, Number],
 			default: ""
+		},
+		// 设置不确定状态，仅负责样式控制
+		indeterminate: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -143,6 +149,7 @@ export default {
 		},
 		// checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
 		iconColor() {
+			if (this.indeterminate) return '#ffffff';
 			return this.valueCom ? "#ffffff" : "transparent";
 		},
 		iconClass() {
@@ -151,6 +158,7 @@ export default {
 			if (this.valueCom == true) classes.push("u-checkbox__icon-wrap--checked");
 			if (this.isDisabled) classes.push("u-checkbox__icon-wrap--disabled");
 			if (this.valueCom && this.isDisabled) classes.push("u-checkbox__icon-wrap--disabled--checked");
+			if (this.indeterminate === true) classes.push('u-checkbox__icon-wrap--indeterminate')
 			// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
 			return classes.join(" ");
 		},
@@ -305,6 +313,12 @@ export default {
 		&--disabled--checked {
 			color: #c8c9cc !important;
 		}
+
+		&--indeterminate {
+			color: #fff;
+			background-color: $u-type-primary;
+			border-color: $u-type-primary;
+		}
 	}
 
 	&__label {
-- 
GitLab