feat: 完善确认框组件动画效果

FightingDesign · Aug 15, 2023 · 44436bf · 44436bf
1 parent 7f8332c
commit 44436bf
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 40 deletions.
diff --git a/packages/fighting-design/_hooks/use-confirm-box/index.ts b/packages/fighting-design/_hooks/use-confirm-box/index.ts
@@ -11,7 +11,6 @@ export const useConfirmBox = (component: Component) => {
 
     render(vNode, container)
 
-    document.body.appendChild(container.firstElementChild as HTMLElement)
     return vNode.component as ComponentInternalInstance
   }
 

diff --git a/packages/fighting-design/confirm-box/src/confirm-box.vue b/packages/fighting-design/confirm-box/src/confirm-box.vue
@@ -4,46 +4,66 @@
   import { FSpace } from '../../space'
   import { FCloseBtn } from '../../close-btn'
   import { ref } from 'vue'
+  import { useRun } from '../../_hooks'
 
   defineOptions({ name: 'FConfirmBox' })
 
   const prop = defineProps(Props)
 
+  const { run } = useRun()
+
   /** 是否展示确认框 */
   const isShow = ref(prop.show)
 
   /** 关闭确认框 */
   const handelClose = (): void => {
     isShow.value = false
   }
+
+  /** 开启之后执行的回调方法 */
+  const handleOpenEnd = (): void => {
+    run(prop.onOpen, isShow.value)
+  }
+
+  /** 关闭之后执行的回调方法 */
+  const handleCloseEnd = (): void => {
+    run(prop.onClose, isShow.value)
+  }
 </script>
 
 <template>
-  <transition name="modal">
-    <div v-if="isShow" class="f-confirm-box">
-      <!-- 遮罩层 -->
-      <div class="f-confirm-box__mask" />
-
-      <!-- 容器 -->
-      <div class="f-confirm-box__container">
-        <!-- 头部 -->
-        <div class="f-confirm-box__header">
-          <div class="f-confirm-box__title">{{ title }}</div>
-
-          <f-close-btn :on-click="handelClose" />
-        </div>
+  <teleport to="body">
+    <transition
+      name="f-confirm-box__trans"
+      appear
+      @after-enter="handleOpenEnd"
+      @after-leave="handleCloseEnd"
+    >
+      <div v-if="isShow" class="f-confirm-box">
+        <!-- 遮罩层 -->
+        <div class="f-confirm-box__mask" />
+
+        <!-- 容器 -->
+        <div class="f-confirm-box__container">
+          <!-- 头部 -->
+          <div class="f-confirm-box__header">
+            <div class="f-confirm-box__title">{{ title }}</div>
+
+            <f-close-btn :on-click="handelClose" />
+          </div>
 
-        <!-- 身体 -->
-        <div class="f-confirm-box__body">{{ content }}</div>
+          <!-- 身体 -->
+          <div class="f-confirm-box__body">{{ content }}</div>
 
-        <!-- 底部 -->
-        <div class="f-confirm-box__footer">
-          <f-space>
-            <f-button :on-click="onCancel">取消</f-button>
-            <f-button type="primary" :on-click="onConfirm">确定</f-button>
-          </f-space>
+          <!-- 底部 -->
+          <div class="f-confirm-box__footer">
+            <f-space>
+              <f-button :on-click="onCancel">取消</f-button>
+              <f-button type="primary" :on-click="onConfirm">确定</f-button>
+            </f-space>
+          </div>
         </div>
       </div>
-    </div>
-  </transition>
+    </transition>
+  </teleport>
 </template>
diff --git a/packages/fighting-design/confirm-box/src/props.ts b/packages/fighting-design/confirm-box/src/props.ts
@@ -4,7 +4,7 @@ import type { HandleMouse, HandleChange } from '../../_interface'
 
 export const Props = {
   /** 是否展示 */
-  show: setBooleanProp(),
+  show: setBooleanProp(false),
   /** 标题内容 */
   title: setStringProp(),
   /** 提示内容 */

diff --git a/packages/fighting-theme/src/confirm-box.scss b/packages/fighting-theme/src/confirm-box.scss
@@ -50,7 +50,7 @@
     // 身体
     .f-confirm-box__body {
       margin-top: 24px;
-      margin-bottom: 15px;
+      margin-bottom: 18px;
       font-size: 15px;
       color: #333;
     }
@@ -61,17 +61,16 @@
       align-items: center;
       justify-content: flex-end;
     }
+  }
 
-    // // 主内容动画样式
-    // &-trans-enter-active,
-    // &-trans-leave-active {
-    //   transition: all 0.2s ease-out;
-    // }
+  &__trans-enter-active,
+  &__trans-leave-active {
+    transition: all 0.2s ease-out;
+  }
 
-    // &-trans-enter-from,
-    // &-trans-leave-to {
-    //   transform: scale(0.4);
-    //   opacity: 0;
-    // }
+  &__trans-enter-from,
+  &__trans-leave-to {
+    transform: scale(1.1);
+    opacity: 0;
   }
 }
diff --git a/start/index.html b/start/index.html
@@ -2,10 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      href="https://raw.githubusercontent.com/Tyh2001/images/4ad62a8f00aa2473deca61598f307430d8d4a4cf/fighting-design/FightingDesign.svg"
-    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>fighting-design/start</title>
   </head>

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,7 +1,13 @@
 <script lang="ts" setup>
   import { FConfirmBox } from 'fighting-design'
+  import { ref } from 'vue'
+
+  import Box from '../../packages/fighting-design/confirm-box/src/confirm-box.vue'
+  const show = ref(false)
 
   const open = (): void => {
+    // show.value = true
+
     FConfirmBox({
       title: '标题',
       content: '这是内容',
@@ -22,5 +28,6 @@
 </script>
 
 <template>
+  <!-- <box :show="show" title="123" /> -->
   <f-button :on-click="open">提示</f-button>
 </template>