CheckItem 单选复选框

更新: 2024/12/17 字数: 0 字 时长: 0 分钟

说明

该组件支持设置单选多选，相对于普通的单复选框，优化了样式。

基本使用

单选

给v-model传一个string或number类型的变量，则为单选类型

<script setup>
const info = ref("");
const options = [
  { label: "待核实", value: 1 },
  { label: "已核实", value: 2 },
];
</script>
<template>
  <CheckItem v-model="info" :options="options" />
</template>

多选

如果给v-model接收一个数组，则为多选类型。

<script setup>
const info = ref([]);
const options = [
  { label: "待核实", value: 1 },
  { label: "已核实", value: 2 },
];
</script>
<template>
  <CheckItem v-model="info" :options="options" />
</template>

API

传参配置

参数名	类型	默认值	说明
v-model	string / number / array	-	绑定值
options	array	-	选项数组，每个选项应为对象，包含label和value属性

事件

事件名	说明	回调参数
click	点击选项时触发	选中项的值，选项的索引
change	改变选中项时触发	选中的所有值