Evokerradio
单选。
Props
| 参数 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| value | string | 否 | radio 标识。当该 radio 选中时，radio-group 的 change 事件会携带 radio 的 value | |
| checked | boolean | false | 否 | 当前是否选中 |
| disabled | boolean | false | 否 | 是否禁用 |
| color | color | #1989fa | 否 | radio 的颜色 |
Example
vue
<template>
<radio-group @change="onChange">
<radio
v-for="fruit of fruits"
:key="fruit.value"
:value="fruit.value"
:checked="fruit.checked"
>{{ fruit.name }}</radio
>
</radio-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 value = ev.detail.value
console.log(fruits.find(item => item.value === value)!.name)
}
</script>