Skip to content
On this page

radio 单选组件

Element Plus Radio 组件文档

Hidden Title

基础用法:<s-radio v-model="value" :options="options" />

属性事件插槽简介

基础用法

成华主题

石景山主题

disabled

通常用法

使用type

多个属性的用法

高级写法:动态 label 和选项样式

Slots

属性

属性名说明类型默认值
title左侧标题文案string-
compTitleStyle左侧标题组件样式object{}
type数据类型,支持 '' / simple / booleanstring''
theme主题样式,支持 default / chenghua / shijingshanstringdefault
showType展示形式,支持 radio / buttonstringradio
options单选项列表,支持对象数组或基础值数组RadioItem[] / string[] / number[] / boolean[][]
border是否显示边框booleanfalse
size单选尺寸,支持顶层传入和全局默认配置'' / large / default / small''
value选项值字段名string / number / booleanvalue
label选项展示字段名string / number / booleanlabel
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 的 classstyle 会应用到对应的 Radio item;在 scoped 样式中可以配合 :deep() 修改内部按钮。
  • 显式传入的 option colorclassstyle 优先于 chenghuashijingshan 的默认主题样式。
  • customLabel 可读取外部 ref,动态生成每个选项的显示内容。
  • customDisabled 中的 option 是标准化后的当前选项,index 是选项下标,value 是按 value 属性解析后的实际值。

思云博智私有前端组件库