fix: 修复 FMessage 不同弹出位置错误的问题

FightingDesign · Apr 10, 2023 · bed3e86 · bed3e86
1 parent b298a89
commit bed3e86
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 36 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -4,6 +4,10 @@
 
 English | [Chinese](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.md)
 
+## 0.31.1 (2023-04-10)
+
+- Fix the issue of incorrect pop-up positions for `FMessage`
+
 ## 0.31.0 (2023-04-10)
 
 - Change the default value of `FNotification` component type to null

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.31.1 (2023-04-10)
+
+- 修复 `FMessage` 不同弹出位置错误的问题
+
 ## 0.31.0 (2023-04-10)
 
 - `FNotification` 组件 type 默认值改为 null

diff --git a/docs/components/message.md b/docs/components/message.md
@@ -167,7 +167,9 @@
 
 :::
 
-## 多个位置
+## 不同位置
+
+`placement` 配置项可调整不同弹出位置
 
 ::: demo
 
@@ -183,25 +185,11 @@
 </template>
 
 ```html
-<template>
-  <f-space>
-    <f-button type="primary" @click="openMessagePlacement('top')"> 顶部 </f-button>
-    <f-button type="primary" @click="openMessagePlacement('top-left')"> 左上 </f-button>
-    <f-button type="primary" @click="openMessagePlacement('top-right')"> 右上 </f-button>
-    <f-button type="success" @click="openMessagePlacement('bottom')"> 底部 </f-button>
-    <f-button type="success" @click="openMessagePlacement('bottom-left')">
-      左下
-    </f-button>
-    <f-button type="success" @click="openMessagePlacement('bottom-right')">
-      右下
-    </f-button>
-  </f-space>
-</template>
-
 <script setup lang="ts">
   import { FMessage } from 'fighting-design'
+  import type { MessagePlacement } from 'fighting-design'
 
-  const openMessagePlacement = placement => {
+  const openMessagePlacement = (placement: MessagePlacement): void => {
     FMessage({
       message: '这是一条自定义位置的消息',
       type: 'primary',
@@ -211,6 +199,17 @@
     })
   }
 </script>
+
+<template>
+  <f-space>
+    <f-button type="primary" @click="openMessagePlacement('top')">顶部</f-button>
+    <f-button type="primary" @click="openMessagePlacement('top-left')">左上</f-button>
+    <f-button type="primary" @click="openMessagePlacement('top-right')">右上</f-button>
+    <f-button type="success" @click="openMessagePlacement('bottom')">底部</f-button>
+    <f-button type="success" @click="openMessagePlacement('bottom-left')">左下</f-button>
+    <f-button type="success" @click="openMessagePlacement('bottom-right')">右下</f-button>
+  </f-space>
+</template>
 ```
 
 :::

diff --git a/docs/components/notification.md b/docs/components/notification.md
@@ -36,8 +36,6 @@
 
 `notification` 属性可接收 `string` 显示文本，也可接收 `VNode` 自定义消息
 
-限定最大宽度为`500px`
-
 ::: demo
 
 <template #source>
@@ -131,7 +129,7 @@
 
 此外，`Notification` 拥有可控的 duration， 默认的关闭时间为 `2500 毫秒`，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。
 
-可以传递`closeBtn`属性来自定义关闭按钮，支持字符串与 `VNode`。
+可以传递 `close-btn` 属性来自定义关闭按钮，支持字符串与 `VNode`。
 
 ::: demo
 
@@ -178,7 +176,9 @@
 
 :::
 
-## 多个位置
+## 不同位置
+
+`placement` 配置项可调整不同弹出位置
 
 ::: demo
 
@@ -213,7 +213,7 @@
   import { FNotification } from 'fighting-design'
   import type { NotificationPlacement } from 'fighting-design'
 
-  const openNotificationPlacement = (placement: NotificationPlacement) => {
+  const openNotificationPlacement = (placement: NotificationPlacement): void => {
     FNotification({
       title: '一条通知',
       message: '这是一条自定义位置的消息',

diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md
@@ -2,6 +2,10 @@
 
 中文 | [英文](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.en-US.md)
 
+## 0.31.1 (2023-04-10)
+
+- 修复 `FMessage` 不同弹出位置错误的问题
+
 ## 0.31.0 (2023-04-10)
 
 - `FNotification` 组件 type 默认值改为 null

diff --git a/packages/fighting-design/_hooks/use-message-work/index.ts b/packages/fighting-design/_hooks/use-message-work/index.ts
@@ -111,6 +111,8 @@ export const useMessageWork = (
     return styles
   })
 
+  console.log(offsetStyle.value)
+
   /** 清除计时器 */
   const clearTimer = (): void => {
     if (!timeout) return

diff --git a/packages/fighting-design/_hooks/use-message/index.ts b/packages/fighting-design/_hooks/use-message/index.ts
@@ -87,7 +87,7 @@ const getIndexByInstance = (instance: ComponentInternalInstance): number => {
  * @returns { number } 间隔尺寸信息
  */
 const getNextElementInterval = (instance: ComponentInternalInstance): number => {
-  /** 间隔高度 */
+  /** 每个提示框之间的间隔高度 */
   const INTERVAL_HEIGHT = 16
 
   /**
@@ -120,9 +120,9 @@ const updatePosition = (closeInstance: ComponentInternalInstance): void => {
       instances[placement] as ComponentInternalInstance[]
     )[index]
 
-    /** 减少后面的组件实例偏移量 */
-    ;(instance.exposed as Record<string, Ref<number>>).offsetVal.value -=
-      getNextElementInterval(closeInstance)
+      /** 减少后面的组件实例偏移量 */
+      ; (instance.exposed as Record<string, Ref<number>>).offsetVal.value -=
+        getNextElementInterval(closeInstance)
   }
 }
 
@@ -137,13 +137,13 @@ export const removeInstance = (instance: ComponentInternalInstance): void => {
   /** 当前组件的方位 */
   const placement: MessagePlacement | NotificationPlacement = getPlacement(instance)
 
-  /**
-   * @see Array.prototype.splice() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
-   */
-  ;(instances[placement] as ComponentInternalInstance[]).splice(
-    getIndexByInstance(instance),
-    1
-  )
+    /**
+     * @see Array.prototype.splice() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
+     */
+    ; (instances[placement] as ComponentInternalInstance[]).splice(
+      getIndexByInstance(instance),
+      1
+    )
 }
 
 /**
@@ -191,7 +191,7 @@ export const useMessage = (
     let result: number = options.offset || 20
     /** 获取到当前方位的组件实例集合 */
     const placementInstance: ComponentInternalInstance[] | undefined =
-      instances[options.placement || name === 'message' ? 'top' : 'top-right']
+      instances[options.placement as MessagePlacement | NotificationPlacement]
 
     if (placementInstance) {
       placementInstance.forEach((instance: ComponentInternalInstance): void => {

diff --git a/packages/fighting-design/package.json b/packages/fighting-design/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fighting-design",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.",
   "keywords": [
     "fighting",
@@ -57,4 +57,4 @@
   },
   "homepage": "https://fighting.tianyuhao.cn",
   "repository": "https://github.com/FightingDesign/fighting-design"
-}
+}
diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,3 +1,5 @@
 <script lang="ts" setup></script>
 
 <template></template>
+
+<style lang="scss" scoped></style>