Element-Ui组件（四）Link 文字链接

最新推荐文章于 2024-01-24 17:45:13 发布
VIP文章 最新推荐文章于 2024-01-24 17:45:13 发布
阅读量4.7w 收藏 15
点赞数 4
分类专栏： Vue.js 文章标签： Vue Element html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sps900608/article/details/90755206
版权

Element-Ui组件（四）Link 文字链接

本文参考Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component

基础用法

el-link比较简单，用法与el-button类似，经常与icon搭配使用，type属性主要用于控制其颜色，以下是用一组链接制作的简单导航栏：
在这里插入图片描述

<template>
  <div>
    <el-link icon="el-icon-s-home" type="primary">主页</el-link>&nbsp;
    <el-link icon="el-icon-shopping-cart-2" type="success">商品列表</el-link>&nbsp;
    <el-link disabled icon="el-icon-s-platform" type="danger">系统管理</el-link>&nbsp;
    <el-link icon="el-icon-setting" type
最低0.47元/天 解锁文章
究极死胖兽
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
element-ui.rar
02-20
最新的elementui@2.15.0资源，可以在静态页面上直接引入，配合vue+elementui使用，不需要搭建vue框架，不需要npm 安装element 直接静态引入 <!-- 引入样式 --> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="element-ui/lib/index.js"></script>
Element UI 的 El-Link 组件一直显示下划线
xujingcheng123的博客
06-27 989
【代码】Element UI 的 El-Link 组件一直显示下划线。
【Element-ui】Link 文字链接 与 Radio 单选框
m0_62599305的博客
12-02 2156
在前端开发中，用户界面的元素设计和交互方式对于用户体验至关重要。Element-ui作为一个流行的Vue.js组件库，提供了丰富多样的组件，其中包括Link文字链接和Radio单选框。Link文字链接可以帮助我们实现文字的跳转和引导，而Radio单选框则是让用户在多个选项中做出选择的重要工具。本文将深入介绍这两个组件的用法和特性，帮助你更好地理解并运用它们，提升前端界面的设计和交互性。本文详细介绍了Element-ui中的Link文字链接和Radio单选框的用法和特性。
el-link用法以及样式修改
qq_42396813的博客
01-24 1048
应用场景：点击el-link跳转到相应页面，自定义字体颜色大小。
element-ui 2.15.9下载到本地资源最新版本压缩包（附element-ui本地引用方法）
06-04
本地引用示例： <!DOCTYPE html> <html> <head> <title>my</title> <script src="/my/html/vue.min.js"></script> <script src="/my/html/element-ui/lib/index.js"></script> <link rel="stylesheet" href="/my/html/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-row> <el-col :span="24"><div class="myclass"></div></el-col> </el-row>
HTML+Element-ui邮件管理前端界面
07-12
不用脚手架，无需创建vue工程 若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!-- 引入element 的组件库--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> 2.html代码是否被div包含 3.是否 var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
el-link入门学习
热门推荐
qq_40765784的博客
05-12 1万+
el-link的入门使用
el-link underline
m0_59579040的博客
03-26 3401
饿了妈el-link 的 underline不知道怎么修改颜色问题 修改文字链接下划线 1、 把underline设为false隐藏el-link下划线 <el-link :underline="false">文字链接1</el-link> <el-link >文字链接2</el-link> 2、修改样式 .el-link { color: #1b1b1b; text-decoration: underline;
el+vue 实战 ⑩ el-backtop背景图片自定义、el-link下划线颜色自定义
zujiasheng的博客
08-28 2089
el-backtop背景图片自定义、el-link下划线颜色自定义
element plus中的el-link如何去掉下划线
weixin_42901443的博客
03-04 1539
element plus中的el-link如何去掉下划线
Vue中正确使用Element-UI组件的方法实例
01-18
一、CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel=stylesheet href=https://unpkg.com/element-ui/lib/theme-chalk/index.css> <!-- 引入组件库 --> [removed][removed] 二、npm安装 1、打开终端（开发工具中打开或（win+r）后输入cmd进入） 2、进入到对
element-ui 本地化使用教程详解
10-16
主要介绍了element-ui 本地化使用教程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element UI极简教程(2)：Icon、Button、Link组件的使用
ningnan9801的博客
12-15 6316
Java大联盟 致力于最高效的Java学习关注B 站搜索：楠哥教你学Java获取更多优质视频教程Icon 图标Element UI 的 Icon 组件提供了一套常用的图标集合，直接使...
Vue+ElementUi实现点击表格中链接进行页面跳转和路由
qq_43657722的博客
09-24 9402
Vue+ElementUi实现点击表格中链接进行页面跳转和路由
事件修饰符
weixin_45932157的博客
03-25 1191
除了.stop之外，Vue v-on还提供了其它事件修饰符 .once 只响应事件一次，例如@click.once=“fun4”，表示仅第一次点击才会执行fun4 这里， @event等同于v-on:event，vue事件绑定的两种格式。 .self 仅当事件由元素自身（比如不是子元素）触发时，才响应事件。例如，上述实验1的基础上，修改@click="fun3"为@click.self=“fun3”,那么，点击div4所在div时，div3所在div不会回调fun3,即不会响应点击事件 .prevent .
vue使用el-link实现下载本地文件
睡大觉的博客
06-27 1753
vue使用el-link实现下载本地文件
Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02
helloworld工程师的博客
02-23 1596
Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02 Link文字链接组件 1.文字链接组件的创建 <el-link>默认文字链接</el-link> 2.文字链接组件的属性的使用 <el-link type="success" href="http://www.baidu.com">默认文字链接</el-link> <el-link type="primary" :underlin.
element 若依 表格内的超链接跳转
s212571231的博客
09-13 3333
element 若依 表格内的超链接跳转
element -ui
最新发布
03-20
Element-UI是一个基于Vue.js的组件库，用于构建Web界面的用户界面库。它提供了丰富的可重用组件，包括按钮、表单、弹窗、导航等等，可以帮助开发者快速构建现代化的Web应用程序。 要使用Element-UI，你需要引入Element-UI的样式和脚本文件。你可以通过以下方式引入Element-UI： 1. 使用CDN引入Element-UI的样式和脚本文件[^1]： ```html <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 2. 使用npm安装Element-UI，并在项目中引入样式和组件[^2]： ```shell npm i element-ui -S ``` ```html <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 通过以上方式引入Element-UI后，你就可以在Vue.js的项目中使用Element-UI的组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值