From 769148b780709c2172de2fff6ff3f02598d9914a Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Tue, 24 May 2022 13:44:10 +0800
Subject: [PATCH] fix(components): [dialog] set destory-on-close drag position
 abnormal (#7822)

---
 packages/components/dialog/src/dialog-content.vue | 9 ++++++---
 packages/components/dialog/src/dialog.vue         | 9 +--------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/components/dialog/src/dialog-content.vue b/packages/components/dialog/src/dialog-content.vue
index ef6c8ec10f..39a3a1ef97 100644
--- a/packages/components/dialog/src/dialog-content.vue
+++ b/packages/components/dialog/src/dialog-content.vue
@@ -40,10 +40,10 @@
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { FOCUS_TRAP_INJECTION_KEY } from '@element-plus/components/focus-trap'
-import { useLocale } from '@element-plus/hooks'
+import { useDraggable, useLocale } from '@element-plus/hooks'
 import { CloseComponents, composeRefs } from '@element-plus/utils'
 import { dialogInjectionKey } from '@element-plus/tokens'
 import { dialogContentEmits, dialogContentProps } from './dialog-content'
@@ -52,11 +52,14 @@ const { t } = useLocale()
 const { Close } = CloseComponents
 
 defineOptions({ name: 'ElDialogContent' })
-defineProps(dialogContentProps)
+const props = defineProps(dialogContentProps)
 defineEmits(dialogContentEmits)
 
 const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey)!
 const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY)!
 
 const composedDialogRef = composeRefs(focusTrapRef, dialogRef)
+
+const draggable = computed(() => props.draggable)
+useDraggable(dialogRef, headerRef, draggable)
 </script>
diff --git a/packages/components/dialog/src/dialog.vue b/packages/components/dialog/src/dialog.vue
index dd473659d4..78b69b0d4a 100644
--- a/packages/components/dialog/src/dialog.vue
+++ b/packages/components/dialog/src/dialog.vue
@@ -70,12 +70,7 @@
 <script lang="ts" setup>
 import { computed, provide, ref, useSlots } from 'vue'
 import { ElOverlay } from '@element-plus/components/overlay'
-import {
-  useDeprecated,
-  useDraggable,
-  useNamespace,
-  useSameTarget,
-} from '@element-plus/hooks'
+import { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'
 import { dialogInjectionKey } from '@element-plus/tokens'
 import ElFocusTrap from '@element-plus/components/focus-trap'
 import ElDialogContent from './dialog-content.vue'
@@ -136,8 +131,6 @@ const overlayEvent = useSameTarget(onModalClick)
 
 const draggable = computed(() => props.draggable && !props.fullscreen)
 
-useDraggable(dialogRef, headerRef, draggable)
-
 defineExpose({
   /** @description whether the dialog is visible */
   visible,