Tu View PlusCheckbox 复选框
在一组备选项中进行多选。
基础用法
单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。
<template>
<tu-checkbox :label="1">选项1</tu-checkbox>
</template>
<script lang="ts" setup>
</script><template>
<tu-checkbox :label="1">选项1</tu-checkbox>
</template>
<script lang="ts" setup>
</script>受控状态
通过 v-model (model-value) 属性控制是否选中。
<template>
<tu-checkbox v-model="checked1">选项1(v-model)</tu-checkbox>
<tu-checkbox :model-value="true">选项2(绑定固定值)</tu-checkbox>
<tu-checkbox :model-value="checked3"> 选项3(绑定变化值) </tu-checkbox>
<tu-button class="mt-2" @click="checked3 = !checked3">
点击切换选项3
</tu-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checked1 = ref(false);
const checked3 = ref(false);
</script>
<style scoped>
.mt-2 {
display: block;
}
</style><template>
<tu-checkbox v-model="checked1">选项1(v-model)</tu-checkbox>
<tu-checkbox :model-value="true">选项2(绑定固定值)</tu-checkbox>
<tu-checkbox :model-value="checked3"> 选项3(绑定变化值) </tu-checkbox>
<tu-button class="mt-2" @click="checked3 = !checked3">
点击切换选项3
</tu-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checked1 = ref(false);
const checked3 = ref(false);
</script>
<style scoped>
.mt-2 {
display: block;
}
</style>禁用状态
设置复选框 disabled 属性为不可用状态。
<template>
<tu-checkbox v-model="checked1" disabled>选项1</tu-checkbox>
<tu-checkbox v-model="checked2" disabled>选项2</tu-checkbox>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checked1 = ref(false);
const checked2 = ref(true);
</script><template>
<tu-checkbox v-model="checked1" disabled>选项1</tu-checkbox>
<tu-checkbox v-model="checked2" disabled>选项2</tu-checkbox>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checked1 = ref(false);
const checked2 = ref(true);
</script>多选框组
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
<template>
<tu-checkbox-group v-model="checkList">
<tu-checkbox label="1">选项1</tu-checkbox>
<tu-checkbox label="2">选项2</tu-checkbox>
<tu-checkbox label="3">选项3</tu-checkbox>
<tu-checkbox label="4" disabled>选项4</tu-checkbox>
<tu-checkbox label="5" disabled>选项5</tu-checkbox>
</tu-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checkList = ref(['1', '5']);
</script><template>
<tu-checkbox-group v-model="checkList">
<tu-checkbox label="1">选项1</tu-checkbox>
<tu-checkbox label="2">选项2</tu-checkbox>
<tu-checkbox label="3">选项3</tu-checkbox>
<tu-checkbox label="4" disabled>选项4</tu-checkbox>
<tu-checkbox label="5" disabled>选项5</tu-checkbox>
</tu-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checkList = ref(['1', '5']);
</script>中间状态
设置 indeterminate 属性用来表示 checkbox 的不确定状态，一般用于实现全选的效果。
<template>
<tu-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange"
>全选
</tu-checkbox>
<br />
<tu-checkbox-group v-model="checkedList" @change="handleCheckedChange">
<tu-checkbox v-for="option in options" :key="option" :label="option">
{{ option }}
</tu-checkbox>
</tu-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const options = ['选项1', '选项2', '选项3', '选项4'];
const checkAll = ref(false);
const isIndeterminate = ref(false);
const checkedList = ref([] as string[]);
const handleCheckAllChange = (val: boolean) => {
checkedList.value = val ? options : [];
isIndeterminate.value = false;
};
const handleCheckedChange = (val: string[]) => {
const checkedCount = val.length;
checkAll.value = checkedCount === options.length;
isIndeterminate.value = checkedCount > 0 && checkedCount < options.length;
};
</script><template>
<tu-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange"
>全选
</tu-checkbox>
<br />
<tu-checkbox-group v-model="checkedList" @change="handleCheckedChange">
<tu-checkbox v-for="option in options" :key="option" :label="option">
{{ option }}
</tu-checkbox>
</tu-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const options = ['选项1', '选项2', '选项3', '选项4'];
const checkAll = ref(false);
const isIndeterminate = ref(false);
const checkedList = ref([] as string[]);
const handleCheckAllChange = (val: boolean) => {
checkedList.value = val ? options : [];
isIndeterminate.value = false;
};
const handleCheckedChange = (val: string[]) => {
const checkedCount = val.length;
checkAll.value = checkedCount === options.length;
isIndeterminate.value = checkedCount > 0 && checkedCount < options.length;
};
</script>可选数量限制
设置 min 和 max 属性能够限制可以被勾选的项目的数量。
最少选择1个，最多选择3个
<template>
<p>最少选择1个，最多选择3个</p>
<tu-checkbox-group v-model="checkedList" :min="1" :max="3">
<tu-checkbox v-for="option in options" :key="option" :label="option">
{{ option }}
</tu-checkbox>
</tu-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const options = ['选项1', '选项2', '选项3', '选项4'];
const checkedList = ref([] as string[]);
</script><template>
<p>最少选择1个，最多选择3个</p>
<tu-checkbox-group v-model="checkedList" :min="1" :max="3">
<tu-checkbox v-for="option in options" :key="option" :label="option">
{{ option }}
</tu-checkbox>
</tu-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const options = ['选项1', '选项2', '选项3', '选项4'];
const checkedList = ref([] as string[]);
</script>复选框组样式
复选框组的样式，可设置为按钮或边框样式。
按钮样式
边框样式
<template>
<div>
<p>按钮样式</p>
<tu-checkbox-group v-model="checked1" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
<tu-checkbox :label="3">选项3</tu-checkbox>
</tu-checkbox-group>
</div>
<div>
<p>边框样式</p>
<tu-checkbox-group v-model="checked2" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
<tu-checkbox :label="3">选项3</tu-checkbox>
</tu-checkbox-group>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checked1 = ref([]);
const checked2 = ref([]);
</script><template>
<div>
<p>按钮样式</p>
<tu-checkbox-group v-model="checked1" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
<tu-checkbox :label="3">选项3</tu-checkbox>
</tu-checkbox-group>
</div>
<div>
<p>边框样式</p>
<tu-checkbox-group v-model="checked2" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
<tu-checkbox :label="3">选项3</tu-checkbox>
</tu-checkbox-group>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checked1 = ref([]);
const checked2 = ref([]);
</script>复选框组尺寸
tu-checkbox-group 组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。
超小
较小
默认
较大
超小
较小
默认
较大
超小
较小
默认
较大
<template>
<tu-row>
<tu-col :span="8">
<p>超小</p>
<tu-checkbox-group v-model="checked1" size="mini">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较小</p>
<tu-checkbox-group v-model="checked1" size="small">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>默认</p>
<tu-checkbox-group v-model="checked1">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较大</p>
<tu-checkbox-group v-model="checked1" size="large">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
</tu-col>
<tu-col :span="8">
<p>超小</p>
<tu-checkbox-group v-model="checked2" size="mini" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较小</p>
<tu-checkbox-group v-model="checked2" size="small" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>默认</p>
<tu-checkbox-group v-model="checked2" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较大</p>
<tu-checkbox-group v-model="checked2" size="large" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
</tu-col>
<tu-col :span="8">
<p>超小</p>
<tu-checkbox-group v-model="checked3" size="mini" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较小</p>
<tu-checkbox-group v-model="checked3" size="small" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>默认</p>
<tu-checkbox-group v-model="checked3" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较大</p>
<tu-checkbox-group v-model="checked3" size="large" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checked1 = ref([]);
const checked2 = ref([]);
const checked3 = ref([]);
</script><template>
<tu-row>
<tu-col :span="8">
<p>超小</p>
<tu-checkbox-group v-model="checked1" size="mini">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较小</p>
<tu-checkbox-group v-model="checked1" size="small">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>默认</p>
<tu-checkbox-group v-model="checked1">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较大</p>
<tu-checkbox-group v-model="checked1" size="large">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
</tu-col>
<tu-col :span="8">
<p>超小</p>
<tu-checkbox-group v-model="checked2" size="mini" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较小</p>
<tu-checkbox-group v-model="checked2" size="small" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>默认</p>
<tu-checkbox-group v-model="checked2" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较大</p>
<tu-checkbox-group v-model="checked2" size="large" type="button">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
</tu-col>
<tu-col :span="8">
<p>超小</p>
<tu-checkbox-group v-model="checked3" size="mini" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较小</p>
<tu-checkbox-group v-model="checked3" size="small" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>默认</p>
<tu-checkbox-group v-model="checked3" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
<p>较大</p>
<tu-checkbox-group v-model="checked3" size="large" type="border">
<tu-checkbox :label="1">选项1</tu-checkbox>
<tu-checkbox :label="2">选项2</tu-checkbox>
</tu-checkbox-group>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const checked1 = ref([]);
const checked2 = ref([]);
const checked3 = ref([]);
</script>Checkbox API
Checkbox Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | String Number Boolean | - |
| label | 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效） | String Number Boolean Object | - |
| true-label | 选中时的值 | String Number | - |
| false-label | 没有选中时的值 | String Number | - |
| disabled | 是否禁用 | Boolean | false |
| type | 类型 | String | - |
| size | 尺寸 | String | medium |
| name | 原生属性 | String | - |
| checked | 当前是否勾选 | Boolean | false |
| indeterminate | 设置不确定状态，仅负责样式控制 | Boolean | false |
| validate-event | 输入时是否触发表单的校验 | Boolean | true |
| tabindex | 输入框的 tabindex | String Number | - |
| id | 输入框的 id | String | - |
| controls | 与 aria-control一致, 当 indeterminate为 true时生效 | Boolean | - |
Checkbox Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Function |
Checkbox Slots
| 参数名 | 描述 |
|---|---|
| default | 自定义内容 |
CheckboxGroup API
CheckboxGroup Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | Object | - |
| label | 为屏幕阅读器准备的标签 | String | - |
| type | 类型 | String | - |
| size | 尺寸 | String | medium |
| disabled | 是否禁用 | Boolean | false |
| min | 可被勾选的 checkbox 的最小数量 | Number | - |
| max | 可被勾选的 checkbox 的最大数量 | Number | - |
| text-color | 当按钮为活跃状态时的字体颜色 | String | - |
| tag | 复选框组元素标签 | String | div |
| validate-event | 是否触发表单验证 | Boolean | true |
CheckboxGroup Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Function |
CheckboxGroup Slots
| 参数名 | 描述 | 类型 |
|---|---|---|
| default | 自定义内容 | Checkbox |