Radio (单选)
单选支持多种样式模式（如基础、按钮、列表、标签），适用于表单或页面中的单选功能。它允许自定义样式、禁用状态
支持平台
| 安卓 | ios | 鸿蒙 | web | 微信小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page main-class="p-30">
<t-section title="主题-type-开启动画" main-class="mb-30"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-radio :transition="true" icon="checkbox-blank-circle-fill" icon-class="ats-0.7 mt-4" @change="onchange">石榴</t-radio>
<t-radio type="primary" icon="checkbox-blank-circle-fill" icon-class="ats-0.7 mt-4"
:transition="true">橙子</t-radio>
<t-radio type="error" icon="checkbox-blank-circle-fill" icon-class="ats-0.7 mt-4" :transition="true">橙子</t-radio>
<t-radio type="warning" icon="checkbox-blank-circle-fill" icon-class="ats-0.7 mt-4"
:transition="true">梨子</t-radio>
</t-row>
<t-section title="size-large" main-class="mb-30 fww"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-radio :checked="true" type="p" size="large">石榴</t-radio>
<t-radio type="p" size="large">橙子</t-radio>
<t-radio type="p" size="large">香蕉</t-radio>
<t-radio type="p" size="large">橙子</t-radio>
</t-row>
<t-section title="size-medium" main-class="mb-30 fww"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-radio type="p" size="medium">石榴</t-radio>
<t-radio type="p" size="medium">橙子</t-radio>
<t-radio type="p" size="medium">香蕉</t-radio>
<t-radio type="p" size="medium" :disabled="true">橙子</t-radio>
</t-row>
<t-section title="size-small" main-class="mb-30 fww"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-radio type="p" size="small">石榴</t-radio>
<t-radio type="p" size="small">橙子</t-radio>
<t-radio type="p" size="small">香蕉</t-radio>
<t-radio type="p" size="small">橙子</t-radio>
</t-row>
<t-section title="size-mini" main-class="mb-30 fww"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-radio type="p" size="mini">石榴</t-radio>
<t-radio type="p" size="mini">橙子</t-radio>
<t-radio type="p" size="mini">香蕉</t-radio>
<t-radio type="p" size="mini">橙子</t-radio>
</t-row>
<t-row main-class="mb-30 fww tdb tdr">
<t-section title="自定义图标 自定义样式 " main-class="mb-30"></t-section>
<t-radio type="primary" :transition="true" main-class="s-80" label-class="c-#666">梨子</t-radio>
<t-radio type="warning" :transition="true" active-class="bg-blue" active-label-class="c-red s-20"
inactive-label-class="c-blue s-30">梨子</t-radio>
</t-row>
<t-section title="动态增删" main-class="mb-30"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-radio v-for="(item,index) in list" :key="index" icon="checkbox-blank-circle-fill"
active-icon-class="s-20" type="primary" size="l" :transition="true">{{item.label}}</t-radio>
</t-row>
<t-row>
<t-button size="mini" main-class="mr-20" type="p" @click="add">增加</t-button>
<t-button size="mini" type="e" @click="del">删除</t-button>
</t-row>
<t-section title="按钮模式" main-class="mtb-30"></t-section>
<t-row main-class="mb-30 fww tdb tdr">
<t-radio main-class="mrb-10" size="large" active-class="bg-#fff" inactive-class="bg-#000"
active-label-class="c-#000" inactive-label-class="c-#fff" type="primary" mode="button">石榴</t-radio>
<t-radio main-class="mrb-10" size="medium" type="warning" mode="button" effect="l">橙子</t-radio>
<t-radio main-class="mrb-10" size="small" type="success" mode="button" effect="d">香蕉</t-radio>
<t-radio main-class="mrb-10" size="mini" type="error" mode="button">橙子</t-radio>
<t-radio main-class="mrb-10" size="mini" type="warning" mode="button">梨子</t-radio>
</t-row>
<t-col main-class="mb-30 fww tdb tdr">
<t-radio main-class="mb-10" type="primary" mode="button" size="large">石榴</t-radio>
<t-radio main-class="mb-10" type="warning" mode="button" size="medium">橙子</t-radio>
<t-radio main-class="mb-10" type="success" mode="button" size="small">香蕉</t-radio>
<t-radio main-class="mb-10" type="error" mode="button" size="mini">橙子</t-radio>
<t-radio main-class="mb-10" type="info" mode="button" size="mini">梨子</t-radio>
</t-col>
<t-section title="列表模式" main-class="mtb-30"></t-section>
<t-col main-class="tdb tdr">
<t-radio size="l" type="primary" mode="cell" :transition="true">石榴</t-radio>
<t-radio size="l" type="warning" icon="thumb-up" active-icon-class="ats-0.7" mode="cell"
:transition="true">橙子</t-radio>
<t-radio size="l" type="success" icon="checkbox-blank-circle-fill" icon-class="ats-0.7"
mode="cell">香蕉</t-radio>
<t-radio size="l" type="error" mode="cell" :transition="true">橙子</t-radio>
<t-radio size="l" type="warning" mode="cell" :transition="true">梨子</t-radio>
</t-col>
</t-page>
</template>
<script setup>
import { TuiGuid } from '@/uni_modules/tui-plus'
type radiolisttype = {
value : string
label : string
}
const list = ref<radiolisttype[]>([
{ value: '1', label: '石榴' },
{ value: '2', label: '橙子' },
{ value: '3', label: '香蕉' },
{ value: '4', label: '橙子' },
{ value: '5', label: '梨子' }
] as radiolisttype[])
function add() {
list.value.push({
value: TuiGuid(10),
label: TuiGuid(10)
} as radiolisttype)
}
function del() {
list.value.splice(1, 1)
}
function onchange(e:boolean){
console.log(e)
}
</script>属性
| 名称 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
| type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
| disabled | Boolean | false | 组件是否禁用 | false, true |
| stop | Boolean | false | 是否阻止事件冒泡（Tui统一写法处理事件冒泡） | false, true |
| hover | Boolean | true | 是否有点击效果 | false, true |
| path | String | "" | 点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。 | - |
| mainClass | String | "" | 组件根节点的样式 | - |
| nativeClass | String | "" | 组件根节点原生样式 | - |
| effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
| transition | Boolean | false | 是否支持动画 | |
| border | Boolean | true | 是否显示边框 | |
| duration | Number | 200 | 动画时间 | |
| checked | Boolean | false | 选中状态 | |
| value | String | `` | 绑定的值 | |
| label | String | `` | 显示文本 | |
| labelClass | String | `` | 显示文本样式 | |
| patternsValue | string[] | [] | 配置文本内需要高亮显示的文字内容 | |
| patternsReg | any | `` | 高亮显示匹配模式 | |
| patternsColor | String | #ff0000 | 高亮文本显示的颜色 | |
| icon | String | check-fill | 图标 | |
| iconBoxClass | String | `` | 图标容器样式 | |
| activeClass | String | `` | 选中时的组件的样式 | |
| inactiveClass | String | `` | 未选中时的组件的样式 | |
| iconClass | String | `` | 图标样式 | |
| activeIconClass | String | `` | 选中时图标的样式 | |
| inactiveIconClass | String | `` | 未选中时图标的样式 | |
| activeLabelClass | String | `` | 选中时文本的样式 | |
| inactiveLabelClass | String | `` | 未选中时文本的样式 | |
| mode | String | radio | 显示模式 | button: 按钮样式radio: 单选框模式cell: 列表模式 |
事件
| 名称 | 返回参数 | 说明 |
|---|---|---|
| change | (e:boolean) | 选中状态化生变化时触发 |
插槽
| 名称 | 返回值 | 说明 |
|---|---|---|
| default | - |