Link 文字链接

点击下载learnelementuispringboot项目源码

效果图

el-link.vue页面效果图

项目里el-link.vue文件代码

<script>
export default {name: 'el_link'
}</script>
<!--https://element.eleme.cn/#/zh-CN/component/link
-->
<template><div><el-row :gutter="10"><h1>element组件：el-link</h1><el-divider/><el-col :span="10"><el-button type="text">基础的文字链接用法 ></el-button></el-col><el-col :span="1"><el-link href="https://element.eleme.io" target="_blank">默认链接</el-link></el-col><el-col :span="1"><el-link type="primary" href="https://element.eleme.io">主要链接</el-link></el-col><el-col :span="1"><el-link type="success">成功链接</el-link></el-col><el-col :span="1"><el-link type="warning">警告链接</el-link></el-col><el-col :span="1"><el-link type="danger">危险链接</el-link></el-col><el-col :span="1"><el-link type="info">信息链接</el-link></el-col></el-row><el-row :gutter="10"><el-col :span="10"><el-button type="text">禁用状态 ></el-button></el-col><el-col :span="1"><el-link type="primary" disabled>主要链接</el-link></el-col><el-col :span="1"><el-link type="success" disabled>成功链接</el-link></el-col><el-col :span="1"><el-link type="warning" disabled>警告链接</el-link></el-col><el-col :span="1"><el-link type="danger" disabled>危险链接</el-link></el-col><el-col :span="1"><el-link type="info" disabled>信息链接</el-link></el-col></el-row><el-row :gutter="10"><el-col :span="10"><el-button type="text">下划线 ></el-button></el-col><el-col :span="1"><el-link :underline="false">无下划线</el-link></el-col><el-col :span="1"><el-link>有下划线</el-link></el-col></el-row><el-row><el-button type="text">图标 ></el-button><el-link icon="el-icon-edit">编辑</el-link><el-link>查看<i class="el-icon-view el-icon--right"></i></el-link></el-row></div></template><style scoped></style>