fix: 修复文件列表的滚动穿透问题
This commit is contained in:
parent
a69fac8462
commit
6bcd850bca
@ -431,10 +431,10 @@
|
||||
<div
|
||||
v-show="grid"
|
||||
ref="gridDiv"
|
||||
v-loading="tableLoading"
|
||||
element-loading-text="文件加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="#f6f7fa88"
|
||||
@mouseenter="disableBodyScroll"
|
||||
@mouseleave="enableBodyScroll"
|
||||
>
|
||||
<van-checkbox-group
|
||||
ref="checkboxGroup"
|
||||
@ -451,6 +451,8 @@
|
||||
rowGap: '10px',
|
||||
overflow: 'auto',
|
||||
paddingBottom: '12px',
|
||||
overscrollBehavior: 'contain',
|
||||
transform: 'translateZ(0)',
|
||||
}"
|
||||
>
|
||||
<van-grid-item
|
||||
@ -774,11 +776,14 @@ import Clipboard from 'clipboard'
|
||||
|
||||
import { isNotDragUploadAllowed } from '@/components/SimpleUploader/dragUploadUtils'
|
||||
|
||||
import { scrollLockMixin } from '@/utils/scrollLockMixin'
|
||||
|
||||
import _ from 'lodash'
|
||||
import path from 'path'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
mixins: [scrollLockMixin],
|
||||
name: 'ShowFile',
|
||||
components: {
|
||||
SortDropdown,
|
||||
@ -3031,9 +3036,8 @@ export default {
|
||||
},
|
||||
tableBodyScroll(table, e) {
|
||||
this.fileListScrollTop = e.target.scrollTop
|
||||
let scrollBottom =
|
||||
e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
|
||||
if (scrollBottom < 200) {
|
||||
let scrollBottom = e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
|
||||
if (scrollBottom < (e.target.scrollHeight * 0.2)) {
|
||||
if (!this.finished) {
|
||||
if (!this.pageLoadCompleteList[this.pagination.pageIndex]) {
|
||||
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