Appearance
radio 单选组件
Hidden Title
基础用法:
<s-radio v-model="value" :options="options" />属性事件插槽简介
基础用法
成华主题
石景山主题
disabled
通常用法
使用type
多个属性的用法
高级写法:动态 label 和选项样式
Slots
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 左侧标题文案 | string | - |
compTitleStyle | 左侧标题组件样式 | object | {} |
type | 数据类型,支持 '' / simple / boolean | string | '' |
theme | 主题样式,支持 default / chenghua / shijingshan | string | default |
showType | 展示形式,支持 radio / button | string | radio |
options | 单选项列表,支持对象数组或基础值数组 | RadioItem[] / string[] / number[] / boolean[] | [] |
border | 是否显示边框 | boolean | false |
size | 单选尺寸,支持顶层传入和全局默认配置 | '' / large / default / small | '' |
value | 选项值字段名 | string / number / boolean | value |
label | 选项展示字段名 | string / number / boolean | label |
customLabel | 自定义显示内容,参数为 { option, index, value } | (context) => any | - |
customDisabled | 自定义禁用,参数为 { option, index, value } | (context) => boolean | - |
说明
- 组件底层基于
el-radio-group封装,支持透传原生属性和事件。 options可以传{ label, value }对象数组,也可以直接传 string / number / boolean 基础值数组,基础值会自动转换为{ label, value }。type="boolean"时会自动生成true / false两个选项。showType="button"时,option 的color可以覆盖当前项的选中背景色,其余样式保持 button 模式不变。- option 的
type会同时设置选中、hover、边框和文字颜色,并使用当前theme对应的语义色;同时传入color时,color优先覆盖选中主色。 options支持直接传入 computed;模板会自动解包,computed 内可以读取外部ref动态生成 label。- option 的
class和style会应用到对应的 Radio item;在 scoped 样式中可以配合:deep()修改内部按钮。 - 显式传入的 option
color、class、style优先于chenghua、shijingshan的默认主题样式。 customLabel可读取外部ref,动态生成每个选项的显示内容。customDisabled中的option是标准化后的当前选项,index是选项下标,value是按value属性解析后的实际值。