vue.js弹窗插件，支持页面挂载对象和按钮配置，可以自己扩展

(function (root, factory) {
    if (typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if (typeof define === 'function' && define.amd)
        define("customDialog", [], factory);
    else if (typeof exports === 'object')
        exports["customDialog"] = factory();
    else
        root["customDialog"] = factory();
}
(this, (function () {
    let templateText = '<div ref="customDialog" class="popup" :style="zIndexStyle">' +
        '<div class="popup-inner" :style="dialogStyle">' +
            '<h2 class="popup-title">{{ title }}</h2>' +
            '<a class="popup-close" title="点击关闭" v-on:click="close">×</a>' +
            '<div :style="contentStyle">' +
                '<iframe id="iframeDialog" name="iframeDialog" ref="iframeDialog" :src="url" frameborder="0" :scrolling="isScrolling" style="width:100%;height:100%;"></iframe>' +
            '</div>' +
            '<div class="popup-foot">' +
                '<hr class="footHr" />' +
                '<div class="popup-button" v-for="(item,index) in buttons" :key="index"><input type="button" :value="item.text" v-on:click="handlerEvent(item.callback)"></div>' +
            '</div>'
    '</div>';

    //第1步：创建弹窗组件
    let dialogComp = Vue.component('v-customDialog', {
        template: templateText,
        props: {
            title: {
                type: String
            }
            , url: {
                type: String,
                required: true
            }
            , isScrolling: {
                type: Boolean,
                required: true
            }
            , dialogStyle: {
                type: Object,
                required: true
            }
            , contentStyle: {
                type: Object,
                required: true
            }
            , buttons: {
                type: Array
            }
            , zIndexStyle: {
                type: Object,
                required: true
            }
        },
        methods: {
            close: function () {
                this.$emit('close')
            },
            handlerEvent: function (fun) {
                if (fun)
                    fun();
            }
        }
    })

    //第2步：使用基础Vue构造器，创建一个弹窗子类，里面的选项即为组件选项，或者一个.vue组件
    var customDialog = Vue.extend(dialogComp)

    //第3步：实例化弹窗组件，并挂载到Dom
    function openDialog(title, url, options) {
        var dialogWidth, dialogHeight;
        var buttons = [];
        var zIndex = 2000;
        //自适应浏览器大小
        if (!options.width && options.target)
            dialogWidth = options.target.clientWidth * 0.7;

        if (!options.height && options.target)
            dialogHeight = options.target.clientHeight * 0.7;

        if (options.width >= options.target.clientWidth && options.height <= options.target.clientHeight) {
            let t = options.target.clientWidth / options.width;
            dialogWidth = options.target.clientWidth * t;
            dialogHeight = options.height * t;
        }

        if (options.height >= options.target.clientHeight && options.width <= options.target.clientWidth) {
            let t = options.target.clientHeight / options.height;
            dialogWidth = options.width * t;
            dialogHeight = options.target.clientHeight * t;
        }

        if (options.height >= options.target.clientHeight && options.width >= options.target.clientWidth) {
            let t = options.target.clientWidth / options.width;
            dialogWidth = options.target.clientWidth * t;
            t = options.target.clientHeight / options.height;
            dialogHeight = options.target.clientHeight * t;
        }
        else {
            dialogWidth = options.width;
            dialogHeight = options.height;
        }

        if (options.buttons)
            buttons = options.buttons;

        if (!options.target) {
            options.target = document.body;
        }

        if (options.target.zIndex)
            zIndex = ++options.target.zIndex;
        else
            options.target.zIndex = zIndex;

        //实例化弹窗子类
        var dialogVm = new customDialog({
            propsData: {
                title: title === undefined ? '' : title
                , url: url
                , isScrolling: options.isScrolling === undefined || options.isScrolling === true ? "auto" : "no"
                , dialogStyle: {
                    width: dialogWidth,
                    height: dialogHeight
                }
                , contentStyle: {
                    width: "100%"
                    , height: dialogHeight - 38 - 45
                    , margin: "10 0 0 0"
                }
                , zIndexStyle: {
                    zIndex: zIndex
                }
                , buttons: buttons
            }
        });

        if (!url)
            return false;

        var dialogEl = document.createElement("div");

        if (typeof options.target === 'string')
            options.target = document.querySelector(options.target);

        if (options.target)
            options.target.appendChild(dialogEl);
        else
            document.body.appendChild(dialogEl);

        dialogVm.$mount(dialogEl) //挂载到元素

        var dialogList = [];
        dialogList.push({ element: dialogVm.$refs.customDialog, dialog: dialogVm, target: options.target });
        window.dialogList = dialogList;

        //定义关闭事件，在弹窗子类里面触发
        dialogVm.$on("close", function () {
            //关闭dialog移除了dom元素
            var element = this.$refs.customDialog;
            dialogVm.$destroy();
            options.target.removeChild(element);
        })
    }

    //第4步：注册插件,添加实例方法
    var dialogPlugin = {}
    dialogPlugin.install = function (Vue, t) {
        Vue.prototype.$openDialog = function (title, url, options) {
            openDialog(title, url, options)
        }

        Vue.prototype.$closeDialog = function () {
            //关闭dialog移除了dom元素
            var dialogList = window.dialogList;
            if (dialogList) {
                var object = dialogList[dialogList.length - 1];
                if (object) {
                    window.dialogList.pop();
                    object.dialog.$destroy();
                    object.target.removeChild(object.element);
                }
            }
        }
    }

    //第5步：使用插件
    Vue.use(dialogPlugin)
})))
**示例**
this.$openDialog(title, url,
                            {
                                target: window.parent.parent.document.body,
                                width: 1200,
                                height: 750,
                                isScrolling: false,
                                buttons: [
                                    {
                                        text: "确 认",
                                        callback: function () {                                             
                                        }
                                    },
                                    {
                                        text: "全部清空",
                                        callback: function () {                                            
                                        }
                                    },
                                    {
                                        text: "取 消",
                                        callback: function () {                                           
                                        }
                                    }
                                ]
                            })
[css链接](https://download.csdn.net/download/weixin_40885323/12229686)