【Element-ui】Link 文字链接 与 Radio 单选框

文章目录

  • 前言
  • 一、Link 文字链接
    • 1.1 基础用法
    • 1.2 禁用状态
    • 1.3 下划线
    • 1.4 图标
  • 二、Radio 单选框
    • 2.1 基础用法
    • 2.2 禁用状态
    • 2.3 单选框组
    • 2.4 按钮样式
    • 2.5 带有边框
    • 2.6 Radio Events
      • input事件
    • 2.7 Radio-group Attributes
  • 总结


前言

在前端开发中,用户界面的元素设计和交互方式对于用户体验至关重要。Element-ui作为一个流行的Vue.js组件库,提供了丰富多样的组件,其中包括Link文字链接和Radio单选框。Link文字链接可以帮助我们实现文字的跳转和引导,而Radio单选框则是让用户在多个选项中做出选择的重要工具。本文将深入介绍这两个组件的用法和特性,帮助你更好地理解并运用它们,提升前端界面的设计和交互性。


一、Link 文字链接

文字超链接

1.1 基础用法

基础的文字链接用法。
咱们和使用我们的html里面的a标签是一样的,如下:

<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>

在这里插入图片描述

1.2 禁用状态

文字链接不可用状态。

<el-link disabled>默认链接</el-link>
<el-link type="primary" disabled>主要链接</el-link>
<el-link type="success" disabled>成功链接</el-link>
<el-link type="warning" disabled>警告链接</el-link>
<el-link type="danger" disabled>危险链接</el-link>
<el-link type="info" disabled>信息链接</el-link>

在这里插入图片描述

1.3 下划线

文字链接下划线。

underline属性为true时有下划线

<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>

在这里插入图片描述
在这里插入图片描述

1.4 图标

带图标的文字链接可增强辨识度。

<el-link icon="el-icon-edit">编辑</el-link>
<el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>

在这里插入图片描述

二、Radio 单选框

在一组备选项中进行单选

2.1 基础用法

由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。

要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是String、Number或Boolean。

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

在这里插入图片描述

他们是互斥的。

2.2 禁用状态

单选框不可用的状态。

<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>

label属性的含义为他的值,就像1、2、3、true、false、"a"这样,他可以为boolean、number、string类型.
用来标识哪个选中
在这里插入图片描述

2.3 单选框组

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

结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-radio绑定变量,另外,还提供了change事件来响应变化,它会传入一个参数value。

<el-radio-group v-model="radio"><el-radio :label="3">备选项</el-radio><el-radio :label="6">备选项</el-radio><el-radio :label="9">备选项</el-radio>
</el-radio-group>

在这里插入图片描述

2.4 按钮样式

按钮样式的单选组合。
只需要把el-radio元素换成el-radio-button元素即可,此外,Element 还提供了size属性。

<div><el-radio-group v-model="radio1"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group>
</div>
<div style="margin-top: 20px"><el-radio-group v-model="radio2" size="medium"><el-radio-button label="上海" ></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group>
</div>
<div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京" disabled ></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group>
</div>
<div style="margin-top: 20px"><el-radio-group v-model="radio4" disabled size="mini"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group>
</div>

在这里插入图片描述

2.5 带有边框

设置border属性可以渲染为带有边框的单选框。

<div><el-radio v-model="radio1" label="1" border>备选项1</el-radio><el-radio v-model="radio1" label="2" border>备选项2</el-radio>
</div>
<div style="margin-top: 20px"><el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio><el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
</div>
<div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border disabled>备选项2</el-radio></el-radio-group>
</div>
<div style="margin-top: 20px"><el-radio-group v-model="radio4" size="mini" disabled><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border>备选项2</el-radio></el-radio-group>
</div>

他是单独设置的,如果是按钮组也需要单独设置

在这里插入图片描述

2.6 Radio Events

input事件

input 绑定值变化时触发的事件 选中的 Radio label 值

