fix(float-button): fix error when used with popover component, closes

tusen-ai#5933
jizai1125 · Jul 28, 2024 · a5c3b90 · a5c3b90
1 parent fa725f4
commit a5c3b90
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -15,6 +15,7 @@
 - Fix `n-tabs` has style issue when using `prefix` slot, `suffix` slot or `addable` prop with vertical placement, closes [#6059](https://github.com/tusen-ai/naive-ui/issues/6059), [#6060](https://github.com/tusen-ai/naive-ui/pull/6060).
 - Fix `n-upload` can only upload a maximum of 100 files in certain old browsers when uploading directories, closes [#6027](https://github.com/tusen-ai/naive-ui/issues/6027).
 - Fix `n-menu` can't apply HTML attributes correctly on the component when `responsive` is set.
+- Fix `n-float-button` error when used with `popover` component, closes [#5933](https://github.com/tusen-ai/naive-ui/issues/5933).
 
 ### Features
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -15,6 +15,7 @@
 - 修复 `n-tabs` 在垂直模式下使用 `prefix` slot、`suffix` slot 和 `addable` 属性的时候可能出现样式问题，关闭 [#6059](https://github.com/tusen-ai/naive-ui/issues/6059)，[#6060](https://github.com/tusen-ai/naive-ui/pull/6060)
 - 修复 `n-upload` 在某些老浏览器下目录上传最多只能上传 100 个文件，关闭 [#6027](https://github.com/tusen-ai/naive-ui/issues/6027)
 - 修复 `n-menu` 在 `responsive` 被设定的情况下，HTML 属性无法正确的应用到组件上
+- 修复 `n-float-button` 和 `popover` 一起使用会报错, 关闭 [#5933](https://github.com/tusen-ai/naive-ui/issues/5933)
 
 ### Features
 

diff --git a/src/float-button/src/FloatButton.tsx b/src/float-button/src/FloatButton.tsx
@@ -1,17 +1,17 @@
 import {
   type CSSProperties,
-  type DirectiveArguments,
   type PropType,
   computed,
   defineComponent,
   h,
   inject,
+  onBeforeUnmount,
+  onMounted,
   ref,
-  toRef,
-  withDirectives
+  toRef
 } from 'vue'
 import { useMergedState } from 'vooks'
-import { mousemoveoutside } from 'vdirs'
+import { off, on } from 'evtd'
 import { floatButtonGroupInjectionKey } from '../../float-button-group/src/FloatButtonGroup'
 import {
   type ExtractPublicPropTypes,
@@ -71,6 +71,8 @@ export default defineComponent({
   setup(props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
 
+    const selfElRef = ref<HTMLDivElement | null>(null)
+
     const themeRef = useTheme(
       'FloatButton',
       '-float-button',
@@ -182,8 +184,23 @@ export default defineComponent({
       )
       : undefined
 
+    onMounted(() => {
+      const selfEl = selfElRef.value
+      if (selfEl) {
+        on('mousemoveoutside', selfEl, handleMouseleave)
+      }
+    })
+
+    onBeforeUnmount(() => {
+      const selfEl = selfElRef.value
+      if (selfEl) {
+        off('mousemoveoutside', selfEl, handleMouseleave)
+      }
+    })
+
     return {
       inlineStyle,
+      selfElRef,
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       mergedClsPrefix: mergedClsPrefixRef,
       mergedShape: mergedShapeRef,
@@ -209,10 +226,10 @@ export default defineComponent({
       inlineStyle,
       onRender
     } = this
-    const dirs: DirectiveArguments = [[mousemoveoutside, this.handleMouseleave]]
     onRender?.()
-    return withDirectives(
+    return (
       <div
+        ref="selfElRef"
         class={[
           `${mergedClsPrefix}-float-button`,
           `${mergedClsPrefix}-float-button--${mergedShape}-shape`,
@@ -258,8 +275,7 @@ export default defineComponent({
             {resolveSlot($slots.menu, () => [])}
           </div>
         ) : null}
-      </div>,
-      dirs
+      </div>
     )
   }
 })