TulipRadio 单选
单选框
基本用法
用 checked 判断是否选中
<template>
<tu-space item-style="display: flex;" align="center">
<tu-radio
:checked="checkedValue === '1'"
value="1"
@change="handleChange"
>Option 1</tu-radio>
<tu-radio
:checked="checkedValue === '2'"
value="2"
label="Option 2"
@change="handleChange"
/>
<tu-radio
:checked="checkedValue === '3'"
value="3"
@change="handleChange"
:disabled="disabled"
>Option 3</tu-radio>
<tu-switch v-model:value="disabled">
<template #checked>启用</template>
<template #unchecked>禁用</template>
</tu-switch>
</tu-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checkedValue = ref('')
const disabled = ref(false)
function handleChange(e: Event) {
checkedValue.value = (e.target as HTMLInputElement).value
}
</script>展开源码
选项组
<template>
<tu-radio-group v-model:value="checkedValue">
<tu-space>
<tu-radio v-for="option in options" :key="option" :value="option">
{{ option }}
</tu-radio>
</tu-space>
</tu-radio-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checkedValue = ref('')
const options = ref(['Option 1', 'Option 2', 'Option 3'])
</script>
展开源码
按钮组
<template>
<tu-radio-group v-model:value="checkedValue">
<tu-radio-button
v-for="option, index in options"
:key="option"
:value="option"
:disabled="index === 3"
>
{{ option }}
</tu-radio-button>
</tu-radio-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checkedValue = ref('')
const options = ref(['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'])
</script>
展开源码
大小
<template>
<tu-radio-group v-model:value="checkedValue" name="radiogroup">
<tu-space align="end">
<tu-radio :value="1" :checked="checkedValue === 1" size="small">hi</tu-radio>
<tu-radio :value="2" :checked="checkedValue === 2" size="medium">hi</tu-radio>
<tu-radio :value="3" :checked="checkedValue === 3" size="large">hi</tu-radio>
</tu-space>
</tu-radio-group>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checkedValue = ref(1)
</script>
展开源码
按钮组大小
<template>
<tu-space vertical>
<tu-radio-group v-model:value="checkedValue" size="small">
<tu-radio-button v-for="option in options" :key="option" :value="option">
{{ option }}
</tu-radio-button>
</tu-radio-group>
<tu-radio-group v-model:value="checkedValue">
<tu-radio-button v-for="option in options" :key="option" :value="option">
{{ option }}
</tu-radio-button>
</tu-radio-group>
<tu-radio-group v-model:value="checkedValue" size="large">
<tu-radio-button v-for="option in options" :key="option" :value="option">
{{ option }}
</tu-radio-button>
</tu-radio-group>
</tu-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checkedValue = ref('')
const options = ref(['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'])
</script>
展开源码
Radio，RadioButton 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 是否选中 | boolean | undefined |
| value | 绑定值 | string | number | boolean | undefined |
| label | 标签内容 | string | undefined |
| disabled | 是否禁用 | boolean | false |
| size | Radio 的大小 | 'small' | 'medium' | 'large' | 'medium' |
RadioGroup 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 当前选中 Radio 的值 | string | number | boolean | undefined |
| button-style | RadioButton 的风格样式 | 'outline' | 'solid' | 'outline' |
| size | Radio 的大小 | 'small' | 'medium' | 'large' | 'medium' |
Radio 方法
| 名称 | 说明 | 类型 |
|---|---|---|
| focus | 聚焦 | () => void |
| blur | 失焦 | () => void |