Checkbox 多选框

一组备选项中进行多选。

基础用法

可以使用 label 或者 <slot/> 两种方式定义其中内容。

查看代码

可以多个单选框绑定一个值，或者单个绑定。

<template>
	<demo-container>
		<!-- 多个绑定 -->
		<gov-checkbox v-model="group" :value="1" label="选项1" />
		<gov-checkbox v-model="group" :value="2">选项2</gov-checkbox>
		<!-- 单个绑定 -->
		<gov-checkbox v-model="value" label="选项3" />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const group = ref([1, 2]);
const value = ref(true);
</script>

边框模式

设置 border 后可设置 size 显示不同尺寸。

查看代码

<template>
	<demo-container>
		<gov-checkbox v-model="value1" border size="large"> 选项 </gov-checkbox>
		<gov-checkbox v-model="value2" border> 选项 </gov-checkbox>
		<gov-checkbox v-model="value3" border size="small"> 选项 </gov-checkbox>
		<br /><br />
		<gov-checkbox-group border size="large" v-model="group">
			<gov-checkbox label="选项1" :value="1" />
			<gov-checkbox label="选项2" :value="2" />
			<gov-checkbox label="选项3" :value="3" />
		</gov-checkbox-group>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value1 = ref(false);
const value2 = ref(false);
const value3 = ref(false);
const group = ref([1, 2]);
</script>

禁用状态

设置禁用状态。

查看代码

<template>
	<demo-container>
		<gov-checkbox v-model="value1" disabled>选项1</gov-checkbox>
		<gov-checkbox v-model="value2" disabled>选项2</gov-checkbox>
		<gov-checkbox indeterminate disabled>选项3</gov-checkbox>
		<br /><br />
		<gov-checkbox v-model="value1" disabled border>选项1</gov-checkbox>
		<gov-checkbox v-model="value2" disabled border>选项2</gov-checkbox>
		<gov-checkbox indeterminate disabled border>选项3</gov-checkbox>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value1 = ref(true);
const value2 = ref(false);
</script>

设置 TrueValue 和 FalseValue

自定义选中后的值和取消勾选的值。

控制台

 value:选中啦

查看代码

<template>
	<demo-container>
		<gov-checkbox v-model="value" true-value="选中啦" false-value="没选中">
			点我切换：{{ value }}
		</gov-checkbox>
		<template #console> value:{{ value }} </template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("选中啦");
</script>

多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

你可以设置 indeterminate 半选中状态，这通常使用在全选场景，当设置 indeterminate 时，它仅仅是一个展示。

查看代码

<template>
	<demo-container>
		<gov-checkbox
			label="全选"
			:indeterminate="indeterminate"
			v-model="checkedAll"
		/>
		<br />
		<gov-checkbox-group v-model="group">
			<gov-checkbox :value="1" label="选项1" />
			<gov-checkbox :value="2" label="选项2" />
			<gov-checkbox :value="3" label="选项3" />
		</gov-checkbox-group>
	</demo-container>
</template>

<script setup>
import { ref, computed } from "vue";

const group = ref([1, 2]);

const indeterminate = computed(() => {
	return ![0, 3].includes(group.value.length);
});

const checkedAll = computed({
	get() {
		return group.value.length === 3;
	},
	set(val) {
		group.value = val ? [1, 2, 3] : [];
	},
});
</script>

多选框组 Button

当多选组设置按钮样式时。

查看代码

<template>
	<demo-container>
		<gov-checkbox-group v-model="group" button size="large">
			<gov-checkbox :value="1" label="选项1" />
			<gov-checkbox :value="2" label="选项2" />
			<gov-checkbox :value="3" label="选项3" />
			<gov-checkbox :value="4" label="选项4" />
		</gov-checkbox-group>
		<br />
		<gov-checkbox-group v-model="group" button>
			<gov-checkbox :value="1" label="选项1" />
			<gov-checkbox :value="2" label="选项2" />
			<gov-checkbox :value="3" label="选项3" />
			<gov-checkbox :value="4" label="选项4" />
		</gov-checkbox-group>
		<br />
		<gov-checkbox-group v-model="group" button size="small" disabled>
			<gov-checkbox :value="1" label="选项1" />
			<gov-checkbox :value="2" label="选项2" />
			<gov-checkbox :value="3" label="选项3" />
			<gov-checkbox :value="4" label="选项4" />
		</gov-checkbox-group>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const group = ref([1, 2]);
</script>

Checkbox Attributes

属性名	说明	类型	可选值	默认值
modelValue	绑定的值	Boolean / Array	—	undefined
size	尺寸	String	—	—
label	标签文本	String	—	—
border	是否有边框	Boolean	true, false	false
disabled	是否禁用	Boolean	true, false	false
indeterminate	是否为不确定状态	Boolean	true, false	false
triggerForm	是否触发表单验证	Boolean	true, false	true

Checkbox Events

事件名	说明	回调参数
change	值改变时触发	新的值
blur	失去焦点时触发	事件对象
focus	获得焦点时触发	事件对象

Checkbox Slots

插槽名	说明
default	自定义标签内容，可以放置任何自定义的内容，例如文本或 HTML 结构。

Checkbox-group Attributes

属性名	说明	类型	可选值	默认值
modelValue	绑定的值，用于控制选中的复选框	Array	—	[]
border	是否显示复选框的边框	Boolean	true, false	false
size	复选框组的尺寸	String	—	—
button	是否将复选框渲染为按钮样式	Boolean	true, false	false
disabled	是否禁用复选框组	Boolean	true, false	false
triggerForm	是否触发表单验证	Boolean	true, false	true

Checkbox-group Events

事件名	说明	回调参数
change	值改变时触发	新的值数组
blur	失去焦点时触发	—
focus	获得焦点时触发	—

Checkbox-group Slots

插槽名	说明
default	用于放置复选框 GovCheckbox 组件实例。