Checkbox 多选框

在一组备选项中进行多选。

基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

Option 1Option 2

显示代码

vue

<template>
	<div class="common-content checkbox-content">
		<div class="checkbox-basic-single">
			<ued-checkbox v-model="checked" label="Option 1" />
			<ued-checkbox v-model="checked1" label="Option 2" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(true)
const checked1 = ref(false)
</script>

尺寸大小

设置 size 属性可以控制大小尺寸，可选值: large、default、small

可以单独给 checkbox 设置，也可以给 checkbox-group设置

Option 1Option 2Option 3Option 4

显示代码

vue

<template>
	<div class="common-content checkbox-content">
		<div class="checkbox-size-single">
			<div>
				<ued-checkbox v-model="checked" label="Option 1" size="large" />
				<ued-checkbox v-model="checked1" label="Option 2" size="large" />
			</div>
			<div>
				<ued-checkbox v-model="checked" label="Option 1" />
				<ued-checkbox v-model="checked1" label="Option 2" />
			</div>
			<div>
				<ued-checkbox v-model="checked" label="Option 1" size="small" />
				<ued-checkbox v-model="checked1" label="Option 2" size="small" />
			</div>
		</div>
		<div class="checkbox-size-group">
			<ued-checkbox-group v-model="checkList" size="large">
				<ued-checkbox value="Value A" label="Option 1" />
				<ued-checkbox value="Value B" label="Option 2" />
				<ued-checkbox value="Value C" label="Option 3" />
				<ued-checkbox value="Value D" label="Option 4" />
			</ued-checkbox-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(true)
const checked1 = ref(false)
const checkList = ref(['Value A', 'Value D'])
</script>

禁用状态

disabled 属性可以用来控制单选框的禁用状态。

你只需要为单选框设置 disabled 属性就能控制其禁用状态。

可以单独给checkbox设置，也可以给checkbox-group设置

Disabled And SelectedNot DisabledDisabled

Option 1Option 2Option 3Option 4

显示代码

vue

<template>
	<div class="common-content checkbox-content">
		<div class="checkbox-diabled-single">
			<ued-checkbox v-model="checked" disabled label="Disabled And Selected" />
			<ued-checkbox v-model="checked1" label="Not Disabled" />
			<ued-checkbox v-model="checked2" disabled label="Disabled" />
		</div>

		<div class="checkbox-disabled-group">
			<ued-checkbox-group v-model="checkList" disabled>
				<ued-checkbox value="Value A" label="Option 1" />
				<ued-checkbox value="Value B" label="Option 2" />
				<ued-checkbox value="Value C" label="Option 3" />
				<ued-checkbox value="Value D" label="Option 4" />
			</ued-checkbox-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(true)
const checked1 = ref(false)
const checked2 = ref(false)

const checkList = ref(['Value A', 'Value D'])
</script>

多选框组

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用 v-model 绑定 Array 类型的变量即可。只有一个选项时的默认值类型为 Boolean，当选中时值为true。 ued-checkbox 标签中的内容将成为复选框按钮之后的描述。

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

在 ued-checkbox 元素中定义 v-model 绑定变量，单一的 checkbox 中，默认绑定变量的值会是 Boolean，选中为 true。在 ued-checkbox 组件中，value 是选择框的值。如果该组件下没有被传入内容，那么 label 将会作为 checkbox 按钮后的介绍。 value 也与数组中的元素值相对应。如果指定的值存在于数组中，就处于选择状态，反之亦然。

Option 1Option 2Option 3Option 4

显示代码

vue

<template>
	<div class="common-content checkbox-content">
		<div class="checkbox-basic-group">
			<ued-checkbox-group v-model="checkList">
				<ued-checkbox value="Value A" label="Option 1" />
				<ued-checkbox value="Value B" label="Option 2" />
				<ued-checkbox value="Value C" label="Option 3" disabled />
				<ued-checkbox value="Value D" label="Option 4" disabled />
			</ued-checkbox-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const checkList = ref(['Value A', 'Value D'])
</script>

带有边框

