复选框

包含 pure-checkbox 和 pure-checkbox-group 两个组件。可以组合使用，也可以单独使用两个组件。

属性

checkbox-group

名称	类型	默认值	说明
v-model	Array	[]	[注意事项] 选中项的值，用于双向绑定。
options	Array	-	单独使用时，复选框选项列表，每个选项是一个对象，对象的属性对应 pure-checkbox 组件的属性。
readonly	Boolean	false	是否将整个组设置为只读状态，只读状态点击无响应，一般用于数据回显展示时使用
$attrs	Object	-	组件的属性，v-bind 到 pure-checkbox 组件上

checkbox

名称	类型	默认值	说明
hoverClass	String	pure-hover	指定按下去的样式类
iconName	String	-	选中图标的名称
iconMode	String	-	[参考] 选中图标图片的裁剪、缩放模式
label	String	-	显示的文本
value	[String, Number]	-	[注意事项] 选项对应的值
disabled	Boolean	false	禁用状态
alone	Boolean	false	是否单独使用
v-model	Boolean	false	单独使用时的选中状态。
disabled	Boolean	false	禁用状态
readonly	Boolean	false	是否只读，只读状态点击无响应，一般用于数据回显展示时使用
theme	String	-	[详情] 主题
ghost	Boolean	false	是否是幽灵样式
plain	Boolean	false	是否是镂空样式
circle	Boolean	false	是否是圆形样式
fontSize	String	-	字体大小
fontWeight	String	-	字体粗细
color	String	-	字体颜色
margin	String	-	外边距
padding	String	-	内边距
size	String	-	框框的大小
background	String	-	框框背景颜色
border	String	-	框框边框样式
borderWidth	String	-	框框边框宽度
borderStyle	String	-	框框边框样式
borderColor	String	-	框框边框颜色
radius	String	-	框框圆角
borderRadius	String	-	框框圆角
boxMargin	String	-	框框外边距
boxPadding	String	-	框框内边距
bgOpacity	String	-	框框背景透明度
checkedBorderWidth	String	-	选中状态框框边框宽度
checkedBorderStyle	String	-	选中状态框框边框样式
checkedBorderColor	String	-	选中状态框框边框颜色
checkedBackground	String	-	选中状态框框背景颜色
checkedBgOpacity	String	-	选中状态框框背景透明度
checkedIconSize	String	-	选中状态图标大小
checkedIconColor	String	-	选中状态图标颜色

主题

通过 theme 属性来设置主题，主题分为内置主题和自定义扩展主题。

内置主题

直接将 theme 属性设置为内置主题名称即可使用，如 theme="primary"。

主题名称	说明
primary	主要，用于主要操作，如提交、确认等。
success	成功，用于表示操作成功，如提交成功、确认成功等。
warning	警告，用于表示警告，如删除、取消等。
danger	危险，用于表示危险操作，如删除、取消等。
info	信息，用于展示信息，如查看详情、了解更多等。

扩展主题

1. 首先在 css 中定义好主题变量名。
2. 直接将变量名赋值给 theme 属性即可使用，如 theme="--my-custom-theme-1"。

vue

<!-- 扩展主题 -->
<pure-checkbox
	label="扩展主题"
	value="extend-theme"
	theme="--my-custom-theme-1"
/>

css

/* 定义扩展主题变量 */
page {
	--my-custom-theme-1: #ff9900;
}

基础使用

vue

<template>
	<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>
</templaet>

js

import { ref, computed } from "vue";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************
// 爱好
const hobby = ref([
	{ label: "跑步", value: "1" },
	{ label: "足球", value: "2" },
	{ label: "篮球", value: "3" },
	{ label: "网球", value: "4", disabled: true },
	{ label: "游泳", value: "6" },
	{ label: "读书", value: "7" },
	{ label: "写代码", value: "8" },
	{ label: "听音乐", value: "9", disabled: true },
	{ label: "看电影", value: "10" },
	{ label: "其他", value: "5" },
]);

// 选中的爱好
const hobbyChecked = ref(["8"]);

// 单独使用时的选中状态
const checked = ref(false);

单独使用

vue

<template>
	<!--
	 * 单独使用复选框组
	 * 只需设置 v-model 和 options 属性
	 -->
	<pure-checkbox-group
		v-model="hobbyChecked"
		:options="hobby"
	></pure-checkbox-group>

	<!--
	 * 单独使用复选框
	 * 需设置 v-model 和 alone 属性
	 -->
	<pure-checkbox v-model="checked" alone label="已阅读并同意《隐私政策》、《用户协议》"></pure-checkbox>
</templaet>

js

import { ref, computed } from "vue";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************
// 爱好
const hobby = ref([
	{ label: "跑步", value: "1" },
	{ label: "足球", value: "2" },
	{ label: "篮球", value: "3" },
	{ label: "网球", value: "4", disabled: true },
	{ label: "游泳", value: "6" },
	{ label: "读书", value: "7" },
	{ label: "写代码", value: "8" },
	{ label: "听音乐", value: "9", disabled: true },
	{ label: "看电影", value: "10" },
	{ label: "其他", value: "5" },
]);

// 选中的爱好
const hobbyChecked = ref(["8"]);

// 单独使用时的选中状态
const checked = ref(false);

事件

checkbox

名称	参数	说明
@onClick	value: 选项的值; checked: 当前选中状态	点击时触发

插槽

checkbox

名称	参数	说明
#default	-	默认，显示文本