ElementUI之文字链接

官方链接地址

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

基本使用

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

链接禁用

• 禁用disabled

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

链接情境色

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

• primary
• success
• info
• warning
• danger

<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

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

链接图标

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

• 用法一：
  • 编辑
• 用法二：（放在文字左边）
  • 删除
• 用法三：（放在文字右边）
  • el-icon--right
  • 删除

<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	—	-