Commit 24ace0b6 by Tang

feat: 面包屑使用vuex

parent 450edfe0
......@@ -65,7 +65,7 @@ export default {
return (<div class="gs-dropdown-rect">
<div class="rect-title"
vOn:click_stop_prevent={() => {
this.$emit('itemClick', {...nav, parent: ['']})
this.$emit('itemClick', {...nav})
}}
>
<span class="pointer">{nav.nameInHeaderNav ? nav.nameInHeaderNav : nav.name}</span>
......@@ -83,7 +83,7 @@ export default {
{items.map(item => {
return (<div class="gs-dropdown-item">
<span vOn:click_stop_prevent={() => {
this.$emit('itemClick', item)
this.$emit('itemClick', {...item})
}}
class="pointer gs-hover"
>{item.name}
......
......@@ -28,7 +28,7 @@
aria-expanded="false">{{ nav.name }}</a>
<!-- Dropdown Menu -->
<HeaderDropdown :nav="nav"/>
<HeaderDropdown :nav="nav" @itemClick="handleItemClick"/>
<!-- End Dropdown Menu -->
</li>
<!-- Nav items End-->
......@@ -63,7 +63,10 @@ export default {
methods: {
handleNavClick(nav) {
this.currentNav = nav.id;
}
},
handleItemClick(item){
console.log(item);
},
},
};
</script>
......
<template>
<div class="org container">
<breadcrumb/>
<breadcrumb :value="bread"/>
<div class="row">
<div class="col-lg-3">
<left2/>
......@@ -26,7 +26,13 @@ export default {
zxcxgj,
},
data() {
return {};
return {
bread: [
{name: '首页', path: '/home'},
{name: '机构概况', path: '#'},
{name: '地方编码分支机构', path: '/Business'},
]
};
},
created() {
console.log(this.$route, "this.$route");
......
<template>
<div></div>
<div class="container">
<breadcrumb :value="bread"/>
<div class="row">
<div class="col-lg-3">
<left2/>
</div>
<div class="col-lg-9">
<router-view class="marginTopLg20"></router-view>
</div>
</div>
<div class="marginTop20">
<zxcxgj/>
</div>
</div>
</template>
<script>
......
<template>
<nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">机构概况</a></li>
<li class="breadcrumb-item active" aria-current="page">地方编码分支机构</li>
<template v-for="item in bread">
<li class="breadcrumb-item" v-if="!item.active" :key="item.path">
<a :href="item.path">{{ item.name }}</a>
</li>
<li class="breadcrumb-item active" v-else :key="item.path" aria-current="page">{{ item.name }}</li>
</template>
</ol>
</nav>
</template>
<script>
import {mapState} from 'vuex'
export default {
computed: {
...mapState('system',['breadcrumb']),
bread() {
const bread = [...this.breadcrumb];
bread[bread.length - 1].active = true;
return bread
},
}
}
</script>
<style lang="scss">
.breadcrumb{
margin-bottom: 20px ;
a{
.breadcrumb {
margin-bottom: 20px;
&-item {
font-size: 12px;
}
a {
color: #00799E;
text-decoration: none;
}
}
}
</style>
......@@ -2,11 +2,13 @@ import Vue from 'vue'
import Vuex from 'vuex'
import user from "./user/index.js"
import system from "./system/index.js"
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user: user,
user,
system
}
})
import state from "./state.js"
import mutations from "./mutations.js"
export default {
namespaced: true,
state,
mutations,
}
const mutations = {
// 设置面包屑导航
SET_BREADCRUMB(state, value) {
state.breadcrumb = value || []
},
// 设置子页面导航
SET_SUB_NAV(state, value) {
state.subNav = value || []
},
}
export default mutations
const state = {
breadcrumb: [],
subNav: [],
}
export default state
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment