我可以将 onclick 处理程序设置为整个 Notify Quasar 元素，而不是触发 API 按钮吗

Question

我在页面内有一个 Notify 元素，单击整个 Notify div 我需要运行一个函数（来自 Pinia 商店）。现在，单击设置为标签（按钮）元素，但我需要将单击处理程序放置在整个 Notify 元素上。我还想了解如何在整个 Notify 元素上添加 css 悬停效果，因为“.q-notify:hover {cursor:pointer!important;}” - 不起作用

const showNotify = {
  info(index: any) {
    Notify.create({
      type: 'info',
      icon: '',
      message: title,
      caption: getCaption(data),
      timeout: 3000,
      actions: [
        {
          noDismiss: true,
          label: 'Open Sidebar', // don't need this label instead
          handler: () => {
            notificationsStore.openSidebarNotifications()
          },
        },
      ],
    })
    setTimeout(() => {
      showNotify.info(index + 1)
    }, 1000)
  },
}

Answer 1

API 中没有任何内容允许这样做，但您可以使用

document.querySelector

和

addEventListener

添加点击事件监听器，这可以在创建后完成。

await Notify.create({
  type: "info",
  icon: "",
  message: title,
  timeout: 3000,
});

const notif = document.querySelector(".q-notification");
notif.addEventListener("click", myFunction);

一定要

await

Notify.create()，否则querySelector将无法工作。

要应用 CSS，请定位

.q-notification

类，因为这是实际弹出窗口中的类。

.q-notification:hover {
  cursor: pointer !important;
}