vue的各种弹窗

《vue的各种弹窗》正文开始，本次阅读大概9分钟。

弹窗是我们在平时开发中经常使用到的一种交互方式，Vue提供了多种方式实现弹窗的效果，下面我们就来一一介绍：

1.普通弹窗

Vue.prototype.$alert(msg, title, opt)

这个方法可以用于快速创建一个普通的弹窗，使用简单，可以设置弹窗内容、标题以及其他一些参数，例如是否点击遮罩层关闭弹窗，是否显示确认按钮等。

2.确认弹窗

this.$confirm(msg, title, opt)

这个方法会创建一个确认弹窗，可以设置弹窗内容、标题以及其它参数，区别于普通弹窗的是，这个方法返回一个Promise对象，可以通过then方法获取到用户是否点击了确认按钮的结果。

3.提醒弹窗

this.$message(msg, opt)

这个方法可以快速创建一个提醒弹窗，可以设置弹窗内容、标题以及一些参数，例如弹窗自动消失的时间、弹窗类型等。

4.提示弹窗

this.$notify(msg, opt)

与提醒弹窗类似，这个方法也是用于创建一个提示弹窗，它可以设置弹窗内容、标题以及其他一些参数，区别在于这个方法使用的是一个全局的通知器，所以可以在任何地方调用。

5.模态窗口

template
Modal v-model="show" title="模态窗口"
p这是一个模态窗口/p
/Modal
/template

模态窗口是一个常见的弹窗效果，Vue实现模态窗口的方式是通过组件的方式创建，可以自定义模态窗口的内容和样式，并且可以使用v-model来控制它的显示和隐藏。

总结：Vue提供的弹窗方式比较灵活，你可以根据自己的需要选择不同的方式来实现弹窗效果，如果你还不熟悉，可以多尝试一下实践，并且可以通过查看文档来学习更多的内容。