如何使用Vue3 Quasar实现多种弹窗展示技巧？

本文共计1559个文字，预计阅读时间需要7分钟。

文章目录+1. 鼠标悬浮时的提示（Quasar Tooltip组件）+2. 点击按钮后出现的自定义弹窗+2.1. 点击按钮后出现自定义弹窗（Vue方法）+2.2. 点击按钮后出现自定义弹窗（Quasar QDialog组件）

文章目录

• 1. 鼠标悬浮时的提示（Quasar Tooltip组件）
• 2. 点击某按钮后出现自定义的弹窗

• 2.1 点击某按钮后出现自定义的弹窗（vue方法）
• 2.2 点击某按钮后出现自定义的弹窗（quasar QDialog组件）

• 3. 弹出操作列表/菜单列表（quasar Qmenu组件）
• 4. 弹出一个操作确认框（Quasar Dialog插件）
• 5. 弹出一个提示框（Quasar Notify插件）
• 6. Quasar QPopupProxy

1. 鼠标悬浮时的提示（Quasar Tooltip组件）

​​quasar tooltip组件​​

当希望将鼠标悬停在目标元素上会显示提示消息时，可以使用html中的

title属性，但使用title属性出现的提示框样式可能并不是我们想要的，这时候可以使用quasar提供的tooltip组件。

可以看到，target默认为true，则会默认将 tooltip 的父元素作为触发tooltip的目标，即鼠标经过tooltip的父元素时，tooltip就会显示。