• 学习内容
    1.el-link的标签使用
    2.el-link种类（default,primary,success,warning,danger,info）
    3.禁用链接关键字 disabled
    4.点击链接隐藏下划线关键字 underline
    5.带图标的链接 右图标使用i标签，左图标使用icon属性即可
    6.target=‘_blank’ 指空白页打开链接
  • 代码效果图
    代码效果图
  • 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <!-- 链接基础 target='_blank' 作用为打开新的窗口进入href链接 -->
        <el-row>
            <el-link href='https://www.baidu.com' target='_blank'>默认链接</el-link>
            <el-link type='primary'>主要链接</el-link>
            <el-link type='success'>成功链接</el-link>
            <el-link type='warning'>警告链接</el-link>
            <el-link type='danger'>危险链接</el-link>
            <el-link type='info'>信息链接</el-link>
        </el-row>
        <!-- 禁用链接 -->
        <el-row>
            <el-link href='https://www.baidu.com' target='_blank' disabled>默认链接</el-link>
            <el-link type='primary' disabled>主要链接</el-link>
            <el-link type='success' disabled>成功链接</el-link>
            <el-link type='warning' disabled>警告链接</el-link>
            <el-link type='danger' disabled>危险链接</el-link>
            <el-link type='info' disabled>信息链接</el-link>
        </el-row>
        <!-- 下划线 -->
        <el-row>
            <el-link :underline='false'>无下划线</el-link>
            <el-link>有下划线</el-link>
        </el-row>
        <!-- 图标文字链接 -->
        <el-row>
            <el-link icon='el-icon-edit'>编辑</el-link>
            <el-link>查看<i class='el-icon-view el-icon--right'></i></el-link>
        </el-row>
    </div>
</body>
</html>

<script>
    let vm = new Vue({
        el:'#app'
    })
</script>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }
</style>
# 学习 # elementui
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