Browse Source

Merge pull request '修改侧边栏高亮逻辑' (#101) from zq-sliderMenuUpdate into master

Reviewed-on: #101
pull/102/head
zhangqi 1 month ago
parent
commit
c276f477b6
  1. 20
      src/components/SetLeftMenu.vue
  2. 8
      src/store/index.js

20
src/components/SetLeftMenu.vue

@ -3,12 +3,13 @@
<ul style="margin: 0;"> <ul style="margin: 0;">
<li v-for="(item, index) in menuList" :key="item.path + random()"> <li v-for="(item, index) in menuList" :key="item.path + random()">
<div <div
:class="[($route.path == item.path) || (item.noToPath && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']" @click="gotoPath(item, index)"> :class="[($route.path == item.path) || (!item.path && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']" @click="gotoPath(item, index)">
<SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF" <SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
:isActive="($route.path == item.path || (item.noToPath && curIndex == index))" /> :isActive="($route.path == item.path || (!item.path && curIndex == index))" />
<span class="title_text">{{ item.name }}</span> <span class="title_text">{{ item.name }}</span>
</div> </div>
<p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']" v-for="(item1) in item.list" <p :class="['flex', (activeFloor == item1.desc || activeFloor == item1.path) ? 'curActive' : '']" v-for="(item1) in item.list"
@click="setActiveCur(item1, item,index)" :key="item1.name">{{ item1.name }}</p> @click="setActiveCur(item1, item,index)" :key="item1.name">{{ item1.name }}</p>
</li> </li>
</ul> </ul>
@ -57,7 +58,7 @@ export default {
} }
}, },
mounted() { mounted() {
this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc; this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc || this.menuList[this.curIndex]?.list?.[0]?.path;
this.componentsName = this.menuList[this.curIndex]?.list?.[0]?.componentsName; this.componentsName = this.menuList[this.curIndex]?.list?.[0]?.componentsName;
this.$nextTick(() => { this.$nextTick(() => {
// //
@ -207,9 +208,14 @@ export default {
} }
this.scrollLock = true; this.scrollLock = true;
this.activeFloor = item1.desc; if(item1.desc){
this.activeFloor = item1.desc;
}
// //
if(item1.path)return if(item1.path){
this.activeFloor = item1.path;
return
}
this.$nextTick(() => { this.$nextTick(() => {
this.setHighActive(item1.desc); this.setHighActive(item1.desc);

8
src/store/index.js

@ -10,7 +10,7 @@ export default new Vuex.Store({
showFooter: false, showFooter: false,
showHeader: false, showHeader: false,
menuList: [], //目录菜单 menuList: [], //目录菜单
secondMenu:{}, secondMenu:{},//第三种侧边栏 -- 可折叠、 切换显示
showBreadcrumb: false, //是否展示面包屑 showBreadcrumb: false, //是否展示面包屑
breadRightText: '', //是否展示面包屑 breadRightText: '', //是否展示面包屑
pageTitle: '一般新文献', //页面标题 pageTitle: '一般新文献', //页面标题
@ -20,6 +20,7 @@ export default new Vuex.Store({
componentsName:'', componentsName:'',
currentMenuItem:null, currentMenuItem:null,
slidermenu:[], slidermenu:[],
// 第二种侧边栏--单项可跳转
rankMenuData: [ rankMenuData: [
{ {
name: '总利润', name: '总利润',
@ -98,6 +99,7 @@ export default new Vuex.Store({
] ]
}, },
], ],
// 第一种侧边栏--可折叠、可跳转
menuData: [ menuData: [
{ {
index: '1', index: '1',
@ -236,7 +238,7 @@ export default new Vuex.Store({
] ]
} }
], ],
siteSettingData:[ siteSettingData:[//第二种侧边栏 -- 点击单项进行页面滚动
{ {
name: '基本设置', name: '基本设置',
path: '/agent/siteBaseSetting', path: '/agent/siteBaseSetting',
@ -322,7 +324,7 @@ export default new Vuex.Store({
] ]
} }
], ],
siteServiceSettingData:[ siteServiceSettingData:[//第二种侧边栏 -- 单项切换对应组件
{ {
name: '服务设置', name: '服务设置',
path: '',//设置为空 path: '',//设置为空

Loading…
Cancel
Save