设置 border 属性为 true 可以渲染为带有边框的单选框。

可以给checkbox单独设置属性，也可以给checkbox-group设置，此时checkbox的 border 属性无效

Option 1Option 2

显示代码

vue

<template>
	<div class="common-content checkbox-content">
		<div class="checkbox-border-group">
			<ued-checkbox-group v-model="checkList" size="large">
				<ued-checkbox border value="Value A" label="Option 1" />
				<ued-checkbox value="Value B" label="Option 2" />
			</ued-checkbox-group>
		</div>
		<div class="checkbox-border-group">
			<ued-checkbox-group v-model="checkList1" border>
				<ued-checkbox value="Value A" label="Option 1" />
				<ued-checkbox value="Value B" label="Option 2" />
			</ued-checkbox-group>
		</div>
		<div class="checkbox-border-group">
			<ued-checkbox-group v-model="checkList2" border disabled size="small">
				<ued-checkbox border value="Value A" label="Option 1" />
				<ued-checkbox value="Value B" label="Option 2" />
			</ued-checkbox-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const checkList = ref(['Value A'])
const checkList1 = ref(['Value A'])
const checkList2 = ref(['Value A'])
</script>

按钮样式

按钮样式的多选组合。

只需要把 ued-checkbox 元素换成 ued-checkbox-button 元素即可

如果需要改变按钮选中时的背景色和字体颜色，可以在 checkbox-group 分别设置 fill 和 text-color 属性

button1button2button3

显示代码

vue

<template>
	<div class="common-content checkbox-content">
		<div class="checkbox-button-basic">
			<ued-checkbox-button v-model="button1" value="button1" />
			<ued-checkbox-button v-model="button2" value="button2" />
			<ued-checkbox-button v-model="button3" value="button3" />
		</div>
		<div class="checkbox-button-group">
			<ued-checkbox-group v-model="buttonGroup">
				<ued-checkbox-button value="button1" />
				<ued-checkbox-button value="button2" />
				<ued-checkbox-button value="button3" />
			</ued-checkbox-group>
		</div>
		<div class="checkbox-button-size-basic">
			<ued-checkbox-group v-model="large" size="large">
				<ued-checkbox-button value="button1" />
				<ued-checkbox-button value="button2" />
				<ued-checkbox-button value="button3" />
			</ued-checkbox-group>
		</div>
		<div class="checkbox-button-size-basic">
			<ued-checkbox-group v-model="small" size="small">
				<ued-checkbox-button value="button1" />
				<ued-checkbox-button value="button2" disabled />
				<ued-checkbox-button value="button3" />
			</ued-checkbox-group>
		</div>
		<div class="checkbox-button-size-basic">
			<ued-checkbox-group
				v-model="style"
				fill="#67c23a"
				text-color="rgba(0, 0, 0, 1)"
			>
				<ued-checkbox-button value="button1" />
				<ued-checkbox-button value="button2" />
				<ued-checkbox-button value="button3" />
			</ued-checkbox-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const button1 = ref(true)
const button2 = ref(false)
const button3 = ref(false)
const buttonGroup = ref(['button1'])
const large = ref(['button1'])
const small = ref(['button1'])
const style = ref(['button1'])
</script>

可选项目数量的限制

使用 min 和 max 属性能够限制可以被勾选的项目的数量。

Option 1Option 2Option 3Option 4

显示代码

vue

<template>
	<div class="common-content checkbox-content">
		<div class="checkbox-limit-group">
			<ued-checkbox-group v-model="checkList" :max="2" :min="1">
				<ued-checkbox value="Value A" label="Option 1" />
				<ued-checkbox value="Value B" label="Option 2" />
				<ued-checkbox value="Value C" label="Option 3" />
				<ued-checkbox value="Value D" label="Option 4" />
			</ued-checkbox-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const checkList = ref(['Value A', 'Value B'])
</script>

中间状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

显示代码

vue

