链接升级:Element UI <el-link> 的应用

链接升级:Element UI 的应用

  • 一 . 创建文字链接
    • 1.1 注册路由
    • 1.2 创建文字链接
  • 二 . 文字链接的属性
    • 2.1 文字链接的颜色
    • 2.2 是否显示下划线
    • 2.3 是否禁用状态
    • 2.4 填写跳转地址
    • 2.5 加入图标

在本篇文章中,我们将深入探索Element UI中的<el-link>组件——一种样式化的文字链接组件,它不仅继承了传统<a>标签的所有功能,还引入了额外的样式和属性,使得创建具有吸引力的链接变得轻而易举。

从基础的链接创建到高级的属性配置,我们将一步步分析如何利用<el-link>组件来丰富您的网页界面。我们将学习如何通过简单的标签和属性来控制链接的颜色、是否显示下划线、禁用状态,甚至如何添加图标来提升视觉效果。

在这里插入图片描述

ElementUI 专栏 : https://blog.csdn.net/m0_53117341/category_12780595.html

文字链接就类似我们之前编写的 a 标签 , 只不过这里的文字链接是携带了样式的文字链接

一 . 创建文字链接

我们根据之前的学习 , 可以知道 ElementUI 中的标签都是以 el 开头的 .

那我们就可以通过 el-link 标签来去创建一个文字链接

<el-link>主要链接</el-link>

1.1 注册路由

我们可以新创建一个组件 , 来看一下文字链接的效果

然后我们需要将 Link 组件注册到路由中

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Button from '@/components/Button'
import ButtonDetail from '@/components/ButtonDetail'
import Link from '@/components/Link'Vue.use(Router)export default new Router({routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld },{ path: '/button', name: 'Button', component: Button },{ path: '/buttondetail', name: 'ButtonDetail', component: ButtonDetail },{ path: '/link', name: 'Link', component: Link },]
})

然后我们在 App.vue 中添加相对应的 a 标签 , 点击即可跳转到我们的 Link 组件

<template><div id="app"><!-- 我们自己的标签页 --><a href="#/link">文字链接组件</a> <br><!-- Vue 的路由 --><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

1.2 创建文字链接

那接下来我们来创建文字链接 , 按照之前的方式 , 我们通过 el-link 即可创建文字链接

<template><div><h1>文字链接组件</h1><!-- 使用 el-link 标签创建文字链接 --><el-link>默认链接</el-link></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>

我们来看一下效果

这样就创建出了一个最普通的文字链接

二 . 文字链接的属性

文字链接也提供了好几个属性 , 我们可以通过 ElementUI 官网来查看

https://element.eleme.cn/#/zh-CN/component/link

2.1 文字链接的颜色

type 属性主要控制的是文字链接的颜色

其中 , 不同的属性代表的是不同的颜色

我们可以通过 type 属性来设置不同文字链接的颜色

<template><div><h1>文字链接组件</h1><!-- 使用 el-link 标签创建文字链接 --><el-link>默认链接</el-link><!-- 通过 type 属性可以设置链接的不同颜色 --><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></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>

2.2 是否显示下划线

我们使用 underline 属性设置是否显示下划线

要注意的是 , underline 属性的默认值为 true , 代表默认显示下划线 , 需要我们设置成 false 才能够不显示下划线

此时我们来看一下效果

我们来看一下报错的具体内容

这是因为 JavaScript 将我们的 false 误识别成了字符串 , 所以不能正常识别 .

我们可以使用 Vue 提供给我们的属性绑定 , 也就是 v-bind 来进行布尔变量的绑定

<template><div><h1>下划线</h1><!-- underline 属性默认为 true, 代表默认显示下划线, 需要我们手动设置成 false 来隐藏下划线 --><el-link :underline="flag">默认链接</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

如果还继续报错 , 请检查一下 script 标签中是否出现了 setup 关键字 , 如果存在的话 , 请将

此时我们来看一下效果 , 此时下划线已经消失 , 并且控制台也不报错了

那我们其实也不用特意在脚本中创建一个布尔变量来去进行属性绑定 , 我们还可以直接通过 v-bind 来去设置 true/false

<template><div><h1>下划线</h1><!-- underline 属性默认为 true, 代表默认显示下划线, 需要我们手动设置成 false 来隐藏下划线 --><!-- 使用 underline 属性需要使用属性绑定的方式, v-bind 可省略 --><el-link :underline="flag">默认链接</el-link><!-- 也可以直接通过属性绑定设置 true/false --><el-link :underline="false">默认链接</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

我们来看一下效果

2.3 是否禁用状态

如果我们不想让用户点击某个文字链接的话 , 可以设置 disable 属性

其中 , disabled 默认值为 false , 这就代表我们只需要在属性中声明 disabled 属性即可 , 无需设置 true/false

<template><div><h1>设置禁用状态</h1><!-- 通过 disabled 属性将当前链接设置成禁止点击 --><el-link type="danger" disabled>已被禁用</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

