el-breadcrumb(面包屑)和el-page-header(页头)的入门学习

自律最差的编程狗

已于 2022-06-24 14:36:45 修改

阅读量4.6k

点赞数

分类专栏： element-ui 文章标签：学习 elementui

于 2022-06-24 14:34:57 首次发布

本文链接：https://blog.csdn.net/qq_40765784/article/details/125444717

版权

element-ui 专栏收录该内容

43 篇文章 21 订阅

订阅专栏

el-breadcrumb(面包屑)和el-page-header(页头)的入门学习

适用场景

el-breadcrumb可用于展示复杂导航栏的层级结构
el-page-header可用于展示简单的导航栏层级结构

知识点

el-breadcrumb嵌套el-breadcrumb-item使用
el-breadcrumb的separator设置分割字符，默认/
el-breadcrumb的separator-class设置分割图标，会覆盖分割字符效果
el-breadcrumb-item的to设置跳转的路径，暂时不会使用
el-page-header的@back设置点击返回时的钩子
content为分割符右侧的文本内容设置

效果图

在这里插入图片描述

代码

<!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'>
        <el-breadcrumb separator='/' separator-class='el-icon-arrow-right'>
            <el-breadcrumb-item to="{path:'/'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href='http://www.baidu.com'>部门</a></el-breadcrumb-item>
            <el-breadcrumb-item>产业部门</el-breadcrumb-item>
        </el-breadcrumb>
        <el-page-header @back='handleBank' content='修改详情'></el-page-header>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return{

            }
        },
        methods:{
            handleBank(){
                console.log("go back")
            }
        }
    })
</script>