js笔记框架篇（vue）写一个vue的oast弹窗插件_vue仿照qq的弹窗组件插件-CSDN博客

本文链接：https://blog.csdn.net/weixin_43139949/article/details/103408057

本文介绍如何在Vue项目中编写一个自定义的Toast弹窗插件。从vue插件的基本结构开始，详细讲解了需求分析，包括简单调用、配置显示时长、选择位置和是否显示遮罩层等功能。接着展示了组件（components/myToast.vue）和插件js部分（myPlugin/toast.js）的实现，并提供了在main.js中引入插件的方法以及在页面（pages/test.vue）中的调用示例。文章最后给出了在线demo链接和源码地址，欢迎反馈和改进。

摘要由CSDN通过智能技术生成

继续来说vue，我刚到新公司的时候吧，正好有个新项目，当时呢这个项目已经写了个开头。代码拿过来捋了捋，我就问我的小前辈，为什么没用ui框架，他说，没意思那玩意也不会符合我们的全部需求自己写一样，我就一阵无语，作为一个新人，还是要听前辈的话，于是一系列插件，组件写到怀疑人生，今天就讲一讲弹窗插件。

vue插件

vue插件呢就是Vue.use(xxx),这个xxx要是个install函数大概就是这么个意思：

import Vue from 'vue'
// 我比较喜欢用函数，对象也可以，以后的文章里我会详细说这是为什么
function myPlugin () {
   
	...
}
myPlugin.install = function (_Vue) {
   
	console.log(_Vue) // 这里的_Vue就是Vue
}
//被use之后install就会执行
Vue.use(myPlugin)

大致就是这个意思详情，可以看看vue文档-插件，我就不做过多介绍了。

需求

这个需求就简单了，就是要一个弹窗，调用要简单一些，毕竟每个页面都引入一下，再用标签形式调用非常的不安逸（移动端的项目），然后呢具体的有以下几点，
首先： toast轻提示

首先组件中通过this调用；
可以手动配置显示时长；
可以选择上中下三个位置；
是否有遮罩层；

倒是没有要求有图标，

toast开始

首先呢还是要来个组件：components/myToast.vue

<template>
   <transition name="fade">
       <div class="alertBox" v-show="show">
           <div class="alert-mask" v-show="isMaskLayer"></div>
           <transition  enter-active-class="zoomIn" leave-active-class="fade">
               <div class="box" :class="position" v-show="show">
                   <p>{
  {text}}</p>
               </div>
           </transition>
       </div>