vue前端不通过路由如何在单个页面（弹窗）里实现多层级(上下级，父子级)页面弹窗在本页面（弹窗）实现上下级穿透跳转达到面包屑的效果（单页面或弹窗内部跳转）
//下面代码，复制即可用，所见即所得
对element ui 的面包屑breadcrumb进行二次封装，写成一个组件，你可以直接复制粘贴，就是一个完整的组件。
引入组件：
//父组件中引入
import Mybreadcrumb from "../mybreadcrumb.vue";
父组件中引入写上
<Mybreadcrumb
v-model="innerPath"
:label-args="{ title2: active.title2, title3: active.title3 }"
:showInRoot="showInRoot"
:path="{
label: '财务报销费用',
key: '1',
children: [
{
label: '{title2}',//动态标题
key: '2',
children: [
{
label: '{title3}', //动态标题
key: '3',
},
],
},
],
}"
></Mybreadcrumb>
//这里需要引入需要跳转的子组件
<div style="height: calc(100% - 45px)">
//一级页面
<Indexpage
v-if="innerPath == 1"
@sentIndexFn="sentIndexFn"
style="height: 100%"
></Indexpage>
//二级页面
<Detail
v-else-if="innerPath == 2"
:detailData="detailData"
style="height: 100%"
></Detail>
//三级.....
</div>
**参数配置**
data(){
return{
// 层级设置
showInRoot: true,//是否显示第一个标题，是根节点
innerPath: 1,
active: {
title2: "", title3: "" }, //这是动态标题，值可以在某件事件触发时，赋值
}
下面是组件
这里是组件html
<template >
<div class="inner-breadcrumb" v-show="showInRoot || value!=root" style="height:40px;padding:0 15px;">
<el-breadcrumb class="breadcrumb" separator=">" style="float:left;">
<el-breadcrumb-item v-for="(node, index) in pathArr" :key="index" style="line-height:40px">
<span v-if="node.disable && index<pathArr.length-1" class="disable" :class="{
'last':index==pathArr.length-1}">{
{parse(node.label)}}</span>
<a v-else :class="{
'last':index==pathArr.length-1}" href="javascript:;" @click="change(node.key,node.disable)">{
{parse(node.label)}}</a>
</el-breadcrumb-item>
</el-breadcrumb>
<el-button v-if="showBack&&pathArr.length>1" style="float:right;padding:0;" type="text" @click="back">返回上一级</el-button>
</div>
</template>
下面时组件参数及配置：
export default {
name: "InnerBreadcrumb",
props: {
value: {
type: String,
},
path: {
type: Object,
required: true,
// 形如：
default: {
// label: "一级页面",
// key: "1",
// children: [
// {
// key: "2A",
// label: "二级页面A"
// },
// {
// key: "2B",
// label: "二级页面B",
// disable: true,
// children: [
// {
// key: "3",
// label: "三级页面"
// }
// ]
// }
// ]
}
},
showBack:{
// 是否显示返回上一级
type: Boolean,
default: false
},
showInRoot: {
// 是否在根目录显示
type: Boolean,
default: false
},
labelArgs:{
// 用于回显的参数 例如在 label 中使用 '设置:{info}',在 labelArgs传入{info:'用户信息'} 即可
type: Object,
default: {
}
}
},
data() {
return {
pathMap: null,
root: null,
pathArr: []
};
},
watch: {
value(val) {
this.buildPath(val);
}
},
methods: {
init() {
let path = this.path;
this.root = path.key;
let pathMap = {
};
// 遍历path树,给每个节点加上父节点的key，parentKey空则是根节点
let traverse = (node, parentKey) => {
node.parentKey = parentKey;
pathMap[node.key] = node;
if (node.children && node.children.length) {
for (let i = 0; i < node.children.length; i++) {
const child = node.children[i];
traverse(child, node.key);
}
}
};
traverse(path);
this.pathMap = pathMap;
},
buildPath(key) {
if(!key)
return;
// 建立路径数组
let node = this.pathMap[key];
if (!node) {
// console.warn("InnerBreadcrumb 找不到key:" + key);
return;
}
let arr = [];
while (node) {
arr.push(node);
node = this.pathMap[node.parentKey];
}
arr.reverse();
this.pathArr = arr;
},
parse(label){
const reg = /\{[^\}]+\}/g;
let labelCopy = label; // 复制一份
let match;
/* match的值
0: "{abc}"
groups: undefined
index: 3
input: "123{abc},{b}"
*/
while((match = reg.exec(label))!=null){
let key = match[0].substr(1,match[0].length-2);
let value = this.labelArgs[key];
if (value){
// console.warn('InnerBreadcrumb 找不到参数:', key);
labelCopy = labelCopy.replace(match[0],value);
}
}
return labelCopy;
},
change(key, disable) {
if (disable) return;
// console.log(key);
this.$emit("input", key);
},
back(){
if(this.pathArr && this.pathArr.length>1){
for (let i = this.pathArr.length-2; i >=0; i--) {
const node = this.pathArr[i];
if (!node.disable){
this.change(node.key);
return;
}
}
}
console.warn('InnerBreadcrumb 没有非disalbe的上级路径');
}
},
created() {
},
mounted() {
this.init();
this.buildPath(this.value);
}
};
这里是组件样式，可更改
<style lang="scss">
:root .inner-breadcrumb {
// background-color:#e8e8e8 ;
.breadcrumb{
span {
font-weight: normal;
color: #0D867F!important;
}
a {
font-weight: normal;
color: #0D867F!important;
color: #0D867F!important;
}
a:hover{
color: #3d9e99!important;
}
.last{
font-weight: bold!important;
cursor: default!important;
color: #0D867F!important;
}
.disable{
cursor: default!important;
color: #0D867F!important;
}
}
}
</style>