vue3+quasar 弹窗的几种方式

vue3+quasar 弹窗的几种方式

文章目录

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就会显示。

我在这

也可以用String类型指定触发 tooltip的目标元素。

我在这

其他详见 ​​官方文档​​ 。

效果图：

子组件：

父组件

注意：有需要时可以给子组件Member设置一个z-index的样式。

知识点

​​vue 组件 官方文档：props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

​​quasar dialog组件​​ 通过绑定的值来决定是否显示该弹窗，值可以使用model-value进行绑定，也可以使用v-model进行绑定。

使用model-value进行绑定时，需要使用 ​​:​​ 。

...//or ...

上述同样的效果也可用以下代码实现：

父组件：

子组件Member.vue

使用 dialog 组件还有一个好处就是可以通过transition-show和transition-hide设置弹窗时的动画，详见 ​​官方文档​​ 。

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

​​Quasar QMenu组件​​

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

​​quasar Dialog插件​​ 能实现类似html的window.confirm()的功能。

使用前需先安装和引入，具体教程见官网。

以下截图仅展示在Vite/Vue CLI项目中的使用：

使用示例：

5. 弹出一个提示框（Quasar Notify插件）

如果仅需弹出一个提示消息而不需要用户进行其他操作，则可使用 ​​Quasar 的 Notify插件​​ 。

同样需要安装后才能使用：

使用示例：

6. Quasar QPopupProxy

​​Quasar QPopupProxy 组件​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。