如何为Quasar Notify整体添加点击事件及hover样式？

一、实现整个Notify容器点击触发Pinia函数 #

Quasar的Notify.create()会返回包含DOM元素的实例，我们可以直接给这个实例的DOM节点绑定点击事件，替代仅靠actions按钮触发的方式：

const showNotify = {
  info(index: any) {
    // 创建Notify并保存实例
    const notifyInstance = Notify.create({
      type: 'info',
      icon: '',
      message: title,
      caption: getCaption(data),
      timeout: 3000,
      actions: [
        {
          noDismiss: true,
          label: '', // 隐藏按钮标签
          handler: () => {
            notificationsStore.openSidebarNotifications()
          },
        },
      ],
    })

    // 给整个Notify容器绑定点击事件
    const notifyEl = notifyInstance.el
    const handleClick = () => {
      notificationsStore.openSidebarNotifications()
      // 点击后可选择手动关闭Notify（按需开启）
      notifyInstance.dismiss()
    }
    notifyEl.addEventListener('click', handleClick)

    // Notify销毁时移除事件监听，避免内存泄漏
    notifyInstance.onDismiss(() => {
      notifyEl.removeEventListener('click', handleClick)
    })

    setTimeout(() => {
      showNotify.info(index + 1)
    }, 1000)
  },
}

说明：

• 通过notifyInstance.el获取Notify的DOM容器，直接绑定click事件触发Pinia方法
• 利用onDismiss钩子在Notify销毁时清理事件监听，防止内存泄漏
• 不需要显示actions按钮时，把label设为空字符串即可隐藏

二、修复hover光标样式无效问题 #

Quasar内置样式可能覆盖自定义样式，需要用深度选择器提升优先级（Vue 3用:deep()，Vue 2用/deep/）：

Vue 3 单文件组件样式写法： #

<style scoped>
:deep(.q-notify) {
  cursor: pointer !important;
}

/* 更精确的选择器，确保覆盖内置样式 */
:deep(.q-notify.q-notify-info) {
  cursor: pointer !important;
}
</style>

全局样式写法： #

如果是全局样式文件，直接用更具体的选择器即可：

.q-notify-container .q-notify {
  cursor: pointer !important;
}

说明：

• 深度选择器可穿透Vue的样式隔离，让自定义样式作用到Quasar内部组件
• 加上.q-notify-container父选择器能进一步提升优先级，确保覆盖Quasar默认样式

内容的提问来源于stack exchange，提问作者Ron