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

全栈程序员-站长 • 2022年9月25日上午8:16 • 未分类 • 阅读 4

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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

一. 封装Toast组件

在这里插入图片描述
css自行设计

在这里插入图片描述

二. Toast插件方式的封装

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

添加一个index.js文件
– 里面定义一个对象
– 然后导出
然后在main.js文件中导入toast文件（默认是将toastl里面的index文件导进去），在使用Vue.use()将Toast作为插件的方式安装进来，main.js只要已启动，toast就会安装好。而且一旦调用Vue.use(toast)本质上是去调用toast里面对象的install，而这个对象的install就是index文件里面的函数，这样便可在install里面将所有要预备好的东西预备好
如果Vue.prototype.$toast=Toast中$toast代表Toast，那么就将Toast赋值给$toast，但是这样仅仅是将Toast放到Vue的原型上面去，但是Toast有自己的template，要显示template的内容，而不会将该template添加到body里面去，此时template里面的内容是不显示的，因为他是插件。若是单纯的组件的话，是会经过引入注册使用这些步骤，则会直接渲染template。所以要想将Toast里面的template的内容添加到某个元素上，需要手动添加，代码实现如下。