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

究极死胖兽

于 2019-06-03 17:06:56 发布

阅读量4.8w

点赞数 4

分类专栏： Vue.js 文章标签： Vue Element html

本文链接：https://blog.youkuaiyun.com/sps900608/article/details/90755206

版权

Vue.js 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了Element-Ui中的Link组件，它用于创建文字链接，并且与配合使用。介绍了基础用法，强调了如何通过属性控制链接的颜色，提供了一个用Link组件制作简单导航栏的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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="warning">个人设置</el-link>&nbsp;
    <el-link href="http://www.baidu.com" icon="el-icon-search" type="info">百度搜索</el-link>
  </div>
</template>

el-link属性：

参数	类型	说明	可选值	默认值
type	类型	string	primary / success / warning / danger / info	default
underline	是否下划线	boolean	—	true
disabled	是否禁用状态	boolean	—	false
href	原生 href 属性	string	—	-
icon	图标类名	string	—	-