Radio 单选框 ​

在一组备选项中进行单选

WARNING

label 作为 value 来使用已经被 废弃, 建议label 只用来表示展示的文字，这个被废弃的用法将会在 3.0.0 版本被移除，请考虑使用新 API 替换.

TIP

新的 API value 已在 2.6.0 版本添加，文档中的示例都将使用 value。 如果您使用的版本 低于 2.6.0，请参考：

vue
<template>
  <el-radio-group v-model="radio1">
    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
    <el-radio value="Value 1">Option 1</el-radio>
    <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
    <el-radio label="Label 2 & Value 2">Option 2</el-radio>
  </el-radio-group>
</template>
ts
import { createApp } from 'vue'
import { Radio as ElRadio, RadioButton as ElRadioButton, RadioGroup as ElRadioGroup } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElRadio)
app.use(ElRadioButton)
app.use(ElRadioGroup)

基础用法 ​

单选框不应该有太多的可选项， 如果你有很多的可选项你应该使用选择框而不是单选框。

<template>
  <div class="mb-2 ml-4">
    <el-radio-group v-model="radio1">
      <el-radio value="1" size="large">Option 1</el-radio>
      <el-radio value="2" size="large">Option 2</el-radio>
    </el-radio-group>
  </div>
  <div class="my-2 ml-4">
    <el-radio-group v-model="radio2">
      <el-radio value="1">Option 1</el-radio>
      <el-radio value="2">Option 2</el-radio>
    </el-radio-group>
  </div>
  <div class="my-4 ml-4">
    <el-radio-group v-model="radio3">
      <el-radio value="1" size="small">Option 1</el-radio>
      <el-radio value="2" size="small">Option 2</el-radio>
    </el-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Radio as ElRadio, RadioGroup as ElRadioGroup } from '@szhn/dh-design-pc'


const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
</script>

禁用状态 ​

disabled 属性可以用来控制单选框的禁用状态。

<template>
  <el-radio v-model="radio" disabled value="disabled">Option A</el-radio>
  <el-radio v-model="radio" disabled value="selected and disabled">
    Option B
  </el-radio>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Radio as ElRadio } from '@szhn/dh-design-pc'


const radio = ref('selected and disabled')
</script>

单选框组 ​

适用于在多个互斥的选项中选择的场景

<template>
  <el-radio-group v-model="radio">
    <el-radio :value="3">Option A</el-radio>
    <el-radio :value="6">Option B</el-radio>
    <el-radio :value="9">Option C</el-radio>
  </el-radio-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Radio as ElRadio, RadioGroup as ElRadioGroup } from '@szhn/dh-design-pc'


const radio = ref(3)
</script>

带有边框 ​

<template>
  <div>
    <el-radio-group v-model="radio1">
      <el-radio value="1" size="large" border>Option A</el-radio>
      <el-radio value="2" size="large" border>Option B</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio2">
      <el-radio value="1" border>Option A</el-radio>
      <el-radio value="2" border>Option B</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio value="1" border>Option A</el-radio>
      <el-radio value="2" border disabled>Option B</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" size="small" disabled>
      <el-radio value="1" border>Option A</el-radio>
      <el-radio value="2" border>Option B</el-radio>
    </el-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Radio as ElRadio, RadioGroup as ElRadioGroup } from '@szhn/dh-design-pc'


const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('1')
</script>

Options 属性 (2.11.2) ​

<template>
  <el-radio-group v-model="radio" :options="options" :props="props" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { RadioGroup as ElRadioGroup } from '@szhn/dh-design-pc'


const radio = ref(3)
const props = { value: 'id', label: 'name', disabled: 'unable' }
const options = [
  {
    id: 3,
    name: 'Option A',
  },
  {
    id: 6,
    name: 'Option B',
  },
  {
    id: 9,
    name: 'Option C',
    unable: true,
  },
]
</script>

单选按钮 ​

带有按钮组视觉效果的单选框

<template>
  <div>
    <el-radio-group v-model="radio" size="large" fill="#409eff">
      <el-radio-button label="New York" value="New York" />
      <el-radio-button label="Washington" value="Washington" />
      <el-radio-button label="Los Angeles" value="Los Angeles" />
      <el-radio-button label="Chicago" value="Chicago" />
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio" text-color="#fff" fill="#6c6cff">
      <el-radio-button label="New York" value="New York" />
      <el-radio-button label="Washington" value="Washington" />
      <el-radio-button label="Los Angeles" value="Los Angeles" />
      <el-radio-button label="Chicago" value="Chicago" />
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio" size="small">
      <el-radio-button label="New York" value="New York" />
      <el-radio-button label="Washington" value="Washington" disabled />
      <el-radio-button label="Los Angeles" value="Los Angeles" />
      <el-radio-button label="Chicago" value="Chicago" />
    </el-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { RadioButton as ElRadioButton, RadioGroup as ElRadioGroup } from '@szhn/dh-design-pc'


const radio = ref('New York')
</script>

Radio API ​

Radio Attributes ​

属性名说明类型默认值
model-value / v-model选中项绑定值string / number / boolean—
value 2.6.0单选框的值string / number / boolean:::
label单选框的 label 如果value没有值， label则作为value使用string / number / boolean:::
disabled是否禁用单选框booleanfalse
border是否显示边框booleanfalse
size单选框的尺寸enum—
name原始 name 属性string—

Radio Events ​

事件名说明类型
change绑定值变化时触发的事件Function

Radio Slots ​

插槽名说明
default自定义默认内容

RadioGroup API ​

RadioGroup Attributes ​

属性名说明类型默认值
model-value / v-model绑定值string / number / boolean—
size单选框按钮或边框按钮的大小stringdefault
disabled是否禁用booleanfalse
validate-event输入时是否触发表单的校验booleantrue
text-color按钮形式的 Radio 激活时的文本颜色string#ffffff
fill按钮形式的 Radio 激活时的填充色和边框色string#409eff
aria-label a11y 2.7.2与 RadioGroup 中的 aria-label 属性相同string—
name原生 name 属性string—
id原生 id 属性string—
label a11y deprecated与 RadioGroup 中的 aria-label 属性相同string—
options 2.11.2选项的数据源， value 的 key 和 label 和 disabled可以通过 props自定义.array—
props 2.11.2options 的配置object{value: 'value', label: 'label', disabled: 'disabled'}
type 2.11.5用于渲染选项的组件类型（例如 'button'）enum'radio'

RadioGroup Events ​

事件名说明类型
change绑定值变化时触发的事件Function

RadioGroup Slots ​

插槽名说明子标签
default自定义默认内容Radio / RadioButton

RadioButton API ​

RadioButton Attributes ​

名称详情类型默认
value 2.6.0单选框的值string / number / boolean—
label单选框的 label 如果没有 value， label则作为value使用string / number / boolean—
disabled是否禁用单选框booleanfalse
name原生 name 属性string—

RadioButton Slots ​

插槽名说明
default默认插槽内容