refactor(message): keepAliveOnHover

src/message/demos/enUS/index.demo-entry.md

@@ -54,11 +54,11 @@ placement
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| closable | `boolean` | All messages whether to show close icon. |
+| closable | `boolean` | Whether to show close icon on all messages. |
-| duration | `number` | `3000` | All messages's default duration. |
+| duration | `number` | `3000` | Default duration of on all messages. |
-| keepAliveOnHover | `boolean` | `false` | All messages whether to destroy while hover |
+| keep-alive-on-hover | `boolean` | `false` | Whether to destroy while hovering on all messages. |
-| max | `number` | `undefined` | Limit the number of message to display. |
+| max | `number` | `undefined` | Limit the number of messages to display. |
-| placement | `top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right ` | `top` | All message's placement. |
+| placement | `top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right ` | `top` | Placement of all messages. |
 | to | `string \| HTMLElement` | `'body'` | Container node of message container. |
 
 ### MessageProvider Injection API

src/message/demos/zhCN/index.demo-entry.md

@@ -56,7 +56,7 @@ placement
 | --- | --- | --- | --- |
 | closable | `boolean` | 所有 Message 是否显示 close 图标 |
 | duration | `number` | `3000` | 所有 Message 默认的持续时长 |
-| keepAliveOnHover | `boolean` | `false` | 所有 Message 在 Hover 到信息上时是否不销毁 |
+| keep-alive-on-hover | `boolean` | `false` | 所有 Message 在悬浮信息上时是否不销毁 |
 | max | `number` | `undefined` | 限制提示信息显示的个数 |
 | placement | `top \| top-left \| top-right \| bottom \| bottom-left \| bottom-right ` | `top` | 所有 Message 显示的位置 |
 | to | `string \| HTMLElement` | `'body'` | Message 容器节点的位置 |

src/message/src/MessageEnvironment.tsx

@@ -24,29 +24,34 @@ export default defineComponent({
     onAfterHide: Function
   },
   setup (props) {
-    const timerIdRef = ref<number | null>(null)
+    let timerId: number | null = null
     const showRef = ref<boolean>(true)
     onMounted(() => {
       setHideTimeout()
     })
     function setHideTimeout (): void {
-      const { duration, keepAliveOnHover } = props
+      const { duration } = props
-      if (duration && (timerIdRef.value === null || keepAliveOnHover)) {
+      if (duration) {
-        timerIdRef.value = window.setTimeout(hide, duration)
+        timerId = window.setTimeout(hide, duration)
       }
     }
-    function clearHideTimeout (): void {
+    function handleMouseenter (e: MouseEvent): void {
-      const { value: timerId } = timerIdRef
+      if (e.currentTarget !== e.target) return
-      if (timerId && props.keepAliveOnHover) {
+      if (timerId !== null) {
         window.clearTimeout(timerId)
+        timerId = null
       }
     }
+    function handleMouseleave (e: MouseEvent): void {
+      if (e.currentTarget !== e.target) return
+      setHideTimeout()
+    }
     function hide (): void {
-      const { value: timerId } = timerIdRef
       const { onHide } = props
       showRef.value = false
       if (timerId) {
         window.clearTimeout(timerId)
+        timerId = null
       }
       // deprecated
       if (onHide) onHide()
@@ -74,8 +79,8 @@ export default defineComponent({
       hide,
       handleClose,
       handleAfterLeave,
-      handleMouseLeave: setHideTimeout,
+      handleMouseleave,
-      handleMouseEnter: clearHideTimeout,
+      handleMouseenter,
       deactivate
     }
   },
@@ -95,8 +100,12 @@ export default defineComponent({
                 icon={this.icon}
                 closable={this.closable}
                 onClose={this.handleClose}
-                onMouseenter={this.handleMouseEnter}
+                onMouseenter={
-                onMouseleave={this.handleMouseLeave}
+                  this.keepAliveOnHover ? this.handleMouseenter : undefined
+                }
+                onMouseleave={
+                  this.keepAliveOnHover ? this.handleMouseleave : undefined
+                }
               />
             ) : null
           ]

src/message/src/message-props.ts

@@ -14,6 +14,6 @@ export const messageProps = {
   closable: Boolean,
   keepAliveOnHover: Boolean,
   onClose: Function as PropType<() => void>,
-  onMouseenter: Function as PropType<() => void>,
+  onMouseenter: Function as PropType<(e: MouseEvent) => void>,
-  onMouseleave: Function as PropType<() => void>
+  onMouseleave: Function as PropType<(e: MouseEvent) => void>
 } as const