mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-07-01 04:21:37 +08:00
重构对话框组件,将所有 DialogWrapper 替换为 VDialog,并更新缓存版本至 v1.1.0
This commit is contained in:
@@ -59,7 +59,7 @@ function handleCancel() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogWrapper :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" :max-width="width">
|
||||
<VDialog :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)" :max-width="width">
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<div class="d-flex align-center justify-start mt-3">
|
||||
@@ -82,5 +82,5 @@ function handleCancel() {
|
||||
</VCardActions>
|
||||
<VDialogCloseBtn @click="handleCancel" />
|
||||
</VCard>
|
||||
</DialogWrapper>
|
||||
</VDialog>
|
||||
</template>
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<VDialog v-model="dialogModel" v-bind="$attrs" @update:model-value="handleDialogChange">
|
||||
<slot />
|
||||
</VDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, watch, onBeforeUnmount } from 'vue'
|
||||
import { useScrollLockWithWatch } from '@/composables/useScrollLock'
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
modelValue?: boolean
|
||||
// 滚动锁定配置
|
||||
scrollLock?: boolean
|
||||
preserveScrollPosition?: boolean
|
||||
preventTouchScroll?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
scrollLock: true,
|
||||
preserveScrollPosition: true,
|
||||
preventTouchScroll: true,
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
// 计算属性
|
||||
const dialogModel = computed({
|
||||
get: () => props.modelValue || false,
|
||||
set: (value: boolean) => emit('update:modelValue', value),
|
||||
})
|
||||
|
||||
// 使用滚动锁定
|
||||
const { isLocked, lockScroll, restoreScroll } = useScrollLockWithWatch(dialogModel, {
|
||||
autoRestore: true,
|
||||
preserveScrollPosition: props.preserveScrollPosition,
|
||||
preventTouchScroll: props.preventTouchScroll,
|
||||
})
|
||||
|
||||
// 处理弹窗状态变化
|
||||
const handleDialogChange = (value: boolean) => {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// 监听弹窗状态变化
|
||||
watch(
|
||||
dialogModel,
|
||||
newValue => {
|
||||
if (props.scrollLock) {
|
||||
if (newValue) {
|
||||
lockScroll()
|
||||
} else {
|
||||
restoreScroll()
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 组件卸载时确保恢复滚动
|
||||
onBeforeUnmount(() => {
|
||||
if (isLocked.value) {
|
||||
restoreScroll()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user