fix(modal): [modal] after the window size is changed, the window is d…

…isplayed in the center (#2033) * fix(modal): [modal]dragging the modal box,will be displayed in the center * fix: modify review code * fix(modal): modify review code * fix: modify renderless of version
opentiny · Sep 4, 2024 · 49171e2 · 49171e2
1 parent 9350f7a
commit 49171e2
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 6 deletions.
diff --git a/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue b/examples/sites/demos/pc/app/modal/footer-slot-composition-api.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <tiny-button @click="visible = !visible" :reset-time="0">自定义底部</tiny-button>
-    <tiny-modal v-model="visible" show-footer>
+    <tiny-modal v-model="visible" footer-dragable show-footer>
       <template #footer>
         <tiny-button>自定义底部信息</tiny-button>
       </template>

diff --git a/examples/sites/demos/pc/app/modal/footer-slot.vue b/examples/sites/demos/pc/app/modal/footer-slot.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content">
     <tiny-button @click="visible = !visible" :reset-time="0">自定义底部</tiny-button>
-    <tiny-modal v-model="visible" show-footer>
+    <tiny-modal v-model="visible" footer-dragable show-footer>
       <template #footer>
         <tiny-button>自定义底部信息</tiny-button>
       </template>

diff --git a/packages/renderless/package.json b/packages/renderless/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.18.1",
+  "version": "3.18.2",
   "private": true,
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
@@ -43,4 +43,4 @@
     "esno": "^4.7.0",
     "tsup": "7.2.0"
   }
-}
+}
diff --git a/packages/renderless/src/modal/index.ts b/packages/renderless/src/modal/index.ts
@@ -140,6 +140,7 @@ export const beforeUnmouted =
     isMobileFirstMode && off(window, 'resize', api.resetDragStyle)
     off(document, 'keydown', api.handleGlobalKeydownEvent)
     off(window, 'hashchange', api.handleHashChange)
+    off(window, 'resize', api.resetModalViewPosition)
     api.removeMsgQueue()
     api.hideScrollbar()
 
@@ -294,13 +295,13 @@ export const open =
             } else {
               modalBoxElem.style.left = `${clientVisibleWidth / 2 - modalBoxElem.offsetWidth / 2}px`
             }
-
             if (
               modalBoxElem.offsetHeight + modalBoxElem.offsetTop + (props.marginSize as number) >
               clientVisibleHeight
             ) {
               modalBoxElem.style.top = `${props.marginSize}px`
             }
+            on(window, 'resize', api.resetModalViewPosition)
           }
 
           if (props.fullscreen) {
@@ -919,3 +920,11 @@ export const showScrollbar = (lockScrollClass) => () => {
 export const hideScrollbar = (lockScrollClass) => () => {
   removeClass(document.body, lockScrollClass)
 }
+
+export const resetModalViewPosition = (api: IModalApi) => () => {
+  const modalBoxElement = api.getBox()
+  const viewportWindow = getViewportWindow()
+  const clientVisibleWidth =
+    viewportWindow.document.documentElement.clientWidth || viewportWindow.document.body.clientWidth
+  modalBoxElement.style.left = `${clientVisibleWidth / 2 - modalBoxElement.offsetWidth / 2}px`
+}
diff --git a/packages/renderless/src/modal/vue.ts b/packages/renderless/src/modal/vue.ts
@@ -37,6 +37,7 @@ import {
   cancelEvent,
   open,
   resetDragStyle,
+  resetModalViewPosition,
   computedBoxStyle,
   handleHashChange,
   showScrollbar,
@@ -64,7 +65,8 @@ export const api = [
   'cancelEvent',
   'open',
   'beforeUnmouted',
-  'resetDragStyle'
+  'resetDragStyle',
+  'resetModalViewPosition'
 ]
 
 export const renderless = (
@@ -120,6 +122,7 @@ export const renderless = (
     mousedownEvent: mousedownEvent({ api, nextTick, props, state, emit, isMobileFirstMode }),
     dragEvent: dragEvent({ api, emit, parent, props, state }),
     resetDragStyle: resetDragStyle(api),
+    resetModalViewPosition: resetModalViewPosition(api),
     computedBoxStyle: computedBoxStyle({ props, isMobileFirstMode }),
     watchVisible: watchVisible({ api, props }),
     hideScrollbar: hideScrollbar(lockScrollClass),

diff --git a/packages/renderless/types/modal.type.ts b/packages/renderless/types/modal.type.ts
@@ -63,6 +63,7 @@ export interface IModalApi {
   mousedownEvent: (event: MouseEvent) => void
   dragEvent: (event: MouseEvent) => void
   resetDragStyle: () => void
+  resetModalViewPosition: () => void
 }
 
 export type IModalRenderlessParamUtils = ISharedRenderlessParamUtils<IModalConstants>