diff --git a/packages/devui-vue/devui/modal/src/composables/use-draggable.ts b/packages/devui-vue/devui/modal/src/composables/use-draggable.ts index 0daad8e758..82c75c18a1 100644 --- a/packages/devui-vue/devui/modal/src/composables/use-draggable.ts +++ b/packages/devui-vue/devui/modal/src/composables/use-draggable.ts @@ -13,10 +13,9 @@ function addUnit(value?: string | number, defaultUnit = 'px'): string { } } -export const modalPosition = ref('translate(-50%, -50%)'); - interface Draggable { clearPosition: () => void; + modalPosition: Ref; } export const useDraggable = ( @@ -24,6 +23,8 @@ export const useDraggable = ( dragRef: Ref, draggable: ComputedRef ): Draggable => { + const modalPosition = ref('translate(-50%, -50%)'); + let transform = { offsetX: 0, offsetY: 0, @@ -103,5 +104,6 @@ export const useDraggable = ( return { clearPosition, + modalPosition, }; }; diff --git a/packages/devui-vue/devui/modal/src/modal.tsx b/packages/devui-vue/devui/modal/src/modal.tsx index 0063666524..af5afbff12 100644 --- a/packages/devui-vue/devui/modal/src/modal.tsx +++ b/packages/devui-vue/devui/modal/src/modal.tsx @@ -3,7 +3,7 @@ import { modalProps, ModalProps, ModalType } from './modal-types'; import { Icon } from '../../icon'; import { FixedOverlay } from '../../overlay'; import { useModal, useModalRender } from './composables/use-modal'; -import { useDraggable, modalPosition } from './composables/use-draggable'; +import { useDraggable } from './composables/use-draggable'; import DModalHeader from './components/header'; import DModalBody from './components/body'; import { useNamespace } from '../../shared/hooks/use-namespace'; @@ -28,7 +28,7 @@ export default defineComponent({ const dialogRef = ref(); const headerRef = ref(); const draggable = computed(() => props.draggable); - const { clearPosition } = useDraggable(dialogRef, headerRef, draggable); + const { clearPosition, modalPosition } = useDraggable(dialogRef, headerRef, draggable); watch(modelValue, (val) => { if (val && !keepLast.value) { diff --git a/packages/devui-vue/docs/components/modal/index.md b/packages/devui-vue/docs/components/modal/index.md index 22219b347c..44a1c73797 100644 --- a/packages/devui-vue/docs/components/modal/index.md +++ b/packages/devui-vue/docs/components/modal/index.md @@ -45,6 +45,43 @@ export default defineComponent({ ::: +### 保留最后一次关闭位置 + +:::demo `keep-last`可使当前modal再次打开时保留上次关闭位置。 + +```vue + + + +``` + +::: + ### 自定义标题和操作按钮 :::demo `header`插槽可以自定义 Modal 顶部区域,子组件`d-modal-header`为顶部区域提供了默认样式,自定义样式可通过在子组件设置`style/class`实现。`footer`插槽同理。 @@ -194,7 +231,7 @@ export default defineComponent({ | :--------------------- | :----------------------------------- | :----- | :----------------------------------------- | :------------------------ | | v-model | `boolean` | false | 是否显示 Modal | [基础用法](#基础用法) | | title | `string` | - | 可选,Modal 的标题 | [基础用法](#基础用法) | -| keep-last | `boolean` | false | 可选,是否保留上次移动位置 | +| keep-last | `boolean` | false | 可选,是否保留上次移动位置 | [保留最后一次关闭位置](#保留最后一次关闭位置) | lock-scroll | `boolean` | true | 可选,是否将 body 滚动锁定 | | close-on-click-overlay | `boolean` | true | 可选,点击空白处是否能关闭 Modal | | before-close | `(done) => void` | - | 可选,关闭前的回调,调用 done 可关闭 Modal | [关闭前回调](#关闭前回调) |