Element-Ui组件(四)Link 文字链接

2023-05-16

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-
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Element-Ui组件(四)Link 文字链接 的相关文章

随机推荐