自制的微信小程序消息弹窗~~（vue.js uni-app 微信小程序）

开发环境：uni-app框架   编译工:HbuilderX   运行工具:微信小程序开发工具

由于业务需要，该组件目前主要是用于微信小程序。

功能描述：单个弹窗消息从下方移上来显示，从上方移出去消失。

也支持多个消息弹窗，效果同样，逐一显示与隐藏

效果显示：（点击蓝色背景，出现弹窗，此处点击一次。）

连续点击2次则会相继出现第二个 第三个弹窗。

组件代码：(这是一个基于vue.js语法制作的组件)

使用 ：直接在对应的事件上直接修改组件内的变量
                this.$refs.myPopup.clickNum++  //点击次数 / 出现几个弹窗
                this.$refs.myPopup.tipsText.push(this.tips) //  '弹出消息，可以传多组数据'
                this.$refs.myPopup.tipsIndex=1  //第几个弹窗

业务场景：

如果是一次性传入所有的弹窗消息，则在父组件的时候就把弹窗消息一次性的push到tipsText里面，设置clickNum为弹窗个数，然后触发事件显示，

如果消息是不断累加的话，就每次传一个消息，触发事件显示。

上面截图案例：

(前端小菜鸡的记录与分享，请大佬们指教 ^0^ )