我们注意 “已被禁用” 所出现的禁止图标

2.4 填写跳转地址

我们可以使用原生的 href 属性来填写要跳转的地址

同时 , el-link 标签还继承了原生 a 标签的一系列属性 , 比如我们还可以指定是否在新标签页跳转 , 即 target 属性

<template><div><h1>设置跳转地址</h1><!-- 通过 href 属性设置跳转地址 --><!-- 通过 target="_blank" 属性设置在新标签页中打开 --><el-link href="http://www.baidu.com" target="_blank">点击跳转</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

2.5 加入图标

我们也可以在文字链接中加入图标来美化文字链接组件

比如我们可以去找一个图标 : https://element.eleme.cn/#/zh-CN/component/icon

然后粘贴到 icon 属性中

<template><div><h1>加入图标</h1><!-- 通过 icon 属性可以给文字链接前面添加小图标 --><el-link type="primary" icon="el-icon-star-off">添加图标</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>


小结 : 我们从基础的 <el-link> 组件创建开始,逐步介绍了如何通过注册路由和在 Vue 组件中使用该标签。进一步地,我们探索了 type 属性来定制链接颜色,使用 underline 和 disabled 属性来控制链接的显示效果和交互状态。此外,我们还学习了如何利用 href 和 target 属性来设置链接的跳转行为,以及如何通过 icon 属性为链接添加视觉吸引力的图标。

不知道你掌握了多少 , 一定要跟着案例亲自实现 . 如果对你有帮助的话 , 还请一键三连~
在这里插入图片描述

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

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

相关文章

Elasticsearch基础(七):Logstash如何开启死信队列

文章目录 Logstash如何开启死信队列 一、确保 Elasticsearch 输出插件启用 DLQ 支持 二、配置 Logstash DLQ 设置 三、查看死信队列 四、排查 CSV 到 Elasticsearch 数据量不一致的问题 Logstash如何开启死信队列 在 Logstash 中&#xff0c;死信队列&#xff08;Dead Le…

一文快速上手-create-vue脚手架

文章目录 初识 create-vuecreate-vue新建项目Vue.js 3 项目目录结构项目的运行和打包vite.config.js文件解析其他&#xff1a;webpack和Vite的区别 初识 create-vue create-vue类似于Vue CLI脚手架&#xff0c;可以快速创建vuejs 3项目&#xff0c;create-vue基于Vite。Vite支…

C++ nullptr 和NULL的区别

个人主页&#xff1a;Jason_from_China-CSDN博客 所属栏目&#xff1a;C系统性学习_Jason_from_China的博客-CSDN博客 所属栏目&#xff1a;C知识点的补充_Jason_from_China的博客-CSDN博客 概念概述&#xff1a; 在C中&#xff0c;nullptr 和 NULL 都是用来表示空指针&#xf…

GPT对话知识库——串口通信的数据的组成?起始位是高电平还是低电平?如何用代码在 FreeRTOS 中实现串口通信吗?如何处理串口通信中的数据帧校验吗?

目录 1&#xff0c;问&#xff1a; 1&#xff0c;答&#xff1a; 串口数据的组成 串口数据传输帧的完整结构 起始位的电平状态&#xff1a;低电平 举例&#xff1a;UART数据传输的例子 适用场景 总结 2&#xff0c;问&#xff1a; 2&#xff0c;答&#xff1a; a. 如…

微波无源器件 功分器3 一种用于多端口辐射单元的紧凑四路双极化正交模功分器的设计

摘要&#xff1a; 一种有着双极化能力并且能作为一个Fabry-Perot谐振腔天线的馈源包含四个输入端口的新型紧凑功分器的概念和设计被提出了。在四个圆波导中的双同相极化通过使用四个5端口十字转门结合两个8by1&#xff08;八合一&#xff09; 功分网络。功分器末端接了两个端口…

【RabbitMQ】工作模式

工作模式概述 简单模式 简单模式中只存在一个生产者&#xff0c;只存在一个消费者。生产者生产消息&#xff0c;消费者消费消息。消息只能被消费一次&#xff0c;也称为点对点模式。 简单模式适合在消息只能被单个消费者处理的场景下存在。 工作队列模式&#xff08;Work Qu…

项目管理 | 一文读懂什么是敏捷开发管理

在快速变化的商业环境中&#xff0c;项目管理方式也在不断演进&#xff0c;其中敏捷开发管理因其高效、灵活和适应性强的特点&#xff0c;逐渐成为众多企业和团队的首选。本文将详细解析敏捷开发管理的定义、具体内容及其核心角色&#xff0c;帮助读者全面理解这一先进的项目管…

心觉:不能成事的根本原因

