diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 6b194718668..237c6f2110a 100644 --- 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 index 193611cbc95..3624975ccbc 100644 --- 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 index 7a338b0d2e6..e3013325794 100644 --- 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(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 (
[])}
) : null} - , - dirs + ) } })