Skip to content
On this page

radio 单选组件 ​

Element Plus Radio 组件文档

Hidden Title ​

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

属性事件插槽简介 ​

基础用法 ​

主题(theme 默认值:default) ​

disabled ​

通常用法 ​

使用type ​

多个属性的用法(variant 默认值:radio) ​

高级写法:动态 label 和选项样式(variant 默认值:radio) ​

Slots ​

选项间距(默认值:沿用 Element Plus 样式) ​

属性 ​

属性名说明类型默认值
title左侧文字标题,普通和 button 模式样式一致string-
compTitleStyle标题文字的自定义样式object{}
type数据类型,支持 '' / simple / booleanstring''
theme主题样式,支持 default / chenghua / shijingshan / sybzstringdefault
variant展示形式,支持 radio / buttonstringradio
options单选项列表,支持对象数组或基础值数组RadioItem[] / string[] / number[] / boolean[][]
border是否显示边框booleanfalse
gap单选项间距,数字按 px 处理string / number-
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 两个选项。
  • variant="button" 时,option 的 color 可以覆盖当前项的选中背景色,其余样式保持 button 模式不变。
  • 显式设置 gap 后,组件会清除选项的默认外边距并允许自动换行;未设置时保留 Element Plus 的默认间距。
  • 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 属性解析后的实际值。

思云博智私有前端组件库