Checkbox 多选框
在一组备选项中进行多选。
基础用法
单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍
Option 1
Option 2
Option 3
展开查看
vue
<template>
<tass-checkbox v-model="checked1">Option 1</tass-checkbox>
<tass-checkbox disabled>Option 2</tass-checkbox>
<tass-checkbox v-model="checked2">Option 3</tass-checkbox>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const checked1 = ref(true);
const checked2 = ref(false);
</script>
禁用状态
多选框不可用状态。
设置 disabled 属性即可
Disabled
Not Disabled
展开查看
vue
<template>
<tass-checkbox disabled>Disabled</tass-checkbox>
<tass-checkbox v-model="checked1">Not Disabled</tass-checkbox>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const checked1 = ref(true);
</script>
多选框组
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
[
"OptionA",
"OptionB"
]
OptionA
OptionB
OptionC
OptionD
展开查看
vue
<template>
{{ checkList }}<br /><br />
<tass-checkbox-group v-model="checkList">
<tass-checkbox v-for="(item, index) in showList" :key="index" :label="item"></tass-checkbox>
</tass-checkbox-group>
</template>
<script setup lang="ts">
import { ref } from 'vue';
let checkList = ref(['OptionA', 'OptionB']);
let showList = ref(['OptionA', 'OptionB', 'OptionC', 'OptionD']);
</script>
事件回调
Option 1
展开查看
vue
<template>
<tass-checkbox v-model="checked1" @change="handlerChange">Option 1</tass-checkbox>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const checked1 = ref(true);
const handlerChange = () => {
alert('This is a handleChange test.');
};
</script>