el-radio详解

本文详细介绍了Element UI中的单选框组件，包括基本用法、样式定制、单选框组的使用、尺寸调节以及绑定值变化事件的处理。通过示例代码展示了如何创建和操作单选框，强调了单选框组在代码结构清晰和管理上的优势。

一.改变样式

改变框的大小：：deep（.el-radio.el-radio--large .el-radio__inner）

改变字体大小：：deep（.el-radio.el-radio--large .el-radio__label）

二.el-radio 属性详解

1. v-model / model-value:

   • 用途: 双向绑定单选框的值。

2. label:

   • 用途: 当 el-radio 作为数组的一部分时，label 表示该单选框对应的值。

3. disabled:

   • 用途: 是否禁用该单选框。
   • 默认值: false

4. border:

   • 用途: 是否显示边框。
   • 默认值: false

5. size:

   • 用途: 设置单选框的尺寸，可选值为 large、default、small。
   • 默认值: default

6. name:

   • 用途: 单选框的名称，主要用于表单提交。

7. tabindex:

   • 用途: 设置单选框的 tabindex。

8. id:

   • 用途: 单选框的唯一标识符。

9. fill:

   • 用途: 单选框选中时的颜色。
   • 默认值: #409EFF

10. text-color:

    • 用途: 单选框选中时的文字颜色。
    • 默认值: #FFFFFF

11. validate-event:

    • 用途: 是否在输入框失去焦点时触发表单验证。
    • 默认值: true

12. auto-width:

    • 用途: 是否自动调整宽度。
    • 默认值: false

三.实例

<template>
  <div>
    <h2>Radio 示例</h2>
    
    <!-- 基本用法 -->
    <el-radio v-model="basicSelected" label="Option 1">选项1</el-radio>
    <el-radio v-model="basicSelected" label="Option 2">选项2</el-radio>
    <!-- 使用 v-model 进行双向数据绑定，label 属性指定每个单选框的值 -->

    <!-- 禁用状态 -->
    <el-radio v-model="disabledSelected" label="Option 1" disabled>禁用状态1</el-radio>
    <el-radio v-model="disabledSelected" label="Option 2" disabled>禁用状态2</el-radio>
    <!-- disabled 属性设置为 true 时，单选框将被禁用 -->

    <!-- 边框 -->
    <el-radio v-model="borderSelected" label="Option 1" border>带边框1</el-radio>
    <el-radio v-model="borderSelected" label="Option 2" border>带边框2</el-radio>
    <!-- border 属性设置为 true 时，单选框会显示边框 -->

    <!-- 尺寸 -->
    <el-radio v-model="sizeSelected" label="Option 1" size="large">大尺寸</el-radio>
    <el-radio v-model="sizeSelected" label="Option 2" size="default">默认尺寸</el-radio>
    <el-radio v-model="sizeSelected" label="Option 3" size="small">小尺寸</el-radio>
    <!-- size 属性设置单选框的尺寸，可选值为 large、default、small -->

    <!-- 名称 -->
    <el-radio v-model="nameSelected" label="Option 1" name="exampleName">名称属性1</el-radio>
    <el-radio v-model="nameSelected" label="Option 2" name="exampleName">名称属性2</el-radio>
    <!-- name 属性设置单选框的名称，主要用于表单提交 -->

    <!-- tabindex -->
    <el-radio v-model="tabindexSelected" label="Option 1" tabindex="1">Tabindex 属性1</el-radio>
    <el-radio v-model="tabindexSelected" label="Option 2" tabindex="2">Tabindex 属性2</el-radio>
    <!-- tabindex 属性设置单选框的 tabindex -->

    <!-- id -->
    <el-radio v-model="idSelected" label="Option 1" id="uniqueId1">ID 属性1</el-radio>
    <el-radio v-model="idSelected" label="Option 2" id="uniqueId2">ID 属性2</el-radio>
    <!-- id 属性设置单选框的唯一标识符 -->

    <!-- 自定义选中和未选中颜色 -->
    <el-radio v-model="colorSelected" label="Option 1" fill="#FF0000" text-color="#00FF00">自定义颜色1</el-radio>
    <el-radio v-model="colorSelected" label="Option 2" fill="#0000FF" text-color="#FFFF00">自定义颜色2</el-radio>
    <!-- fill 和 text-color 属性分别设置选中时的背景色和文字颜色 -->

    <!-- 验证事件 -->
    <el-radio v-model="validateEventSelected" label="Option 1" :validate-event="false">禁用验证事件1</el-radio>
    <el-radio v-model="validateEventSelected" label="Option 2" :validate-event="false">禁用验证事件2</el-radio>
    <!-- validate-event 属性设置是否在输入框失去焦点时触发表单验证 -->

    <!-- 自动调整宽度 -->
    <el-radio v-model="autoWidthSelected" label="Option 1" auto-width>自动调整宽度1</el-radio>
    <el-radio v-model="autoWidthSelected" label="Option 2" auto-width>自动调整宽度2</el-radio>
    <!-- auto-width 属性设置是否自动调整宽度 -->

    <!-- 当前值展示 -->
    <p>当前值: {{ basicSelected }}</p>
  </div>
</template>

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

// 基本值
const basicSelected = ref('Option 1')

// 禁用状态
const disabledSelected = ref('Option 1')

// 边框
const borderSelected = ref('Option 1')

// 尺寸
const sizeSelected = ref('Option 1')

// 名称
const nameSelected = ref('Option 1')

// tabindex
const tabindexSelected = ref('Option 1')

// id
const idSelected = ref('Option 1')

// 自定义选中和未选中颜色
const colorSelected = ref('Option 1')

// 验证事件
const validateEventSelected = ref('Option 1')

// 自动调整宽度
const autoWidthSelected = ref('Option 1')
</script>