Element Plus 实例详解(八)___Radio 单选框
本文目录:
扫描二维码关注公众号,回复:
14851181 查看本文章
一、前言
Element Plus Radio 单选框,用于在一组备选项中进行单选。
二、搭建Element Plus试用环境
1、搭建Vue3项目(基于Vite + Vue)
安装时请选择支持Typescript,本实例我安装在(C:\00program\vue\vuelearn\vueviteproject1)目录中,具体方法详见下面文章:
安装完成后打开浏览器:http://localhost:5173/ ,能正常显示欢迎页面:
2、安装Element Plus
- NPM:npm install element-plus --save
详细参考:
Element Plus 实例详解系列(一)__安装设置https://blog.csdn.net/weixin_69553582/article/details/129701286
三、Element Plus Radio 单选框功能试用
1、基础用法
- 单选框不应该有太多的可选项, 如果有很多的可选项应该使用选择框而不是单选框。
- 要使用 Radio 组件,只需要设置v-model绑定变量,
- 选中意味着变量的值为相应 Radio label属性的值, label可以是String、Number 或 Boolean。
实现效果:
完整代码:
<template>
<h3>Radio 单选框</h3>
<div class="mb-2 flex items-center text-sm" style="padding:5px;text-align:left;width:500px;font-size:large;">
<p>1、Radio 单选框size="large":</p>
<el-radio-group v-model="radio1" class="ml-4">
<el-radio label="1" size="large">选项 1</el-radio>
<el-radio label="2" size="large">选项 2</el-radio>
<el-radio label="3" size="large">选项 3</el-radio>
<el-radio label="4" size="large">选项 4</el-radio>
</el-radio-group>
</div>
<div class="my-2 flex items-center text-sm" style="padding: 5px; text-align: left; width: 500px; font-size: large;">
<p>2、Radio 单选框没有设size选项:</p>
<el-radio-group v-model="radio2" class="ml-4">
<el-radio label="1">选项 1</el-radio>
<el-radio label="2">选项 2</el-radio>
<el-radio label="3">选项 3</el-radio>
<el-radio label="4">选项 4</el-radio>
</el-radio-group>
</div>
<div class="my-4 flex items-center text-sm" style="padding: 5px; text-align: left; width: 500px; font-size: large;">
<p>3、Radio 单选框size="small":</p>
<el-radio-group v-model="radio3" class="ml-4">
<el-radio label="1" size="small">选项 1</el-radio>
<el-radio label="2" size="small">选项 2</el-radio>
<el-radio label="3" size="small">选项 3</el-radio>
<el-radio label="4" size="small">选项 4</el-radio>
</el-radio-group>
</div>
<div class="mb-2 flex items-center text-sm" style="padding: 5px; text-align: left; width: 500px; font-size: large;">
<p>4、Radio 单选框size="small",同时设单选框状态不可选择:</p>
<el-radio-group v-model="radio3" disabled class="ml-4">
<el-radio label="1" size="small">选项 1</el-radio>
<el-radio label="2" size="small">选项 2</el-radio>
<el-radio label="3" size="small">选项 3</el-radio>
<el-radio label="4" size="small">选项 4</el-radio>
</el-radio-group>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('1')
</script>
2、禁用状态
- disabled 属性可以用来控制单选框的禁用状态。
只需要为单选框设置 disabled 属性就能控制其禁用状态。
实现效果:
完整代码:
<template>
<h3>Radio 单选框禁用状态</h3>
<el-radio v-model="radio" disabled label="disabled">Option A</el-radio>
<el-radio v-model="radio" disabled label="selected and disabled">Option B</el-radio>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio = ref('selected and disabled')
</script>
3、单选框组
- 适用于在多个互斥的选项中选择的场景
- 结合el-radio-group元素和子元素el-radio可以实现单选组, 为 el-radio-group 绑定 v-model,再为 每一个 el-radio 设置好 label 属性即可, 另外,还可以通过 change 事件来响应变化,它会传入一个参数 value 来表示改变之后的值。
实现效果:
完整代码:
<template>
<h3>Radio单选框组</h3>
<el-radio-group v-model="radio">
<el-radio :label="1">Option A</el-radio>
<el-radio :label="2">Option B</el-radio>
<el-radio :label="3">Option C</el-radio>
<el-radio :label="4">Option D</el-radio>
<el-radio :label="5">Option E</el-radio>
</el-radio-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio = ref(5)
</script>
4、按钮样式
- 可以让单选框看起来像一个按钮一样。只需要把 el-radio 元素换成 el-radio-button 元素即可,
- size 属性用来控制单选框的大小。
实现效果:
完整代码:
<template>
<h3>Radio按钮样式</h3>
<div style="padding:5px;text-align:left;width:500px;font-size:large;">
<p>1、Radio 单选框size="large":</p>
<el-radio-group v-model="radio1" size="large">
<el-radio-button label="苹果" />
<el-radio-button label="雪梨" />
<el-radio-button label="菠萝" />
<el-radio-button label="橙子" />
</el-radio-group>
</div>
<div style="padding:5px;text-align:left;width:500px;font-size:large;">
<p>2、Radio 单选框没有设size选项:</p>
<el-radio-group v-model="radio2">
<el-radio-button label="苹果" />
<el-radio-button label="雪梨" disabled />
<el-radio-button label="菠萝" />
<el-radio-button label="橙子" />
</el-radio-group>
</div>
<div style="padding:5px;text-align:left;width:500px;font-size:large;">
<p>3、Radio 单选框size="small":</p>
<el-radio-group v-model="radio3" size="small">
<el-radio-button label="苹果" />
<el-radio-button label="雪梨" />
<el-radio-button label="菠萝" />
<el-radio-button label="橙子" />
</el-radio-group>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio1 = ref('雪梨')
const radio2 = ref('菠萝')
const radio3 = ref('苹果')
</script>
5、带有边框
- 设置 border 属性为 true 可以渲染为带有边框的单选框。
实现效果:
完整代码:
<template>
<h3>Radio单选框带有边框</h3>
<div class="mb-2 flex items-center text-sm" style="padding:5px;text-align:left;width:500px;font-size:large;">
<p>1、Radio 单选框size="large":</p>
<el-radio-group v-model="radio1" class="ml-4">
<el-radio label="1" size="large" border>选项 1</el-radio>
<el-radio label="2" size="large" border>选项 2</el-radio>
<el-radio label="3" size="large" border>选项 3</el-radio>
<el-radio label="4" size="large" border>选项 4</el-radio>
</el-radio-group>
</div>
<div class="my-2 flex items-center text-sm" style="padding: 5px; text-align: left; width: 500px; font-size: large;">
<p>2、Radio 单选框没有设size选项:</p>
<el-radio-group v-model="radio2" class="ml-4">
<el-radio label="1" border>选项 1</el-radio>
<el-radio label="2" border>选项 2</el-radio>
<el-radio label="3" border>选项 3</el-radio>
<el-radio label="4" border>选项 4</el-radio>
</el-radio-group>
</div>
<div class="my-4 flex items-center text-sm" style="padding: 5px; text-align: left; width: 500px; font-size: large;">
<p>3、Radio 单选框size="small":</p>
<el-radio-group v-model="radio3" class="ml-4">
<el-radio label="1" size="small" border>选项 1</el-radio>
<el-radio label="2" size="small" border>选项 2</el-radio>
<el-radio label="3" size="small" border>选项 3</el-radio>
<el-radio label="4" size="small" border>选项 4</el-radio>
</el-radio-group>
</div>
<div class="mb-2 flex items-center text-sm" style="padding: 5px; text-align: left; width: 500px; font-size: large;">
<p>4、Radio 单选框size="small",同时设单选框状态不可选择:</p>
<el-radio-group v-model="radio3" disabled class="ml-4">
<el-radio label="1" size="small" border>选项 1</el-radio>
<el-radio label="2" size="small" border>选项 2</el-radio>
<el-radio label="3" size="small" border>选项 3</el-radio>
<el-radio label="4" size="small" border>选项 4</el-radio>
</el-radio-group>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('1')
</script>
四、官方资料中的各参数说明
Radio API
Radio Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
model-value / v-model | 选中项绑定值 | string / number / boolean |
— |
label | 单选框的值 | string / number / boolean |
— |
disabled | 是否禁用单选框 | boolean |
false |
border | 是否显示边框 | boolean |
false |
size | 单选框的尺寸 | enum |
— |
name | 原始 name 属性 |
string |
— |
Radio Events
事件名 | 说明 | 类型 |
---|---|---|
change | 绑定值变化时触发的事件 | Function |
Radio Slots
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |
RadioGroup API
RadioGroup Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
model-value / v-model | 绑定值 | string / number / boolean |
— |
size | 单选框按钮或边框按钮的大小 | string |
default |
disabled | 是否禁用 | boolean |
false |
text-color | 按钮形式的 Radio 激活时的文本颜色 | string |
#ffffff |
fill | 按钮形式的 Radio 激活时的填充色和边框色 | string |
#409EFF |
validate-event | 输入时是否触发表单的校验 | boolean |
true |
labela11y | 与 RadioGroup 中的 aria-label 属性相同 |
string |
— |
name | 原生 name 属性 |
string |
— |
id | 原生 id 属性 |
string |
— |
RadioGroup Events
事件名 | 说明 | 类型 |
---|---|---|
change | 绑定值变化时触发的事件 | Function |
RadioGroup Slots
插槽名 | 说明 | 子标签 |
---|---|---|
default | 自定义默认内容 | Radio / RadioButton |
RadioButton API
RadioButton Attributes
属性名 | 说明 | 类型 | 默认 |
---|---|---|---|
label | 单选框的值 | string / number / boolean |
— |
disabled | 是否禁用单选框 | boolean |
false |
name | 原生 name 属性 | string |
— |
RadioButton Slots
插槽名 | 说明 |
---|---|
default | 默认插槽内容 |
五、总结
1 |
Element Plus 实例详解(一)__安装设置 |
2 | Element Plus 实例详解(二)___Button 按钮 |
3 | Element Plus 实例详解(三)___Date Picker 日期选择 |
4 | Element Plus 实例详解(四)___Border 边框 |
5 | Element Plus 实例详解(五)___Scrollbar 滚动条 |
6 | Element Plus 实例详解(六)___Progress 进度条 |
7 | Element Plus 实例详解(七)___Typography 排版 |
8 | Element Plus 实例详解(八)___Radio 单选框 |
9 | Element Plus 实例详解(九)___ |
10 | Element Plus 实例详解(十)___ |
11 | Element Plus 实例详解(十一)___ |
12 | Element Plus 实例详解(十一)___ |
推荐阅读:
31 | Element Plus 实例详解(一)___安装设置 | |
30 | |
Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细) |
29 | ||
28 | ||
27 | | |
26 | | |
25 | | |
24 | | |
23 | | |
22 | | |
21 | | |
20 | | |
19 | | |
18 | | |
17 | | |
16 | | |
15 | | |
14 | | |
13 | | |
12 | | |
11 | | 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心) |
10 | | |
9 | | |
8 | | |
7 | | 2023年3月TIOBE 指数头条:编程语言 Go 进入 TIOBE 指数前 10 名,多家权威机构____编程语言排行榜__薪酬状 |
6 | | |
5 | | |
4 | | |
3 | | |
2 | | |
1 | |