Element-Ui组件Link 文字链接

Posted 究极死胖兽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-Ui组件Link 文字链接相关的知识,希望对你有一定的参考价值。

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类型stringprimary / success / warning / danger / infodefault
underline是否下划线booleantrue
disabled是否禁用状态booleanfalse
href原生 href 属性string-
icon图标类名string-

以上是关于Element-Ui组件Link 文字链接的主要内容,如果未能解决你的问题,请参考以下文章

element-ui简单笔记

element-ui展示

ElementUI文字链接组件

20-Vue之Element UI-文字链接组件

Element-ui 之 解决表格中编辑与非编辑状态文字超出时弹出文字提示(利用Tooltip 组件)

解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题