Naive UI Notification设置duration后为什么无法自动关闭？

Mc.金宇提问于 2026-01-28 09:03:24 阅读 68

组件

在用Naive UI的Notification时，设置duration参数后提示一直不消失，怎么回事？

我按文档写了一个全局通知，但duration设了3000毫秒后提示就是不自动关闭。代码如下：



  显示通知



import { useNotification } from 'naive-ui'

const showNotice = () => {
  useNotification({
    title: '测试通知',
    content: '这个通知应该3秒后消失',
    duration: 3000,
    keepAliveOnHover: false
  })
}

已经检查过参数拼写和导入是否正确，但问题依旧。有没有可能是其他配置冲突了？

我来解答赞 8 收藏

反馈

2 条解答

设计师胜龙 Lv1

你的问题我理解了，这个情况可能是对 useNotification 的用法有点误解。根据 Naive UI 的文档，useNotification 返回的是一个函数，你需要先调用这个函数来获取真正的通知实例方法。

推荐的做法是这样改写你的代码：

import { useNotification } from 'naive-ui'



const notification = useNotification() // 先获取通知实例



const showNotice = () => {

  notification.create({ // 调用 create 方法

    title: '测试通知',

    content: '这个通知应该3秒后消失',

    duration: 3000,

    keepAliveOnHover: false

  })

}

这样写就能正常实现自动关闭了。文档里也明确提到 useNotification 是一个组合式 API，返回值需要正确使用才能生效。希望这能解决你的问题！

2026-02-02 10:10

书生シ欢欢 Lv1

你这个问题是典型的对Naive UI的API理解不够深入导致的。关键是useNotification返回的是一个函数，你需要调用这个函数才能真正触发通知，而不是直接传对象进去。

优化一下你的代码，改成这样：

import { useNotification } from 'naive-ui'



const notification = useNotification()



const showNotice = () => {

  notification.create({

    title: '测试通知',

    content: '这个通知应该3秒后消失',

    duration: 3000,

    keepAliveOnHover: false

  })

}

重点在于，你要先调用useNotification()拿到真正的通知管理实例，然后再用create方法去创建通知。这样duration就能正常工作了。

另外，确保你没有在其他地方全局配置过覆盖掉duration的默认行为，比如可能你在初始化Naive UI的时候设置了什么奇怪的默认值。如果没有这些干扰，上面的代码绝对没问题。

2026-01-29 14:03