Evokercheckbox
多选。
Props
| 参数 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| value | string | 否 | 选中时触发 checkbox-group 的 change 事件，并携带此 value | |
| checked | boolean | false | 否 | 当前是否选中，可用来设置默认选中 |
| color | color | #1989fa | 否 | 颜色 |
| disabled | boolean | false | 否 | 是否禁用 |
Example
vue
<template>
<checkbox-group @change="onChange">
<checkbox
v-for="fruit of fruits"
:key="fruit.value"
:value="fruit.value"
:checked="fruit.checked"
>{{ fruit.name }}
</checkbox>
</checkbox-group>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const fruits = reactive([
{ name: '苹果', value: 'apple' },
{ name: '香蕉', value: 'banana' },
{ name: '菠萝', value: 'pineapple', checked: true },
{ name: '葡萄', value: 'grape' },
{ name: '柠檬', value: 'lemon' }
])
const onChange = ev => {
const res = ev.detail.value.map(x => {
return fruits.find(y => x === y.value)!.name
})
console.log(res.join(' '))
}
</script>