Tui
快速开始
组件文档
更新日志
0.7.2
🌙 深色模式
TsRadio 单选框
在一组备选项中进行单选
基础用法
单选框的基本用法
选项1
选项2
示例代码
vue
禁用状态
单选框的不可用状态
禁用
选中且禁用
示例代码
vue
单选框组
适用于在多个互斥的选项中选择的场景
选项1
选项2
选项3
示例代码
vue
按钮样式
按钮样式的单选组合
选项1
选项2
选项3
示例代码
vue
按钮填充
通过
fill
设置按钮的填充颜色
北京
广州
上海
重庆
北京
广州
上海
重庆
示例代码
vue
按钮大小
支持
small
medium
,
large
三种尺寸, 默认是
medium
。
北京
广州
上海
重庆
北京
广州
上海
重庆
北京
广州
上海
重庆
示例代码
vue
TsRadio Props 属性
属性名
说明
类型
可选值
默认值
版本说明
modelValue / v-model
绑定值
string | number | boolean
—
—
value
Radio 的 value
string | number | boolean
—
—
label
Radio 的 value(与 value 属性作用相同)
string | number | boolean
—
—
disabled
是否禁用
boolean
true / false
false
name
原生 name 属性
string
—
—
TsRadio Event 事件
事件名
说明
回调参数
版本说明
change
绑定值变化时触发
value: string | number | boolean
update:modelValue
当绑定值变化时触发(用于 v-model 双向绑定)
value: string | number | boolean
TsRadioGroup 属性
属性名
说明
类型
可选值
默认值
版本说明
modelValue | v-model
绑定值
string | number | boolean
—
—
disabled
是否禁用所有单选框
boolean
true / false
false
size
单选框组尺寸
string
large / default / small
default
radioGaps
单选框间距, 仅在radio模式下生效
[number, number] | [string, string]
[columnGap, rowGap]
[20, 8]
added 0.5.3
options
选项数据
Array
—
—
added 0.5.3
optionType
单选框组类型
string
radio / button
radio
added 0.5.3
textColor
按钮形式的 Radio 激活时的文本颜色
string
—
—
fill
按钮形式的 Radio 激活时的填充色
string
—
—
fillBorderColor
按钮形式的 Radio 激活时的边框填充色, 默认为 fill 的颜色, 如果 fill 使用渐变色, 则需要单独设置该属性
string
—
—
TsRadioGroup Event 事件
事件名
说明
回调参数
版本说明
change
绑定值变化时触发
value: string | number | boolean
update:modelValue
当绑定值变化时触发(用于 v-model 双向绑定)
value: string | number | boolean
RadioOption 参数
属性名
说明
类型
可选值
默认值
版本说明
label
绑定值变化时触发
string
added 0.5.3
value
绑定值变化时触发
string | number | boolean
added 0.5.3
基础用法
禁用状态
单选框组
按钮样式
按钮填充
按钮大小
TsRadio Props 属性
TsRadio Event 事件
TsRadioGroup 属性
TsRadioGroup Event 事件
RadioOption 参数