如何使用Vue3 Quasar框架实现多种弹窗功能？

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

目录

1.鼠标悬停提示（Quasar Tooltip组件）

2.点击按钮弹出自定义弹窗

3.弹出操作列表/菜单列表（Quasar Qmenu组件）

4.弹出操作确认框（Quasar Dialog插件）

5.弹出提示确认

目录

• 1. 鼠标悬浮时的提示（Quasar Tooltip组件）
• 2. 点击某按钮后出现自定义的弹窗
• 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就会显示。