很多人一直都很努力&#xff0c;每天都很忙 每天都学习很多东西&#xff0c;学习各种道&#xff0c;各种方法论 但是许多年过去了依然一事无成 自己的目标没有达成&#xff0c;梦想没有实现 为什么呢 关键是没有开悟 那么什么是开悟呢 现在很多人都在讲开悟 貌似开悟很…

harmony初学者入门

一、开发前准备 1.申请开发者账号,可进行个人认证和企业认证 2.下载开发者工具&#xff0c;下载最新版本的devecoStudio &#xff0c;当然可以下载历史版本的 3.安装DevEco Studio 4.申请模拟器 并且安装模拟器 在此说明下 有预览器 模拟器和真机&#xff0c; 个人开发学习的话…

阿里云 Quick BI使用介绍

Quick BI使用介绍 文章目录 阿里云 Quick BI使用介绍1. 创建自己的quick bi服务器2. 新建数据源3. 上传文件和 使用4. 开始分析 -选仪表盘5. 提供的图表6. 一个图表的设置使用小结 阿里云 Quick BI使用介绍 Quick BI是一款全场景数据消费式的BI平台&#xff0c;秉承全场景消费…

AI逻辑推理入门

参考数据鲸 (linklearner.com) 1. 跑通baseline 报名 申领大模型API 模型服务灵积-API-KEY管理 (aliyun.com) 跑通代码 在anaconda新建名为“LLM”的环境,并安装好相应包后,在jupyter notebook上运行baseline01.ipynb 2. 赛题解读 一般情况下,拿到一个赛题之后,我们需…

C++系列-匿名对象

匿名对象 &#x1f4a2;什么是匿名对象&#x1f4a2;匿名对象的创建方式及作用域&#x1f4a2;匿名对象的对象类型&#x1f4a2;&#x1f4a2;匿名的基本数据类型对象&#x1f4a2;&#x1f4a2;匿名的自定义的类类型对象&#x1f4a2;&#x1f4a2;匿名的标准库的类对象 &…

CleanClip vs 传统剪贴板:究竟谁更胜一筹?

在日常工作和生活中,复制粘贴可以说是我们使用最频繁的操作之一。传统的剪贴板功能虽然简单易用,但在功能性和效率上还有很大的提升空间。今天,我们就来比较一下新兴的剪贴板增强工具CleanClip与传统剪贴板,看看到底谁更胜一筹。 1. 剪贴历史管理 传统剪贴板只能存储最后一次…

通过adb命令打开手机usb调试

adb shell settings put global adb_enabled 1 这个命令会将全局ADB启用设置为1&#xff0c;允许通过ADB进行调试。 adb shell settings put secure adb_authentication_enabled 1 这个命令会启用ADB身份验证&#xff0c;允许设备在连接时要求授权。 adb shell settings put …

【Java】类的成员之一-代码块【主线学习笔记】

文章目录 前言类的成员之一-代码块作用静态初始化块非静态代码块 前言 Java是一门功能强大且广泛应用的编程语言&#xff0c;具有跨平台性和高效的执行速度&#xff0c;广受开发者喜爱。在接下来的学习过程中&#xff0c;我将记录学习过程中的基础语法、框架和实践技巧等&#…

Pyspark下操作dataframe方法(3)

文章目录 Pyspark dataframe操作方式3df.foreach 逐条执行foreachPartition 按分区逐条执行freqltemsgroupBy 分组head 获取指定数量开头hint 查询优化intersect 获取交集&#xff08;去重&#xff09;isEmpty 判断dataframe是否为空join 关联limit 限定数量mapInPandas 迭代处…

PaddleNLP本文分类及docker部署流程

本文记录使用PaddleNLP进行文本分类的全流程 参考&#xff1a;https://github.com/PaddlePaddle/PaddleNLP/tree/develop/legacy/applications/text_classification/multi_class 文章目录 1. 数据准备2. 模型训练2.1 准备关键库2.2 模型训练&#xff06;验证2.3 模型测试2.4 结…

分布式中间件-redis相关概念介绍

文章目录 什么是redis?示意图Redis的主要特点Redis的主要用途Redis的工作原理Redis的持久化与备份 redis 6.x新增特性多线程数据加载客户端缓存新的 RESP 3 协议支持ACL&#xff08;Access Control List&#xff09;功能新增数据类型性能改进配置文件的改进其他改进 redis数据…

前端vue中如何给reactive赋值

const deviceDatareactive({}) const getDeviceDetail (list)>{ if(list.length > 0){ for(let item of list){ if(item.id param.id){ Object.assign(deviceData,item) } } } }

02 基于STM32的按键控制继电器驱动电机

本专栏所有源资料都免费获取&#xff0c;没有任何隐形消费。 注意事项&#xff1a;STM32仿真会存在各种各样BUG&#xff0c;且尽量按照同样仿真版本使用。本专栏所有的仿真都采用PROTEUS8.15。 本文已经配置好STM32F103C8T6系列&#xff0c;在PROTUES仿真里&#xff0c;32单片…