vue弹窗调用另一个弹窗_vue 实现一个简单的全局调用弹窗案例

1.实现效果图

2.第一步，新建一个.vue文件 定义一个弹框的基本模板

style样式放在了文章的最底部，如果需要看效果，需要将样式放入这个vue文件里，样式是用less写的，需要你的项目引入less

注意：我这里的组件右上角关闭是一张图片 需要换成你自己本地的路径

{ {title}}

{ {content}}

确定

取消

3.定义一个js文件

import Vue from 'vue';

import Alert from '@/components/public/alertModal'; //引入刚才写的弹框组件

let AlertConstructor = Vue.extend(Alert); // 返回一个“扩展实例构造器”

let AlertModal = (o) => {

let alertDom = new AlertConstructor({

el: document.createElement('div'); //将Alert组件挂载到新创建的div上

})

document.body.appendChild(alertDom.$el); //把Alert组件的dom添加到body里

// 标题

alertDom.title = o.title || '信息';

// 单条内容

ale