refactor: mount modal to body node

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/base/modal/Modal.story.vue

@@ -5,17 +5,35 @@ import { VModal } from "@/components/base/modal";
 function initState() {
   return {
     visible: false,
+    fullscreen: false,
+    width: 500,
+    title: "测试",
   };
 }
 </script>
 <template>
-  <Story title="Modal" :init-state="initState">
+  <Story :init-state="initState" title="Modal">
     <template #default="{ state }">
       <VButton type="secondary" @click="state.visible = true">打开</VButton>
-      <VModal v-model:visible="state.visible" title="测试">
-        Hello World
+      <VModal
+        v-model:visible="state.visible"
+        :fullscreen="state.fullscreen"
+        :title="state.title"
+        :width="state.width"
+      >
+        <div class="flex flex-col">
+          <img src="https://ryanc.cc/avatar" class="w-full" />
+          <img src="https://ryanc.cc/avatar" class="w-full" />
+          <img src="https://halo.run/logo" class="w-full" />
+        </div>
         <VButton type="secondary" @click="state.visible = false">关闭</VButton>
       </VModal>
     </template>
+    <template #controls="{ state }">
+      <HstCheckbox v-model="state.visible" title="Visible" />
+      <HstText v-model="state.title" title="Title" />
+      <HstNumber v-model="state.width" title="Width" />
+      <HstCheckbox v-model="state.fullscreen" title="Fullscreen" />
+    </template>
   </Story>
 </template>

src/components/base/modal/Modal.vue

@@ -41,44 +41,46 @@ function handleClose() {
 }
 </script>
 <template>
-  <transition
-    enter-active-class="ease-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="ease-in"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div
-      v-show="visible"
-      :class="wrapperClasses"
-      aria-modal="true"
-      class="modal-wrapper transform transition-all duration-200"
-      role="dialog"
-      tabindex="0"
-      @keyup.esc="handleClose()"
+  <Teleport to="body">
+    <transition
+      enter-active-class="ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
     >
-      <div class="modal-layer" @click="handleClose()" />
-      <div :style="contentStyles" class="modal-content">
-        <div class="modal-header">
-          <div class="modal-header-title">{{ title }}</div>
-          <div class="modal-header-actions">
-            <div class="modal-header-action" @click="handleClose()">
-              <IconClose />
+      <div
+        v-show="visible"
+        :class="wrapperClasses"
+        aria-modal="true"
+        class="modal-wrapper transform transition-all duration-200"
+        role="dialog"
+        tabindex="0"
+        @keyup.esc="handleClose()"
+      >
+        <div class="modal-layer" @click="handleClose()" />
+        <div :style="contentStyles" class="modal-content">
+          <div class="modal-header">
+            <div class="modal-header-title">{{ title }}</div>
+            <div class="modal-header-actions">
+              <div class="modal-header-action" @click="handleClose()">
+                <IconClose />
+              </div>
             </div>
           </div>
-        </div>
-        <div class="modal-body">
-          <slot />
-        </div>
-        <div class="modal-footer">
-          <slot name="footer">
-            <VButton @click="handleClose">关闭</VButton>
-          </slot>
+          <div class="modal-body">
+            <slot />
+          </div>
+          <div class="modal-footer">
+            <slot name="footer">
+              <VButton @click="handleClose">关闭</VButton>
+            </slot>
+          </div>
         </div>
       </div>
-    </div>
-  </transition>
+    </transition>
+  </Teleport>
 </template>
 
 <style lang="scss">
@@ -138,6 +140,7 @@ function handleClose() {
 
     .modal-body {
       @apply overflow-x-hidden overflow-y-auto;
+      @apply flex-1;
       word-wrap: break-word;
       padding: 12px 16px;
     }

src/views/HomeView.vue

@@ -9,6 +9,7 @@
           <VButton type="secondary" @click="visible = true">打开</VButton>
         </div>
       </div>
+      <p></p>
     </VModal>
     <VButton type="secondary" @click="visible = true">打开</VButton>
   </FilledLayout>
@@ -18,5 +19,6 @@ import { FilledLayout } from "@/layouts";
 import { VModal } from "@/components/base/modal";
 import { VButton } from "@/components/base/button";
 import { ref } from "vue";
+
 const visible = ref(false);
 </script>