程序员scholar
  • Element-UI
  • 表单组件
scholar
2024-08-12
目录

单选框（Radio）

# 单选框（Radio）

Element-UI 的单选框组件包括 Radio、Radio Group 和 Radio Button，用于在一组选项中选择一个。通过简单的属性和事件配置，可以实现多种功能和样式。

提示

单选框（Radio）官方文档：https://element.eleme.cn/#/zh-CN/component/radio (opens new window)

# 1. 单选框基本使用

在 Vue 组件中使用 <el-radio> 标签即可创建一个单选框。要使用 Radio 组件，只需要设置 v-model 绑定变量，选中意味着变量的值为相应 Radio label 属性的值，label 可以是 String、Number 或 Boolean。

基本语法

<template>
  <el-radio v-model="radio" label="1">备选项 1</el-radio>
  <el-radio v-model="radio" label="2">备选项 2</el-radio>
</template>

<script>
export default {
  data() {
    return {
      radio: '1' // 初始绑定值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 切换机制：通过 v-model 绑定的变量 radio 控制当前选中的单选框，变量值为选中单选框的 label 值。当选择不同的单选框时，radio 的值自动更新为对应的 label。
  • image-20240807165600113

# Radio 属性

参数 说明 类型 可选值 默认值
value / v-model 绑定值 string / number / boolean — —
label Radio 的 value string / number / boolean — —
disabled 是否禁用 boolean — false
border 是否显示边框 boolean — false
size Radio 的尺寸，仅在 border 为真时有效 string medium / small / mini —
name 原生 name 属性 string — —

# Radio 事件

事件名称 说明 回调参数
input 绑定值变化时触发的事件 选中的 Radio label 值

# 2. 常见单选框示例

# 基础单选框

使用 v-model 绑定一个变量，通过切换 label 值来选择不同的单选框。

<template>
  <el-radio v-model="radioValue" label="Option 1">选项 1</el-radio>
  <el-radio v-model="radioValue" label="Option 2">选项 2</el-radio>
</template>

<script>
export default {
  data() {
    return {
      radioValue: 'Option 1' // 初始选中的值
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

image-20240807165825790

# 禁用状态的单选框

通过 disabled 属性禁用某个单选框，使其不可选择。

<template>
  <el-radio v-model="radioValue" label="Option 1" disabled>选项 1</el-radio>
  <el-radio v-model="radioValue" label="Option 2" disabled>选项 2</el-radio>
</template>
1
2
3
4

image-20240807165857153

# 带边框的单选框

通过 border 属性使单选框带有边框，增加视觉效果。

<template>
  <el-radio v-model="radioValue" label="Option 1" border>选项 1</el-radio>
  <el-radio v-model="radioValue" label="Option 2" border>选项 2</el-radio>
</template>
1
2
3
4

image-20240807170144770

# 单选框中的 input 事件

在单个 Radio 上，当用户选择某个选项时，会触发 input 事件。这个事件的回调参数是选中的 Radio 的 label 值。

<template>
  <div>
    <el-radio v-model="radioValue" label="Option 1" @input="handleInput">选项 1</el-radio>
    <el-radio v-model="radioValue" label="Option 2" @input="handleInput">选项 2</el-radio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioValue: 'Option 1' // 初始选中的值
    };
  },
  methods: {
    handleInput(value) {
      console.log('当前选中的值:', value);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这个示例中，handleInput 方法会在每次选项改变时被调用，并输出当前选中的 label 值。

# 3. 单选框组

Radio Group 用于将一组 Radio 组件组合在一起，便于管理和使用。通过 v-model 绑定一个公共变量，控制选中项。

# Radio Group 属性

参数 说明 类型 可选值 默认值
value / v-model 绑定值 string / number / boolean — —
size 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 string medium / small / mini —
disabled 是否禁用 boolean — false
text-color 按钮形式的 Radio 激活时的文本颜色 string — #ffffff
fill 按钮形式的 Radio 激活时的填充色和边框色 string — #409EFF

# Radio Group 事件

事件名称 说明 回调参数
input 绑定值变化时触发的事件 选中的 Radio label 值

# 4. 单选框组示例

# 基础单选框组

使用 v-model 将一组单选框绑定到一个公共变量上，实现切换。

<template>
  <el-radio-group v-model="radioValue">
    <el-radio label="Option 1">选项 1</el-radio>
    <el-radio label="Option 2">选项 2</el-radio>
    <el-radio label="Option 3">选项 3</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radioValue: 'Option 1' // 当前选中的选项
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

image-20240807170212701

# 带边框的单选框组

通过 border 和 size 属性设置单选框组的样式和尺寸。

<template>
  <el-radio-group v-model="radioValue" size="small">
    <el-radio label="Option 1" border>选项 1</el-radio>
    <el-radio label="Option 2" border>选项 2</el-radio>
    <el-radio label="Option 3" border>选项 3</el-radio>
  </el-radio-group>
</template>
1
2
3
4
5
6
7

image-20240807170234545

# 按钮形式的单选框组

使用 el-radio-button 实现按钮形式的单选框组，适合用于工具栏等场景。

<template>
  <el-radio-group v-model="radioValue" size="medium" text-color="#ff0000" fill="#ffcccc">
    <el-radio-button label="Option 1">选项 1</el-radio-button>
    <el-radio-button label="Option 2">选项 2</el-radio-button>
    <el-radio-button label="Option 3">选项 3</el-radio-button>
  </el-radio-group>
</template>
1
2
3
4
5
6
7

image-20240807170304136

# 单选框组（Radio Group）中的 input 事件

Radio Group 组件也会在绑定值变化时触发 input 事件，这个事件的回调参数是选中的 Radio 的 label 值。

<template>
  <div>
    <el-radio-group v-model="radioGroupValue" @input="handleGroupInput">
      <el-radio label="Option 1">选项 1</el-radio>
      <el-radio label="Option 2">选项 2</el-radio>
      <el-radio label="Option 3">选项 3</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioGroupValue: 'Option 1' // 当前选中的选项
    };
  },
  methods: {
    handleGroupInput(value) {
      console.log('当前选中的组值:', value);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在 Radio Group 中，handleGroupInput 方法会在用户选择不同选项时被调用，输出选中的 label 值。

# 5. 单选按钮

Radio Button 提供了一种按钮风格的单选框形式，通常用于更具交互性的场景。

# Radio Button 属性

参数 说明 类型 可选值 默认值
label Radio 的 value string / number — —
disabled 是否禁用 boolean — false
name 原生 name 属性 string — —

# 6. 单选按钮示例

# 基础按钮单选框

使用 el-radio-button 代替普通的 el-radio，实现按钮形式的单选框。

<template>
  <el-radio-group v-model="radioValue">
    <el-radio-button label="Option 1">上海</el-radio-button>
    <el-radio-button label="Option 2">广东</el-radio-button>
    <el-radio-button label="Option 3">深圳</el-radio-button>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radioValue: 'Option 1' // 当前选中的按钮
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

image-20240807171222244

# 禁用状态的按钮单选框

通过 disabled 属性禁用整个按钮组或其中的某个按钮。

<template>
  <el-radio-group v-model="radioValue" disabled>
    <el-radio-button label="Option 1">选项 1</el-radio-button>
    <el-radio-button label="Option 2">选项 2</el-radio-button>
    <el-radio-button label="Option 3">选项 3</el-radio-button>
  </el-radio-group>
</template>
1
2
3
4
5
6
7

image-20240807170502962

# 单选按钮（Radio Button）中的 input 事件

单选按钮形式的组件也可以通过 input 事件来监控用户选择的变化，这个事件的回调参数是选中的 Radio 的 label 值。

<template>
  <div>
    <el-radio-group v-model="radioButtonValue" @input="handleButtonInput">
      <el-radio-button label="Option 1">选项 1</el-radio-button>
      <el-radio-button label="Option 2">选项 2</el-radio-button>
      <el-radio-button label="Option 3">选项 3</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioButtonValue: 'Option 1' // 当前选中的按钮
    };
  },
  methods: {
    handleButtonInput(value) {
      console.log('当前选中的按钮值:', value);
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

handleButtonInput 方法会在用户点击不同的按钮时触发，输出当前选中的按钮的 label 值。

总结

  • 多样化的单选框类型：Element-UI 提供了普通、带边框、按钮形式的单选框，适应不同的应用场景。

  • 灵活的属性和事件：通过 v-model 绑定值，支持单选框和单选框组的状态管理，同时支持多种样式配置。

  • 良好的交互体验：支持禁用、尺寸调整和自定义颜色，增强用户的交互体验。

编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
文字链接（Link）
多选框（Checkbox）

← 多选框（Checkbox）→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar