Radio 单选框

用于在预设的一组选项中执行单项选择,并呈现选择结果。

单选框组件,用于在一组选项中选择单个值,需配合 re-radio-group 使用

演示

9:41

代码示例

<re-radio-group :value="baseValue" allow-uncheck @change="onBaseChange">
  <re-radio label="单选" value="0" />
  <re-radio label="单选" value="1" />
  <re-radio label="单选单选单选单选单选单选单选单选单选单选单选单选单选单选" value="2" />
  <re-radio label="单选" content="描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息" value="3" borderless />
  <re-radio-group value="0" borderless customStyle="flex-direction:row;flex-wrap:wrap;justify-content:space-between;background-color:#ffffff;padding-top:16px;padding-right:16px;padding-bottom:16px;padding-left:16px;">
  <re-radio class="demo-inline-radio" :block="false" :borderless="true" label="单选标题" value="0" />
  <re-radio class="demo-inline-radio" :block="false" :borderless="true" label="单选标题" value="1" />
  <re-radio class="demo-inline-radio" :block="false" :borderless="true" label="上限四字" value="2" />
  <re-radio-group value="radio1" :disabled="true">
  <re-radio label="单选" value="radio1" />
  <re-radio label="单选" value="radio2" borderless />
  <re-radio :checked="lineChecked" allow-uncheck icon="line" label="单选" @change="onLineThemeChange" />
  <re-radio :checked="dotChecked" allow-uncheck icon="dot" label="单选" borderless @change="onDotThemeChange" />
  <re-radio :checked="alignLeftChecked" allow-uncheck label="单选" @change="onAlignLeftChange" />
  <re-radio :checked="alignRightChecked" allow-uncheck label="单选" placement="right" borderless @change="onAlignRightChange" />
  <re-radio-group :value="cardValue" allow-uncheck @change="onCardChange" customStyle="border-radius:12px;overflow:hidden;">
  <re-radio label="单选" value="radio1" />
  <re-radio label="单选" value="radio2" />
  <re-radio label="单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行" value="radio3" borderless />
  <re-radio-group :value="specialValue" allow-uncheck borderless icon="none" @change="onSpecialChange">
  <re-radio label="单选" content="描述信息描述信息描述信息描述信息描述信息" value="0" icon="none" :borderless="true" />
  <re-radio label="单选" content="描述信息描述信息描述信息描述信息描述信息" value="1" icon="none" :borderless="true" />
  <re-radio label="单选" content="描述信息描述信息描述信息描述信息描述信息" value="2" icon="none" :borderless="true" />
  <re-radio-group :value="specialHorizontalValue" borderless icon="none" customStyle="flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:16px;" @change="onSpecialHorizontalChange">
  <re-radio label="单选" value="0" icon="none" :borderless="true" />
  <re-radio label="单选" value="1" icon="none" :borderless="true" />
  <re-radio label="单选" value="2" icon="none" :borderless="true" />

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-radio />。

API

Radio Props

名称类型默认值描述必传
checkedbooleanfalse-N
disabledbooleanfalse是否禁用N
labelstring''-N
contentstring''内容文字N
valuestring | number''当前值N
namestring''标识名称N
blockbooleantrue是否为块级元素,占满父容器宽度N
borderlessbooleanfalse-N
placementstring''-N
iconstring''图标,支持字体图标名称或图片地址N
allowUncheckbooleanfalse-N
readonlybooleanfalse-N
customStylestring''自定义样式N

Radio Events

名称参数描述
changechecked: boolean, value: string值变化时触发
click-点击时触发

Radio Slots

名称描述
default默认插槽
label-
content-

RadioGroup Props

名称类型默认值描述必传
valuestring | number''当前值N
disabledbooleanfalse是否禁用N
readonlybooleanfalse-N
borderlessbooleanfalse-N
placementstring'left'-N
iconstring'circle'图标,支持字体图标名称或图片地址N
allowUncheckbooleanfalse-N
optionsArray<UTSJSONObject>null as unknown as Array<UTSJSONObject>-N
customStylestring''自定义样式N

RadioGroup Events

名称参数描述
changevalue: string值变化时触发

RadioGroup Slots

名称描述
default默认插槽