Browse Source

侧边导航对应高亮修改

zq-slider-menu
zq 3 weeks ago
parent
commit
5a77a8c7c2
  1. 49
      src/components/SetLeftMenu.vue

49
src/components/SetLeftMenu.vue

@ -45,6 +45,17 @@ export default {
scrollLock: false, scrollLock: false,
} }
}, },
watch: {
'$route'(to, from) {
console.log(to, from);
//
this.$nextTick(() => {
this.calculateFloorOffsets();
this.handleScroll(); //
});
}
},
mounted() { mounted() {
this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc; this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc;
this.$nextTick(() => { this.$nextTick(() => {
@ -52,7 +63,7 @@ export default {
this.scrollContainer = document.querySelector('.main-content') || this.scrollContainer = document.querySelector('.main-content') ||
document.getElementById('main-content') || document.getElementById('main-content') ||
window; window;
console.log(this.scrollContainer,'this.scrollContainer---');
if (this.scrollContainer) { if (this.scrollContainer) {
this.scrollContainer.addEventListener('scroll', this.handleScroll); this.scrollContainer.addEventListener('scroll', this.handleScroll);
this.calculateFloorOffsets(); this.calculateFloorOffsets();
@ -61,16 +72,6 @@ export default {
} }
}); });
}, },
watch: {
'$route'(to, from) {
console.log(to, from);
//
this.$nextTick(() => {
this.calculateFloorOffsets();
this.handleScroll(); //
});
}
},
beforeDestroy() { beforeDestroy() {
if (this.scrollContainer) { if (this.scrollContainer) {
this.scrollContainer.removeEventListener('scroll', this.handleScroll); this.scrollContainer.removeEventListener('scroll', this.handleScroll);
@ -86,30 +87,6 @@ export default {
var randomNumber = Math.random(); var randomNumber = Math.random();
return randomNumber return randomNumber
}, },
// calculateFloorOffsets() {
// this.menuList.forEach(item => {
// item.list.forEach(every => {
// const el = document.getElementById(every.desc);
// if (el) {
// every.offsetTop = el.offsetTop;
// }
// })
// });
// },
// handleScroll() {
// if (this.scrollLock) return
// const scrollContainer = this.$parent.$refs.scrollContainer;
// const scrollHeight = scrollContainer.scrollTop;
// let activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
// this.menuList[this.curIndex]['list'].forEach(item => {
// if (scrollHeight + 72 >= item.offsetTop) {
// activeFloor = item.desc; // ID
// } else {
// return false; //
// }
// });
// this.activeFloor = activeFloor; //
// },
calculateFloorOffsets() { calculateFloorOffsets() {
this.menuList.forEach(item => { this.menuList.forEach(item => {
item.list?.forEach(every => { item.list?.forEach(every => {
@ -189,7 +166,7 @@ export default {
console.log(type); console.log(type);
}, },
setActiveCur(dom, item) { setActiveCur(dom, item) {
if (item.path && this.$route.path !== item.path) { if (this.$route.path !== item.path) {
this.$router.push(item.path); this.$router.push(item.path);
store.commit('SET_PAGETITLE', item.name); store.commit('SET_PAGETITLE', item.name);
} }

Loading…
Cancel
Save