<template><div><div><el-radio v-model="radio1" label="1" border @input="handleSizeChange">备选项1</el-radio><el-radio v-model="radio1" label="2" border>备选项2</el-radio></div><div style="margin-top: 20px"><el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio><el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio></div><div style="margin-top: 20px"><el-radio-group v-model="radio3" size="small"><el-radio label="1" border @input="handleSizeChange">备选项1</el-radio><el-radio label="2" border disabled>备选项2</el-radio></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio4" size="mini" disabled><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border>备选项2</el-radio></el-radio-group></div></div>
</template><script>
export default {methods: {handleSizeChange(val) {console.log(val);// 在需要的情况下,通过触发事件通知父组件更新数据// this.$emit('update:radio', val);},},data() {return {radio1: '1',radio2: '1',radio3: '1',radio4: '1'};},
};
</script><style>.App{width: 600px;height: 700px;background-color: #87ceeb;margin: 50 auto;padding: 100px;}
</style>

2.7 Radio-group Attributes

参数 说明 类型 可选值 默认值
text-color 按钮形式的 Radio 激活时的文本颜色 string — #ffffff
fill 按钮形式的 Radio 激活时的填充色和边框色 string — #409EFF


总结

本文详细介绍了Element-ui中的Link文字链接和Radio单选框的用法和特性。Link文字链接不仅可以帮助我们实现文字的链接跳转,还能美化页面并提供更好的导航功能,增强用户体验;而Radio单选框作为让用户在多个选项中选择的工具,具有清晰的界面展示和良好的交互性。熟练掌握这两个组件的用法,将有助于提升界面的可用性和用户体验,为用户提供更加友好和便捷的界面操作。希望本文对于你理解和运用Element-ui中的Link文字链接和Radio单选框有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/193828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python继承的设计及演化

Python中的继承 文章目录 Python中的继承概念明确MRO深度优先算法&#xff08;Python2.2之前及Python2.2的经典类中使用&#xff09;优化版的深度优先算法&#xff08;只在Python2.2版本的新式类中使用&#xff09;广度优先算法&#xff08;Python任何版本都从未使用过&#xf…

C语言--每日选择题--Day34

第一题 1. i &#xff08;&#xff09; int i 1; int j i; if((i > j) && (i j)) {i j; } A&#xff1a;3 B&#xff1a;5 C&#xff1a;6 D&#xff1a;7 答案及解析 B 本题考查你对后置的认识&#xff0c;后置返回的是之前的值&#xff0c;之后再&#xf…

【Python】tensorflow学习的个人纪录(3)

sess tf.Session()actor Actor(sess, n_featuresN_S, lrLR_A, action_bound[-A_BOUND, A_BOUND])步进&#xff1a;

HDMI之数据岛

概述 发送端在发送视频信号之前,将多媒体信息通过数据岛传输给接收端。接收端通过数据岛信息获取当前分辨率(VIC),编码信息(RGB/YCR等),色彩空间,位深等等。然后对应将视频信息解码。与此同时,多余的带宽用于传输音频信息等。本文通过具体的包信息(从实验室仪器拍照…

[动态规划,字符串操作] 分词

第五题&#xff1a;分词 题目描述 给定一个包含n个单词的英文词典和m个只由英文字母组成的字符串。 判断这些字符串能否由词典中的单词组成。 比如词典中包含5个单词&#xff1a;“Jim”, “and”, “cat”,“like”, “dog” 这些单词能组成"Jimlikecatanddog"、“…

[开题报告]基于SpringBoot的抑郁症科普平台的设计与实现

1.研究背景 抑郁症是一种常见的精神障碍&#xff0c;严重影响了患者的生活质量和社会功能。随着社会的快速发展和生活压力的增加&#xff0c;抑郁症的发病率逐渐上升&#xff0c;成为全球范围内的健康问题。然而&#xff0c;对抑郁症的认知和理解仍存在许多误解和偏见&#xf…

[开题报告]基于SpringBoot的自闭症知识宣传平台的设计与实现

1.研究背景 自闭症是一种常见的儿童神经发育障碍&#xff0c;通常在儿童时期即可出现。自闭症患者在社交互动、语言沟通和行为模式方面存在显著的缺陷&#xff0c;对他们及其家庭来说可能造成长期的困扰和挑战。 然而&#xff0c;社会对自闭症的了解和认知仍然相对薄弱。这导…

智能优化算法应用:基于模拟退火算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于模拟退火算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于模拟退火算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.模拟退火算法4.实验参数设定5.算法结果6.参考…

MySQL中,text,mediumtext, 和 longtext字符类型

需求 由于项目需要&#xff0c;需要在mysql数据库&#xff0c;储存长文本&#xff0c;长文本格式可能为markdown也可能为html。 思路 测试存入html时&#xff0c;字符类型为varcar 255。很明显字符长度达不到要求。数据库抛错&#xff0c;修改字符类型 解决方案 将原本的字…

五步搞好全媒体整合营销

如何做好全媒体整合营销呢&#xff1f;要做好全媒体整合营销&#xff0c;小马识途营销顾问认为需要注意以下几个步骤&#xff1a; 1、确定目标受众&#xff1a;首先需要确定目标受众&#xff0c;了解他们的需求、兴趣和消费习惯等信息&#xff0c;以便于精准定位和制定相应的营…

Python虚拟环境创建和使用

前言 Python 虚拟环境是一个独立的 Python 环境&#xff0c;你可以在其中安装和使用 Python 库&#xff0c;而不会影响系统的全局 Python 环境。这在你需要为不同的项目使用不同版本的库时非常有用 Python 3.3 以后的版本都内置了 venv 模块&#xff0c;用来创建和管理虚拟环境…

4_企业架构双点服务器HA

企业架构双点服务器HA 学习目标和内容 1、能够描述高可用HA的作用 2、能够理解VIP的切换 3、能够描述keepalived作用 4、能够理解主master和备backup服务器关系 5、能够实现主备服务器高可用配置 6、能够实现模拟业务宕机服务切换 一、背景描述及其方案设计 1、业务背景描述 时…

JavaSE学习路线及经验所谈

前言 一.学习框架二.学习经验 相信很多小白刚开始学习Java时&#xff0c;都是靠自己在网上搜集资料&#xff0c;并没有明确规划&#xff0c;不知道要学习什么内容&#xff0c;也不知道学习的重点是什么&#xff0c;那么这篇文章会给你一个大致的指引&#xff0c;当然也可以作为…

网络之路27:IRF设备堆叠

正文共&#xff1a;3210 字 34 图&#xff0c;预估阅读时间&#xff1a;5 分钟 目录 网络之路第一章&#xff1a;Windows系统中的网络 0、序言 1、Windows系统中的网络1.1、桌面中的网卡1.2、命令行中的网卡1.3、路由表1.4、家用路由器 网络之路第二章&#xff1a;认识企业设备…

每日一题:LeetCode-209. 长度最小的子数组(滑动窗口)

每日一题系列&#xff08;day 11&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…

【BLE基础知识】--Slave latency设置流程及空中包解析

1、Slave latency基本概念 当BLE从设备对耗电量要求较高时&#xff0c;若需要节省耗电量&#xff0c;则可以通过设置Slave Latency参数来减少BLE从设备的耗电。 Slave Latency&#xff1a;允许Slave&#xff08;从设备&#xff09;在没有数据要发的情况下&#xff0c;跳过一定…

如何在线给官网搭建一个帮助文档?

在数字化时代&#xff0c;帮助文档已成为官网不可或缺的一部分。然而&#xff0c;传统的帮助文档往往只是简单地罗列问题和答案&#xff0c;缺乏互动性和用户体验。那么&#xff0c;如何在线给官网搭建一个富有创意且用户友好的帮助文档呢&#xff1f; | 一、打造沉浸式体验 传…

C/C++学生选课/排课系统[2023-12-3]

问题描述&#xff1a;根据我校自动化专业的部分必修及选修课信 息&#xff0c;设计一个学生选课/排课系统。 基本要求&#xff1a; 1、从文件读入课程信息&#xff1b; 2、从键盘输入拟添加的选修课信息&#xff1b; 3、删除已选的选修课(1门或多门) &#xff1b; 4、输出已…

手写实现一个动态代理框架

手写实现一个动态代理框架 什么是代理模式什么是动态代理动态代理中的编译、类加载与对象实例化手写实现一个动态代理框架实现细节DynamicProxyHandlerProxy生成代码写入代码到磁盘文件调用编译器进行编译调用类加载器进行类加载反射实例化删除前面生成的java文件和class文件 C…

Optional类使用总结

1.1、Optional类介绍 在我们平常开发过程中&#xff0c;如果程序逻辑考虑不全&#xff0c;就有可能导致空指针异常NullPointerException&#xff0c;也就是我们常说的NPE。 出现空指针异常的根本原因&#xff0c;就是我们在使用某个对象的时候&#xff0c;没有判断这个对象是…