docs(modal): 添加keep-last的demo

packages/devui-vue/devui/modal/src/composables/use-draggable.ts

@@ -13,17 +13,18 @@ function addUnit(value?: string | number, defaultUnit = 'px'): string {
   }
 }
 
-export const modalPosition = ref('translate(-50%, -50%)');
-
 interface Draggable {
   clearPosition: () => void;
+  modalPosition: Ref<string>;
 }
 
 export const useDraggable = (
   targetRef: Ref<HTMLElement | undefined>,
   dragRef: Ref<HTMLElement | undefined>,
   draggable: ComputedRef<boolean>
 ): Draggable => {
+  const modalPosition = ref('translate(-50%, -50%)');
+
   let transform = {
     offsetX: 0,
     offsetY: 0,
@@ -103,5 +104,6 @@ export const useDraggable = (
 
   return {
     clearPosition,
+    modalPosition,
   };
 };

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<HTMLElement>();
     const headerRef = ref<HTMLElement>();
     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) {

packages/devui-vue/docs/components/modal/index.md

@@ -45,6 +45,43 @@ export default defineComponent({
 
 :::
 
+### 保留最后一次关闭位置
+
+:::demo `keep-last`可使当前modal再次打开时保留上次关闭位置。
+
+```vue
+<template>
+  <d-button @click="handleClick">打开 modal</d-button>
+  <d-modal v-model="visible" title="Start Keep Last" :keep-last="true">
+    <div>name: {{ data.name }}</div>
+    <div>age: {{ data.age }}</div>
+    <div>address: {{ data.address }}</div>
+  </d-modal>
+</template>
+
+<script>
+import { defineComponent, ref, reactive } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const visible = ref(false);
+    const data = reactive({
+      name: 'Tom',
+      age: 20,
+      address: 'Chengdu',
+    });
+    const handleClick = () => {
+      visible.value = true;
+    };
+
+    return { visible, data, handleClick };
+  },
+});
+</script>
+```
+
+:::
+
 ### 自定义标题和操作按钮
 
 :::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 | [关闭前回调](#关闭前回调) |