多选框

多选框组件。

基础使用

通过 options 属性设置选项数据。
通过 v-model 属性绑定选中项的值。
- 单独使用时，v-model 是一个布尔值。
- 非单独使用时，v-model 是一个数组，绑定的是选中项的 value 值。

vue

<template>
	<!-- 第一种使用方式：使用 options 设置选项数据方式 -->
	<!-- 可以通过 labelKey 和 valueKey 分别设置标签和值对应的字段名称 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		labelKey="label"
		valueKey="value"
	></pure-checkbox-group>

	<!-- 第二种使用方式：使用 v-for 循环渲染选项 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1" },
		{ label: "足球", value: "2" },
		{ label: "篮球", value: "3" },
		{ label: "网球", value: "4" },
		{ label: "游泳", value: "5" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

单独使用

默认情况下 <pure-checkbox-group> 和 <pure-checkbox> 组件需结合使用，如需单独使用 <pure-checkbox> 组件，需设置 alone 属性 true 并通过 v-model 属性绑定选中状态。

vue

<template>
	<pure-checkbox
		label="已阅读并同意《用户协议》和《隐私政策》"
		v-model="isChecked"
		alone
	></pure-checkbox>
</template>

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

	// 选中状态
	const isChecked = ref(false);
</script>

禁用状态

将 disabled 属性设置为 true 开启禁用状态。

设置在 <pure-checkbox-group> 组件上，会禁用所有子项。
设置在 <pure-checkbox> 组件上，会禁用单个子项。

vue

<template>
	<!-- 禁用整租 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		disabled
	></pure-checkbox-group>

	<!-- 禁用单项 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			disabled="item.disabled"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1" },
		{ label: "足球", value: "2" },
		{ label: "篮球", value: "3", disabled: true },
		{ label: "网球", value: "4" },
		{ label: "游泳", value: "5" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

只读状态

将 readonly 属性设置为 true 开启只读状态。

设置在 <pure-checkbox-group> 组件上，会只读所有子项。
设置在 <pure-checkbox> 组件上，会只读单个子项。

vue

<template>
	<!-- 只读整租 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		readonly
	></pure-checkbox-group>

	<!-- 只读单项 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			readonly="item.readonly"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1" },
		{ label: "足球", value: "2" },
		{ label: "篮球", value: "3", readonly: true },
		{ label: "网球", value: "4" },
		{ label: "游泳", value: "5" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

主题

通过 theme 属性设置多选框主题。

设置在 <pure-checkbox-group> 组件上，会给所有子项设置同一主题。
设置在 <pure-checkbox> 组件上，会给单个子项设置主题。

vue

<template>
	<!-- 给所有子项设置同一主题 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		theme="danger"
	></pure-checkbox-group>

	<!-- 给单个子项设置主题 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			:theme="item.theme"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1", theme: "primary" },
		{ label: "足球", value: "2", theme: "success" },
		{ label: "篮球", value: "3", theme: "danger" },
		{ label: "网球", value: "4", theme: "warning" },
		{ label: "游泳", value: "5", theme: "error" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

幽灵样式

通过 ghost 属性设置多选框幽灵样式。

设置在 <pure-checkbox-group> 组件上，会给所有子项设置同一幽灵样式。
设置在 <pure-checkbox> 组件上，会给单个子项设置幽灵样式。

vue

<template>
	<!-- 给所有子项设置同一幽灵样式 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		theme="danger"
		ghost
	></pure-checkbox-group>

	<!-- 给单个子项设置幽灵样式 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			:theme="item.theme"
			:ghost="item.ghost"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1", ghost: true, theme: "primary" },
		{ label: "足球", value: "2", ghost: false, theme: "success" },
		{ label: "篮球", value: "3", ghost: true, theme: "danger" },
		{ label: "网球", value: "4", ghost: false, theme: "warning" },
		{ label: "游泳", value: "5", ghost: true, theme: "error" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

镂空样式

通过 plain 属性设置多选框镂空样式。

设置在 <pure-checkbox-group> 组件上，会给所有子项设置同一镂空样式。
设置在 <pure-checkbox> 组件上，会给单个子项设置镂空样式。

vue

<template>
	<!-- 给所有子项设置同一镂空样式 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		theme="danger"
		plain
	></pure-checkbox-group>

	<!-- 给单个子项设置镂空样式 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			:theme="item.theme"
			:plain="item.plain"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1", plain: true, theme: "primary" },
		{ label: "足球", value: "2", plain: false, theme: "success" },
		{ label: "篮球", value: "3", plain: true, theme: "danger" },
		{ label: "网球", value: "4", plain: false, theme: "warning" },
		{ label: "游泳", value: "5", plain: true, theme: "error" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

圆形框

通过 circle 属性将框框设置为圆形。

设置在 <pure-checkbox-group> 组件上，会将所有子项设置为圆形。
设置在 <pure-checkbox> 组件上，将单个子项设置为圆形。

vue

<template>
	<!-- 将所有子项设置为圆形 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		theme="danger"
		circle
	></pure-checkbox-group>

	<!-- 将单个子项设置为圆形 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			:theme="item.theme"
			:circle="item.circle"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1", circle: true, theme: "primary" },
		{ label: "足球", value: "2", circle: false, theme: "success" },
		{ label: "篮球", value: "3", circle: true, theme: "danger" },
		{ label: "网球", value: "4", circle: false, theme: "warning" },
		{ label: "游泳", value: "5", circle: true, theme: "error" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

块级布局

通过 block 属性将多选框设置为块级布局，块级布局时，每个子项独占一行。

设置在 <pure-checkbox-group> 组件上，会将所有子项设置为块级布局。
设置在 <pure-checkbox> 组件上，将单个子项设置为块级布局。

vue

<template>
	<!-- 将所有子项设置为块级布局 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		theme="danger"
		block
	></pure-checkbox-group>

	<!-- 将单个子项设置为块级布局 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			:theme="item.theme"
			:block="item.block"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1", block: true, theme: "primary" },
		{ label: "足球", value: "2", block: false, theme: "success" },
		{ label: "篮球", value: "3", block: true, theme: "danger" },
		{ label: "网球", value: "4", block: false, theme: "warning" },
		{ label: "游泳", value: "5", block: true, theme: "error" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

反转布局

通过 reverse 属性将多选框设置为反转布局，反转布局时，标签在左侧，勾选框在右侧。

设置在 <pure-checkbox-group> 组件上，会将所有子项设置为反转布局。
设置在 <pure-checkbox> 组件上，将单个子项设置为反转布局。

vue

<template>
	<!-- 将所有子项设置为反转布局 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		theme="danger"
		block
		reverse
	></pure-checkbox-group>

	<!-- 将单个子项设置为反转布局 -->
	<pure-checkbox-group
		v-model="hobbyChecked"
		block
	>
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			:theme="item.theme"
			:reverse="item.reverse"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1", reverse: true, theme: "primary" },
		{ label: "足球", value: "2", reverse: false, theme: "success" },
		{ label: "篮球", value: "3", reverse: true, theme: "danger" },
		{ label: "网球", value: "4", reverse: false, theme: "warning" },
		{ label: "游泳", value: "5", reverse: true, theme: "error" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

自定义颜色

通过 iconColor 属性自定义图标颜色。
通过 defaultColor 属性自定义未选中时的背景色。
通过 activeColor 属性自定义选中时的背景色。

同样，以上属性可以设置在 <pure-checkbox-group> 和 <pure-chechbox> 上。

设置在 <pure-checkbox-group> 组件上，影响所有子项。
设置在 <pure-checkbox> 组件上，影响单个子项。

vue

<template>
	<!-- 同一设置所有子项的自定义颜色 -->
	<pure-checkbox-group
		:options="hobby"
		v-model="hobbyChecked"
		iconColor="red"
		defaultColor="yellow"
		activeColor="blue"
	></pure-checkbox-group>

	<!-- 为每个子项设置不同的自定义颜色 -->
	<pure-checkbox-group v-model="hobbyChecked">
		<pure-checkbox
			v-for="item in hobby"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			:iconColor="item.iconColor"
			:defaultColor="item.defaultColor"
			:activeColor="item.activeColor"
		></pure-checkbox>
	</pure-checkbox-group>
</template>

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

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1", iconColor: "red", defaultColor: "yellow", activeColor: "blue" },
		{ label: "足球", value: "2", iconColor: "blue", defaultColor: "yellow", activeColor: "red" },
		{ label: "篮球", value: "3", iconColor: "yellow", defaultColor: "red", activeColor: "blue" },
		{ label: "网球", value: "4", iconColor: "red", defaultColor: "blue", activeColor: "yellow" },
		{ label: "游泳", value: "5", iconColor: "orange", defaultColor: "pink", activeColor: "red" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
</script>

属性

`<pure-checkbox-group>`

名称	类型	默认值	说明
`hoverClass`	`String`	`pure-hover`	按下去的样式类
`modelValue`	`Array`		选中项的值
`options`	`Array`		选项
`labelKey`	`String`	`label`	选项标签键名
`valueKey`	`String`	`value`	选项值键名
`iconName`	`String`		选中图标名称
`disabled`	`Boolean`	`false`	是否禁用
`readonly`	`Boolean`	`false`	是否只读
`theme`	`String`		主题
`ghost`	`Boolean`	`false`	幽灵样式
`plain`	`Boolean`	`false`	镂空样式
`circle`	`Boolean`	`false`	是否为圆形样式
`block`	`Boolean`	`false`	是否为块级元素
`reverse`	`Boolean`	`false`	是否反向布局
`size`	`String`	`1.2em`	选择框的尺寸
`iconColor`	`String`		图标颜色
`defaultColor`	`String`		默认背景色
`activeColor`	`String`		选中时的背景色

`<pure-checkbox>`

名称	类型	默认值	说明
`hoverClass`	`String`	`pure-hover`	按下去的样式类
`label`	`String`	`label`	选项标签
`value`	`String`	`value`	选项值
`alone`	`Boolean`	`false`	是否单独使用
`modelValue`	`Boolean`	`false`	单独使用时的选中状态
`iconName`	`String`	`__checked`	选中图标名称
`disabled`	`Boolean`	`false`	是否禁用
`readonly`	`Boolean`	`false`	是否只读
`theme`	`String`		主题
`ghost`	`Boolean`	`false`	幽灵样式
`plain`	`Boolean`	`false`	镂空样式
`circle`	`Boolean`	`false`	是否为圆形样式
`block`	`Boolean`	`false`	是否为块级元素
`reverse`	`Boolean`	`false`	是否反向布局
`size`	`String`	`1.2em`	选择框的尺寸
`iconColor`	`String`		图标颜色
`defaultColor`	`String`		默认背景色
`activeColor`	`String`		选中时的背景色

事件

`<pure-checkbox>`

名称	参数	说明
`onClick`		点击事件

插槽

`<pure-checkbox-group>`

名称	参数	说明
`#default`		默认，组内容

`<pure-checkbox>`

名称	参数	说明
`#default`		默认，标签

样式变量

`<pure-checkbox-group>`

名称	说明
`--pure-checkbox-group-display`	显示类型
`--pure-checkbox-group-flex-wrap`	内容 `flex` 换行模式
`--pure-checkbox-group-flex-direction`	内容 `flex` 方向
`--pure-checkbox-group-gap`	选项间距
`--pure-checkbox-group-disabled-opacity`	禁用时的透明度

`<pure-checkbox>`

名称	说明
`--pure-checkbox-display`	显示类型
`--pure-checkbox-flex-direction`	内容 `flex` 布局方向
`--pure-checkbox-align-items`	内容对齐方式
`--pure-checkbox-justify-content`	内容对齐方式
`--pure-checkbox-gap`	内容之间的间距
`--pure-checkbox-box-size`	复选框大小
`--pure-checkbox-box-border-radius`	复选框圆角大小
`--pure-checkbox-box-margin`	复选框外边距
`--pure-checkbox-box-padding`	复选框内边距
`--pure-checkbox-box-background`	复选框默认背景
`--pure-checkbox-checked-box-background`	选中时的背景颜色
`--pure-checkbox-box-background-opacity`	复选框默认背景透明度
`--pure-checkbox-checked-box-background-opacity`	选中时的背景透明度
`--pure-checkbox-box-border`	复选框边框样式
`--pure-checkbox-box-border-width`	复选框边框宽度
`--pure-checkbox-checked-box-border-width`	选中时的边框宽度
`--pure-checkbox-box-border-style`	复选框边框类型
`--pure-checkbox-checked-box-border-style`	选中时的边框类型
`--pure-checkbox-box-border-color`	复选框边框颜色
`--pure-checkbox-checked-box-border-color`	选中时的边框颜色
`--pure-checkbox-icon-font-size`	图标字体大小
`--pure-checkbox-checked-icon-font-size`	选中时的图标字体大小
`--pure-checkbox-icon-font-weight`	图标字体粗细
`--pure-checkbox-icon-color`	图标颜色
`--pure-checkbox-icon-transition`	图标过渡效果
`--pure-checkbox-disabled-opacity`	禁用时的透明度

多选框 ​

基础使用 ​

单独使用 ​

禁用状态 ​

只读状态 ​

主题 ​

幽灵样式 ​

镂空样式 ​

圆形框 ​

块级布局 ​

反转布局 ​

自定义颜色 ​

属性 ​

<pure-checkbox-group> ​

<pure-checkbox> ​

事件 ​

<pure-checkbox> ​

插槽 ​

<pure-checkbox-group> ​

<pure-checkbox> ​

样式变量 ​

<pure-checkbox-group> ​

<pure-checkbox> ​

多选框

基础使用

单独使用

禁用状态

只读状态

主题

幽灵样式

镂空样式

圆形框

块级布局

反转布局

自定义颜色

属性

`<pure-checkbox-group>`

`<pure-checkbox>`

事件

`<pure-checkbox>`

插槽

`<pure-checkbox-group>`

`<pure-checkbox>`

样式变量

`<pure-checkbox-group>`

`<pure-checkbox>`