From 5a77a8c7c29a5d4fd823dad7e38fe77272841379 Mon Sep 17 00:00:00 2001 From: zq <136432190602163.com> Date: Fri, 20 Jun 2025 15:22:48 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E5=AF=BC=E8=88=AA=E5=AF=B9?= =?UTF-8?q?=E5=BA=94=E9=AB=98=E4=BA=AE=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SetLeftMenu.vue | 181 ++++++++++++++++++----------------------- 1 file changed, 79 insertions(+), 102 deletions(-) diff --git a/src/components/SetLeftMenu.vue b/src/components/SetLeftMenu.vue index 4298215..9a65843 100644 --- a/src/components/SetLeftMenu.vue +++ b/src/components/SetLeftMenu.vue @@ -45,22 +45,7 @@ export default { scrollLock: false, } }, - mounted() { - this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc; - this.$nextTick(() => { - // 更可靠的获取滚动容器方式 - this.scrollContainer = document.querySelector('.main-content') || - document.getElementById('main-content') || - window; - console.log(this.scrollContainer,'this.scrollContainer---'); - if (this.scrollContainer) { - this.scrollContainer.addEventListener('scroll', this.handleScroll); - this.calculateFloorOffsets(); - } else { - console.error('未找到滚动容器'); - } - }); - }, + watch: { '$route'(to, from) { console.log(to, from); @@ -71,11 +56,27 @@ export default { }); } }, - beforeDestroy() { +mounted() { + this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc; + this.$nextTick(() => { + // 更可靠的获取滚动容器方式 + this.scrollContainer = document.querySelector('.main-content') || + document.getElementById('main-content') || + window; + if (this.scrollContainer) { - this.scrollContainer.removeEventListener('scroll', this.handleScroll); + this.scrollContainer.addEventListener('scroll', this.handleScroll); + this.calculateFloorOffsets(); + } else { + console.error('未找到滚动容器'); } - }, + }); +}, +beforeDestroy() { + if (this.scrollContainer) { + this.scrollContainer.removeEventListener('scroll', this.handleScroll); + } +}, created() { }, computed: { @@ -86,68 +87,44 @@ export default { var randomNumber = Math.random(); 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() { - this.menuList.forEach(item => { - item.list?.forEach(every => { - const el = document.getElementById(every.desc); - if (el) { - // 获取元素相对于视口顶部的距离 - every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset; - } - }); - }); - }, - - handleScroll() { - if (this.scrollLock || !this.menuList[this.curIndex]?.list) return; - - const scrollPosition = this.getScrollPosition(); - let activeFloor = null; - - // 从下往上查找当前可见区域对应的楼层 - for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) { - const item = this.menuList[this.curIndex].list[i]; - if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量 - activeFloor = item.desc; - break; + this.menuList.forEach(item => { + item.list?.forEach(every => { + const el = document.getElementById(every.desc); + if (el) { + // 获取元素相对于视口顶部的距离 + every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset; } + }); + }); + }, + + handleScroll() { + if (this.scrollLock || !this.menuList[this.curIndex]?.list) return; + + const scrollPosition = this.getScrollPosition(); + let activeFloor = null; + + // 从下往上查找当前可见区域对应的楼层 + for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) { + const item = this.menuList[this.curIndex].list[i]; + if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量 + activeFloor = item.desc; + break; } - - if (activeFloor && this.activeFloor !== activeFloor) { - this.activeFloor = activeFloor; - } - }, - - getScrollPosition() { - if (this.scrollContainer === window) { - return window.pageYOffset || document.documentElement.scrollTop; - } - return this.scrollContainer.scrollTop; - }, + } + + if (activeFloor && this.activeFloor !== activeFloor) { + this.activeFloor = activeFloor; + } + }, + + getScrollPosition() { + if (this.scrollContainer === window) { + return window.pageYOffset || document.documentElement.scrollTop; + } + return this.scrollContainer.scrollTop; + }, // setActiveCur(dom, item) { // if (this.$route.path != item.path) { // this.$router.push(item.path) @@ -189,31 +166,31 @@ export default { console.log(type); }, setActiveCur(dom, item) { - if (item.path && this.$route.path !== item.path) { - this.$router.push(item.path); - store.commit('SET_PAGETITLE', item.name); - } - - this.scrollLock = true; - this.activeFloor = dom; - - this.$nextTick(() => { - this.setHighActive(dom); - setTimeout(() => { - this.scrollLock = false; - }, 1000); - }); - }, + if (this.$route.path !== item.path) { + this.$router.push(item.path); + store.commit('SET_PAGETITLE', item.name); + } + + this.scrollLock = true; + this.activeFloor = dom; + + this.$nextTick(() => { + this.setHighActive(dom); + setTimeout(() => { + this.scrollLock = false; + }, 1000); + }); +}, - setHighActive(dom) { - const ele = document.getElementById(dom); - if (ele) { - ele.scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); - } - } +setHighActive(dom) { + const ele = document.getElementById(dom); + if (ele) { + ele.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } +} } }