<template>
	<div class="common-content checkbox-content">
		<div class="checkbox-indeterminate-group">
			<ued-checkbox
				v-model="checkAll"
				:indeterminate="isIndeterminate"
				@change="handleCheckAllChange"
			>
				Check all
			</ued-checkbox>
			<ued-checkbox-group v-model="checkList" @change="handleCheckedListChange">
				<ued-checkbox v-for="l in list" :key="l" :value="l" :label="l" />
			</ued-checkbox-group>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const checkAll = ref(false)
const isIndeterminate = ref(true)
const list = ['Value A', 'Value B', 'Value C', 'Value D']
const checkList = ref(['Value A', 'Value B'])

const handleCheckAllChange = (val: boolean) => {
	checkList.value = val ? list : []
	isIndeterminate.value = false
}

const handleCheckedListChange = (value: string[]) => {
	const checkedCount = value.length
	checkAll.value = checkedCount === list.length
	isIndeterminate.value = checkedCount > 0 && checkedCount < list.length
}
</script>

Checkbox API

属性

属性名	说明	类型	默认值
model-value/v-model	选中项绑定值	`string`/`number`/`boolean`	-
value	选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）	`string`/`number`/`boolean` / `Object`	-
label	选中状态的值，只有在绑定对象类型为 `array` 时有效	`string`/`number`/`boolean`/ `Object`	-
disabled	是否禁用多选框	`boolean`	false
border	是否显示边框	`boolean`	false
size	多选框的尺寸	`large`/`default`/`small`	-
name	原始 `name` 属性	`string`	-
indeterminate	设置不确定状态，仅负责样式控制	`boolean`	false

事件

事件名	说明	类型
change	绑定值变化时触发的事件	`(value: string \| number \| boolean) => void`

插槽

插槽名	说明
default	自定义默认内容

CheckboxGroup API

属性

属性名	说明	类型	默认值
model-value/v-model	选中项绑定值	`string[]`/`number[]`/	-
disabled	是否禁用多选框	`boolean`	false
border	是否显示边框	`boolean`	false
size	多选框的尺寸	`large`/`default`/`small`	-
name	原始 `name` 属性	`string`	-
id	原始 `id` 属性	`string`	-
text-color	按钮形式的 checkbox 激活时的文本颜色	`string`	`#ffffff`
fill	按钮形式的 checkbox 激活时的填充色和边框色	`string`	`#409eff`
max	可被勾选的 checkbox 的最大数量	`number`	-
min	可被勾选的 checkbox 的最小数量	`number`	-

事件

事件名	说明	类型
change	绑定值变化时触发的事件	`(value: string[] \| number[]) => void`

插槽

插槽名	说明	子标签
default	自定义默认内容	Checkbox / CheckboxButton

CheckboxButton API

属性

属性名	说明	类型	默认值
model-value/v-model	选中项绑定值	`string`/`number`/`boolean`	-
value	选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）	`string`/`number`/`boolean` / `Object`	-
label	选中状态的值，只有在绑定对象类型为 `array` 时有效	`string`/`number`/`boolean`/ `Object`	-
disabled	是否禁用单选框	`boolean`	false
size	单选框的尺寸	`large`/`default`/`small`	-
name	原始 `name` 属性	`string`	-

事件

事件名	说明	类型
change	绑定值变化时触发的事件	`(value: string \| number \| boolean) => void`

插槽

插槽名	说明
default	自定义默认内容

Checkbox 多选框 ​

基础用法 ​

尺寸大小 ​

禁用状态 ​

多选框组 ​

带有边框 ​

按钮样式 ​

可选项目数量的限制 ​

中间状态 ​

Checkbox API ​

属性 ​

事件 ​

插槽 ​

CheckboxGroup API ​

属性 ​

事件 ​

插槽 ​

CheckboxButton API ​

属性 ​

事件 ​

插槽 ​

Checkbox 多选框

基础用法

尺寸大小

禁用状态

多选框组

带有边框

按钮样式

可选项目数量的限制

中间状态

Checkbox API

属性

事件

插槽

CheckboxGroup API

属性

事件

插槽

CheckboxButton API

属性

事件

插槽