将 useDialogScrollLock 替换为 useScrollLock

This commit is contained in:
jxxghp
2025-07-10 12:56:51 +08:00
parent ad857b0810
commit b3d3561111
3 changed files with 10 additions and 10 deletions
+2 -2
View File
@@ -6,7 +6,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, watch, onBeforeUnmount } from 'vue' import { computed, watch, onBeforeUnmount } from 'vue'
import { useDialogScrollLockWithWatch } from '@/composables/useDialogScrollLock' import { useScrollLockWithWatch } from '@/composables/useScrollLock'
// Props // Props
interface Props { interface Props {
@@ -35,7 +35,7 @@ const dialogModel = computed({
}) })
// 使用滚动锁定 // 使用滚动锁定
const { isLocked, lockScroll, restoreScroll } = useDialogScrollLockWithWatch(dialogModel, { const { isLocked, lockScroll, restoreScroll } = useScrollLockWithWatch(dialogModel, {
autoRestore: true, autoRestore: true,
preserveScrollPosition: props.preserveScrollPosition, preserveScrollPosition: props.preserveScrollPosition,
preventTouchScroll: props.preventTouchScroll, preventTouchScroll: props.preventTouchScroll,
@@ -1,7 +1,7 @@
import { ref, watch, onBeforeUnmount, readonly } from 'vue' import { ref, watch, onBeforeUnmount, readonly } from 'vue'
// 弹窗滚动锁定配置 // 滚动锁定配置
export interface DialogScrollLockOptions { export interface ScrollLockOptions {
// 是否在组件卸载时自动恢复滚动 // 是否在组件卸载时自动恢复滚动
autoRestore?: boolean autoRestore?: boolean
// 是否保存和恢复滚动位置 // 是否保存和恢复滚动位置
@@ -17,7 +17,7 @@ export interface DialogScrollLockOptions {
} }
// 默认配置 // 默认配置
const DEFAULT_OPTIONS: Required<DialogScrollLockOptions> = { const DEFAULT_OPTIONS: Required<ScrollLockOptions> = {
autoRestore: true, autoRestore: true,
preserveScrollPosition: true, preserveScrollPosition: true,
preventTouchScroll: true, preventTouchScroll: true,
@@ -28,7 +28,7 @@ const DEFAULT_OPTIONS: Required<DialogScrollLockOptions> = {
}, },
} }
export function useDialogScrollLock(options: DialogScrollLockOptions = {}) { export function useScrollLock(options: ScrollLockOptions = {}) {
const config = { ...DEFAULT_OPTIONS, ...options } const config = { ...DEFAULT_OPTIONS, ...options }
// 状态管理 // 状态管理
@@ -189,8 +189,8 @@ export function useDialogScrollLock(options: DialogScrollLockOptions = {}) {
} }
// 便捷的自动监听版本 // 便捷的自动监听版本
export function useDialogScrollLockWithWatch(target: any, options: DialogScrollLockOptions = {}) { export function useScrollLockWithWatch(target: any, options: ScrollLockOptions = {}) {
const scrollLock = useDialogScrollLock(options) const scrollLock = useScrollLock(options)
// 自动监听目标值的变化 // 自动监听目标值的变化
const stopWatcher = scrollLock.watchTarget(target) const stopWatcher = scrollLock.watchTarget(target)
+2 -2
View File
@@ -18,7 +18,7 @@ import { useRoute } from 'vue-router'
import { filterMenusByPermission } from '@/utils/permission' import { filterMenusByPermission } from '@/utils/permission'
import { onUnreadMessage } from '@/utils/badge' import { onUnreadMessage } from '@/utils/badge'
import { usePullDownGesture } from '@/composables/usePullDownGesture' import { usePullDownGesture } from '@/composables/usePullDownGesture'
import { useDialogScrollLockWithWatch } from '@/composables/useDialogScrollLock' import { useScrollLockWithWatch } from '@/composables/useScrollLock'
import { usePWA } from '@/composables/usePWA' import { usePWA } from '@/composables/usePWA'
import OfflinePage from '@/layouts/components/OfflinePage.vue' import OfflinePage from '@/layouts/components/OfflinePage.vue'
import { useGlobalOfflineStatus } from '@/composables/useOfflineStatus' import { useGlobalOfflineStatus } from '@/composables/useOfflineStatus'
@@ -164,7 +164,7 @@ const handleServiceWorkerMessage = (event: MessageEvent) => {
} }
// 使用滚动锁定 composable(自动监听showPluginQuickAccess的变化) // 使用滚动锁定 composable(自动监听showPluginQuickAccess的变化)
useDialogScrollLockWithWatch(showPluginQuickAccess) useScrollLockWithWatch(showPluginQuickAccess)
// 检查是否可以使用下拉手势 // 检查是否可以使用下拉手势
const canUsePullGesture = () => { const canUsePullGesture = () => {