本文实例为大家分享了Vue+elementUI面包屑组件封装的具体代码,供大家参考,具体内容如下 一.选择用哪种样式 二.在组件文件夹下创建组件 三.在Bread.vue复制如下
本文实例为大家分享了Vue+elementUI面包屑组件封装的具体代码,供大家参考,具体内容如下
<template>
<!-- 面包屑 -->
<div class="bread">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item, index) in fromFather" :key=index :to="{ path: '/' + item.path }">{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
name: 'bread',
props: ['fromFather']
}
</script>
<style lang="less">
.bread {
background-color: #fff;
width: 100%;
height: 50px;
padding: 0 16px;
border: 1px #EFEFEF solid;
box-sizing: border-box;
box-shadow: 1px 2px 4px #BABABA;
margin-bottom: 36px;
.el-icon-arrow-right:before {
color: #000;
}
.el-breadcrumb__item {
font-size: 20px;
line-height: 50px;
}
.el-breadcrumb__inner {
cursor: pointer !important;
}
}
</style>
// html代码
<!-- 面包屑导航 -->
<Bread :fromFather="dataPath"></Bread>
// js代码
import Bread from '../../../components/Bread.vue' // 引入面包屑组件
export default {
name: 'nicklist',
components: {
Bread // 注册面包屑组件
},
data() {
return {
dataPath: [
{
name: '课程', // 名称,自定
path: 'nicklist' // 路由导航,自定
},
{
name: '课程管理',
path: 'nicklist'
}
] // 面包屑数据
}
}
}
效果如图:
--结束END--
本文标题: vue+elementUI面包屑组件封装方法详解
本文链接: https://www.lsjlt.com/news/145727.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0