Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c5279638 1 parent f04d08cc

fix IE注册页面高度遮挡问题

Inline Side-by-side
Showing 1 changed file with 17 additions and 12 deletions
1 <!-- 1 <!--
2 * @Date: 2024-10-18 17:57:33 2 * @Date: 2024-10-18 17:57:33
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-22 17:57:02 4 + * @LastEditTime: 2024-10-24 18:11:00
5 * @FilePath: /hager/src/views/user/index.vue 5 * @FilePath: /hager/src/views/user/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -44,14 +44,24 @@ export default { ...@@ -44,14 +44,24 @@ export default {
44 // 设置用户盒子高度 44 // 设置用户盒子高度
45 // 监听窗口的 resize 事件 45 // 监听窗口的 resize 事件
46 window.addEventListener('resize', this.handleHeight); 46 window.addEventListener('resize', this.handleHeight);
47 - // 判断是否被遮挡，让屏幕能滚动 47 + this.overflowScroll();
48 - if (!this.isElementInViewport('#router-view')) { // #router-view 被屏幕遮挡 48 + },
49 - $('.hager-user-page').css('height', 'auto') 49 + watch: {
50 - } else { 50 + '$route.path' (to, from) { // 路由变化
51 - $('.hager-user-page').css('height', '100vh') 51 + this.overflowScroll();
52 } 52 }
53 }, 53 },
54 methods: { 54 methods: {
55 + overflowScroll () {
56 + this.$nextTick(() => {
57 + // 判断是否被遮挡，让屏幕能滚动
58 + if (!this.isElementInViewport('#router-view')) { // #router-view 被屏幕遮挡
59 + $('.hager-user-page').css('height', 'auto')
60 + } else {
61 + $('.hager-user-page').css('height', '100vh')
62 + }
63 + })
64 + },
55 handleHeight () { 65 handleHeight () {
56 // 66 //
57 // if ($('#router-view').outerHeight() > $('.user-box').height()) { 67 // if ($('#router-view').outerHeight() > $('.user-box').height()) {
...@@ -60,12 +70,7 @@ export default { ...@@ -60,12 +70,7 @@ export default {
60 if ($('#router-view').outerHeight() < $('.user-box').height()) { 70 if ($('#router-view').outerHeight() < $('.user-box').height()) {
61 $('#router-view').height($('.user-box').outerHeight()) 71 $('#router-view').height($('.user-box').outerHeight())
62 } 72 }
63 - // 判断是否被遮挡，让屏幕能滚动 73 + this.overflowScroll();
64 - if (!this.isElementInViewport('#router-view')) { // #router-view 被屏幕遮挡
65 - $('.hager-user-page').css('height', 'auto')
66 - } else {
67 - $('.hager-user-page').css('height', '100vh')
68 - }
69 }, 74 },
70 isElementInViewport(element) { 75 isElementInViewport(element) {
71 var rect = $(element)[0].getBoundingClientRect(); // 获取元素相对于视口的大小和位置 76 var rect = $(element)[0].getBoundingClientRect(); // 获取元素相对于视口的大小和位置
......