Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
hager
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2024-11-07 14:35:52 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
246c5f9e13bcb6ab6bc0f1b9e15c7e66e5bde5f3
246c5f9e
1 parent
dd995c58
fix 修复高度恢复后的显示
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
48 additions
and
20 deletions
src/components/common/hagerHeader.vue
src/components/common/hagerHeader.vue
View file @
246c5f9
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-11-07 14:
28:25
* @LastEditTime: 2024-11-07 14:
34:27
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
...
...
@@ -140,6 +140,24 @@ import $ from 'jquery';
import hagerMenu from '../hagerMenu.vue';
import { getProductCateAPI, getUserInfoAPI } from "@/api/hager.js";
// 处理菜单高度被挡住的问题
function isElementVisible($element) {
var windowHeight = $(window).height(); // 获取窗口高度
var windowScrollTop = $(window).scrollTop(); // 获取窗口的滚动高度
var elementOffsetTop = $element.offset().top; // 获取元素的顶部偏移
var elementHeight = $element.outerHeight(); // 获取元素高度
// 判断元素是否完全在可视区域内
if (elementOffsetTop >= windowScrollTop &&
elementOffsetTop + elementHeight <= windowScrollTop + windowHeight) {
return true; // 元素完全可见
} else if (elementOffsetTop < windowScrollTop ||
elementOffsetTop + elementHeight > windowScrollTop + windowHeight) {
return false; // 元素被挡住或部分被遮挡
}
}
export default {
components: { hagerMenu },
mixins: [mixin.init],
...
...
@@ -215,9 +233,36 @@ export default {
// }
// });
//
window.addEventListener('resize', this.handleHeightResize);
},
beforeDestroy() {
// 在组件销毁前移除监听器,防止内存泄漏
window.removeEventListener('resize', this.handleHeightResize);
},
methods: {
handleHeightResize () {
// 高度监听
this.$nextTick(() => {
var $productRightWrapper = $('.product-right-wrapper');
const productRightWrapper = document.querySelector('.product-right-wrapper');
// 获取窗口的高度
const windowHeight = $(window).height();
// 计算适合的高度,假设元素的 top 值固定,调整高度为可用高度
const topOffset = $('.product-right-wrapper').offset().top; // 获取元素距离顶部的偏移量
const availableHeight = windowHeight - topOffset;
if (isElementVisible($productRightWrapper)) {
console.log(".product-right-wrapper 完全可见");
productRightWrapper.style.removeProperty('height');
productRightWrapper.style.removeProperty('overflow-y');
} else {
console.log(".product-right-wrapper 被部分或完全遮挡");
// 设置 .product-right-wrapper 的最大高度,确保不会溢出窗口
productRightWrapper.style.height = availableHeight + 'px';
productRightWrapper.style.overflowY = 'scroll';
}
});
},
async getUserInfo () {
const { code, data } = await getUserInfoAPI();
if (code) {
...
...
@@ -267,23 +312,6 @@ export default {
onClickProduct() {
// 当鼠标悬停时
this.show = true;
// 处理菜单高度被挡住的问题
function isElementVisible($element) {
var windowHeight = $(window).height(); // 获取窗口高度
var windowScrollTop = $(window).scrollTop(); // 获取窗口的滚动高度
var elementOffsetTop = $element.offset().top; // 获取元素的顶部偏移
var elementHeight = $element.outerHeight(); // 获取元素高度
// 判断元素是否完全在可视区域内
if (elementOffsetTop >= windowScrollTop &&
elementOffsetTop + elementHeight <= windowScrollTop + windowHeight) {
return true; // 元素完全可见
} else if (elementOffsetTop < windowScrollTop ||
elementOffsetTop + elementHeight > windowScrollTop + windowHeight) {
return false; // 元素被挡住或部分被遮挡
}
}
this.$nextTick(() => {
var $productRightWrapper = $('.product-right-wrapper');
...
...
@@ -301,7 +329,7 @@ export default {
productRightWrapper.style.height = availableHeight + 'px';
productRightWrapper.style.overflowY = 'scroll';
}
})
})
;
},
onClick (item, index) {
this.product_info = item.children;
...
...
Please
register
or
login
to post a comment