Element-UI源码简析——Radio单选框（下）

前端

2023-12-08 15:27:50

Element-UI RadioGroup 深入探究：管理单选状态的核心组件

Element-UI RadioGroup 组件是 Radio 组件的容器，负责协调其中的单选按钮，并管理它们的选中状态。本篇文章将深入探讨 RadioGroup 组件的内部运作，了解其职责、结构和实现细节。

RadioGroup 的职责

RadioGroup 组件主要负责：

维护选中状态 ：确保同一时间只有一个单选按钮处于选中状态。
提供 v-model 绑定 ：对外提供选中项的值。
控制整体样式和行为 ：通过 size、disabled 等属性控制 RadioGroup 的外观和行为。

RadioGroup 的结构

RadioGroup 组件的 HTML 结构如下：

<radio-group v-model="radioValue">
  <radio-button label="Option 1"></radio-button>
  <radio-button label="Option 2"></radio-button>
</radio-group>

RadioGroup 包含一个带有 role="radiogroup" 的 div 容器，其中包裹着多个 Radio 按钮。

RadioGroup 的事件处理

RadioGroup 提供了以下主要事件：

change ：当选中项发生改变时触发。
input ：当用户与 RadioGroup 交互时触发，无论选中项是否发生改变。

RadioGroup 的实现

RadioGroup 的实现主要位于 <src/radio-group.vue> 文件中。

模板

RadioGroup 的模板十分简洁：

<div class="el-radio-group" role="radiogroup">
  <slot></slot>
</div>

数据

RadioGroup 的数据主要包含：

modelValue ：存储选中项的值。
options ：包含 RadioGroup 中所有 Radio 按钮的数组。

方法

RadioGroup 提供了以下主要方法：

setValue() ：设置选中项的值。
handleRadioChange() ：处理 Radio 按钮选中状态变化的函数。
focus() ：聚焦 RadioGroup。
blur() ：取消 RadioGroup 的聚焦。

代码示例

在实际使用中，可以如下使用 RadioGroup：

<template>
  <div>
    <radio-group v-model="selectedValue">
      <radio-button label="Option 1"></radio-button>
      <radio-button label="Option 2"></radio-button>
    </radio-group>
    <p>Selected value: {{ selectedValue }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedValue = ref('');

    return {
      selectedValue,
    };
  },
};
</script>