From e876e7eae216c50293773921ee1b12f00de454fb Mon Sep 17 00:00:00 2001 From: zhanglongbao <993917246@qq.com> Date: Wed, 28 Sep 2022 20:14:36 +0800 Subject: [PATCH 1/3] =?UTF-8?q?docs(modal):=20modal=E6=B7=BB=E5=8A=A0keep-?= =?UTF-8?q?last=E7=9A=84demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/docs/components/modal/index.md | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/devui-vue/docs/components/modal/index.md b/packages/devui-vue/docs/components/modal/index.md index 22219b347c..2bf41ae9b8 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`插槽同理。 From 4b9b5e4195a150e564dbbb1fecdc072afdb6842b Mon Sep 17 00:00:00 2001 From: zhanglongbao <993917246@qq.com> Date: Wed, 28 Sep 2022 20:31:08 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs(modal):=20=E6=B7=BB=E5=8A=A0=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/docs/components/modal/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devui-vue/docs/components/modal/index.md b/packages/devui-vue/docs/components/modal/index.md index 2bf41ae9b8..44a1c73797 100644 --- a/packages/devui-vue/docs/components/modal/index.md +++ b/packages/devui-vue/docs/components/modal/index.md @@ -231,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 | [关闭前回调](#关闭前回调) | From e93a13abc96fc66ace54db63f2056a27057418f6 Mon Sep 17 00:00:00 2001 From: zhanglongbao <993917246@qq.com> Date: Sun, 2 Oct 2022 12:32:37 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(modal):=20=E4=BF=AE=E5=A4=8D=E4=B8=A4?= =?UTF-8?q?=E4=B8=AA=E5=BC=B9=E7=AA=97=E5=AE=9A=E4=BD=8D=E4=BA=92=E7=9B=B8?= =?UTF-8?q?=E5=B9=B2=E6=89=B0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/modal/src/composables/use-draggable.ts | 6 ++++-- packages/devui-vue/devui/modal/src/modal.tsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) 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) {