Element-Ui组件(四)Link 文字链接
本文参考Element官方文档:
http://element-cn.eleme.io/#/zh-CN/component
基础用法
el-link
比较简单,用法与
el-button
类似,经常与
icon
搭配使用,
type
属性主要用于控制其颜色,以下是用一组链接制作的简单导航栏:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL2cTN4QjMwcTMzAjNwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
<template>
<div>
<el-link icon="el-icon-s-home" type="primary">主页</el-link>
<el-link icon="el-icon-shopping-cart-2" type="success">商品列表</el-link>
<el-link disabled icon="el-icon-s-platform" type="danger">系统管理</el-link>
<el-link icon="el-icon-setting" type="warning">个人设置</el-link>
<el-link href="http://www.baidu.com" target="_blank" rel="external nofollow" 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 | — | - |