手摸手教你写一个vue的toast弹窗[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

摘要：我们在项目开发的过程中，也许会在很多页面实现弹窗的消息，普通的方法就是在这每个界面写些原生js代码来控制弹窗效果，这样明显非常冗余。可通过引入组件的方式，可解决部分冗余的代码，但是每个要使用的界面都必须导入、注册、使用，这些代码还是比较冗余。通过插件的方式封装Toast，可解决每个页面重复导入、注册、使用的重复过程。

一. 封装Toast组件

css自行设计

二. Toast插件方式的封装

在使用Toast前需要做相应的准备工作：

1. 添加一个index.js文件 – 里面定义一个对象 – 然后导出

1. 然后在main.js文件中导入toast文件（默认是将toastl里面的index文件导进去） ，在使用Vue.use()将Toast作为插件的方式安装进来，main.js只要已启动，toast就会安装好。而且一旦调用Vue.use(toast)本质上是去调用toast里面对象的install，而这个对象的install就是index文件里面的函数，这样便可在install里面将所有要预备好的东西预备好

1. 如果Vue.prototype.toast=Toast中toast代表Toast，那么就将Toast赋值给

完善后的index.js文件：

1. 然后在要使用弹窗的界面添加代码即可。 例：this.$toast.show(res,2000)—–该show方法是在Toast.vue里面定义的。

最终的弹窗效果图：

以上是toast两种方式的封装~~

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。