ElementUI之文字链接

官方链接地址

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

基本使用

<el-link></el-link>

<p><el-link href="#" target="_blank">默认链接</el-link></p>

链接禁用

• 禁用disabled
  • <el-link disabled></el-link>

<p><el-link disabled href="#">禁用链接</el-link></p>

链接情境色

链接情境色使用type属性声明

• primary
  • <el-link type="primary"></el-link>
• success
  • <el-link type="success"></el-link>
• info
  • <el-link type="info"></el-link>
• warning
  • <el-link type="warning"></el-link>
• danger
  • <el-danger type="danger"></el-link>

<p><el-link type="primary" href="#">primary</el-link></p>
<p><el-link type="success" href="#">success</el-link></p>
<p><el-link type="info" href="#">info</el-link></p>
<p><el-link type="warning" href="#">warning</el-link></p>
<p><el-link type="danger" href="#">danger</el-link></p>

链接下划线

文字链接下划线通过underline属性声明，默认有下划线

• underline
  • <el-link type="primary" :underline="false"></el-link>

<p><el-link type="primary" href="#">有下划线</el-link></p>
<p><el-link type="primary" href="#" :underline="false">无下划线</el-link></p>

链接图标

在链接中使用图标，通过icon属性声明

• 用法一：
  • <el-link icon="el-icon-edit" type="primary">编辑</el-link>
• 用法二：（放在文字左边）
  • <el-link type="danger" icon="el-icon-delete">删除</el-link>
• 用法三：（放在文字右边）
  • el-icon--right
  • <el-link type="danger">删除<li class="el-icon-delete el-icon--right"></li></el-link>

<p><el-link type="primary" href="#" icon="el-icon-edit" :underline="false">编辑</el-link></p>
<p><el-link type="danger" href="#" :underline="false">删除<i class="el-icon-delete el-icon--right"></i></el-link></p>

属性

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