fix: 修复文件列表的滚动穿透问题
This commit is contained in:
parent
a69fac8462
commit
6bcd850bca
@ -431,10 +431,10 @@
|
|||||||
<div
|
<div
|
||||||
v-show="grid"
|
v-show="grid"
|
||||||
ref="gridDiv"
|
ref="gridDiv"
|
||||||
v-loading="tableLoading"
|
|
||||||
element-loading-text="文件加载中"
|
|
||||||
element-loading-spinner="el-icon-loading"
|
element-loading-spinner="el-icon-loading"
|
||||||
element-loading-background="#f6f7fa88"
|
element-loading-background="#f6f7fa88"
|
||||||
|
@mouseenter="disableBodyScroll"
|
||||||
|
@mouseleave="enableBodyScroll"
|
||||||
>
|
>
|
||||||
<van-checkbox-group
|
<van-checkbox-group
|
||||||
ref="checkboxGroup"
|
ref="checkboxGroup"
|
||||||
@ -451,6 +451,8 @@
|
|||||||
rowGap: '10px',
|
rowGap: '10px',
|
||||||
overflow: 'auto',
|
overflow: 'auto',
|
||||||
paddingBottom: '12px',
|
paddingBottom: '12px',
|
||||||
|
overscrollBehavior: 'contain',
|
||||||
|
transform: 'translateZ(0)',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<van-grid-item
|
<van-grid-item
|
||||||
@ -774,11 +776,14 @@ import Clipboard from 'clipboard'
|
|||||||
|
|
||||||
import { isNotDragUploadAllowed } from '@/components/SimpleUploader/dragUploadUtils'
|
import { isNotDragUploadAllowed } from '@/components/SimpleUploader/dragUploadUtils'
|
||||||
|
|
||||||
|
import { scrollLockMixin } from '@/utils/scrollLockMixin'
|
||||||
|
|
||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
import { mapGetters, mapState } from 'vuex'
|
import { mapGetters, mapState } from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
mixins: [scrollLockMixin],
|
||||||
name: 'ShowFile',
|
name: 'ShowFile',
|
||||||
components: {
|
components: {
|
||||||
SortDropdown,
|
SortDropdown,
|
||||||
@ -3031,9 +3036,8 @@ export default {
|
|||||||
},
|
},
|
||||||
tableBodyScroll(table, e) {
|
tableBodyScroll(table, e) {
|
||||||
this.fileListScrollTop = e.target.scrollTop
|
this.fileListScrollTop = e.target.scrollTop
|
||||||
let scrollBottom =
|
let scrollBottom = e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
|
||||||
e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
|
if (scrollBottom < (e.target.scrollHeight * 0.2)) {
|
||||||
if (scrollBottom < 200) {
|
|
||||||
if (!this.finished) {
|
if (!this.finished) {
|
||||||
if (!this.pageLoadCompleteList[this.pagination.pageIndex]) {
|
if (!this.pageLoadCompleteList[this.pagination.pageIndex]) {
|
||||||
return
|
return
|
||||||
|
|||||||
16
src/utils/scrollLockMixin.js
Normal file
16
src/utils/scrollLockMixin.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
export const scrollLockMixin = {
|
||||||
|
methods: {
|
||||||
|
// 鼠标进入滚动区域时,禁止body滚动
|
||||||
|
disableBodyScroll() {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
},
|
||||||
|
// 鼠标离开时,恢复body滚动
|
||||||
|
enableBodyScroll() {
|
||||||
|
document.body.style.overflow = 'auto'; // 或者 'visible'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 关键:在组件销毁前,确保恢复body滚动,防止页面卡死
|
||||||
|
beforeDestroy() {
|
||||||
|
this.enableBodyScroll();
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user