vue弹窗调用另一个弹窗_今日营业贴搞了一个小组件

即便是营业贴，我也会在后面推荐我最近看的优质电视剧~~~本质上万万同学还是个追剧沉迷八卦的小仙女哈哈哈哈哈哈！

话不多说进入营业！前两天看之前的项目的时候，发现外包小伙砸自己仿照elementUI 的弹窗组件源代码写了个弹窗组件，看了一眼代码，代码过于优秀了，不适合我这种小喽啰快速看懂，所以就，自己手动搞了两个组件，一个是弹窗，可以添加回调函数，需要用户手动点击才能关闭消失于页面的弹窗；另一个是消息提示，根据程序猿随意召唤并显示，且事隔几秒会自己消失的提示框。两个组件的原理都是用Vue.extend()去构造子类实例，然后挂载到Vue原型上，并利用Vue.use以插件的方式进行安装，然后就可以随意使用了。具体步骤如下：

• 先创建一个组件，也就是弹窗的Dom结构样式以及需要用的数据等；

• 再创建一个js文件，引入刚刚创建的组件，利用Vue.extend()构造一个子类实例，然后把你想包装的数据和方法传进去，调用$mount()方法生成需要的DOM，然后插入body中；

• 将第二步的方法挂载到Vue原型上，以保证在项目中可以直接调用；

• 在项目main.js中引入，并用Vue.use进行安装，这样就可以在项目中随意使用了。

代码架构：

弹窗：

组件代码

弹窗 x

{ { title }}

{ { item }}

{ { message }}

确定

<