fix(dialog-box): 修复对话框移动后动态style没更新的bug (#195)

opentiny · May 6, 2023 · b89b033 · b89b033
1 parent 4d44883
commit b89b033
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/examples/docs/resources/pc/demo/dialog-box/draggable.vue b/examples/docs/resources/pc/demo/dialog-box/draggable.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="jsx">
-import { Button, DialogBox } from '@opentiny/vue'
+import { Button, DialogBox, Notify } from '@opentiny/vue'
 
 export default {
   components: {
@@ -33,13 +33,19 @@ export default {
   },
   methods: {
     dragStart() {
-      window.tinyLog('拖拽开始')
+      Notify({
+        message: '拖拽开始',
+        position: 'top-right'
+      })
     },
     dragEnd() {
-      window.tinyLog('拖拽结束')
+      Notify({
+        message: '拖拽结束',
+        position: 'top-right'
+      })
     },
     dragMove() {
-      window.tinyLog('拖拽移动')
+      // 拖拽移动事件
     }
   }
 }

diff --git a/packages/renderless/src/dialog-box/index.ts b/packages/renderless/src/dialog-box/index.ts
@@ -31,13 +31,13 @@ export const computedStyle = ({ props, state }) => () => {
 
   if (!state.isFull) {
     style.width = width
-    style.top = top
+    style.top = state.top || top
 
     if (rightSlide) {
       style.right = 0
       style.height = 'calc(100vh - ' + style.top + ')'
     } else {
-      style.left = 'calc((100vw - ' + width + ') / 2)'
+      style.left = state.left || 'calc((100vw - ' + width + ') / 2)'
     }
   }
 
@@ -239,6 +239,8 @@ export const handleDrag = ({ parent, props, state, emit }) => (event) => {
 
     modalBoxElem.style.left = `${left}px`
     modalBoxElem.style.top = `${top}px`
+    state.left = `${left}px`
+    state.top = `${top}px`
 
     state.emitter.emit('boxdrag')
     emit('drag-move', event)