vue-弹出框组件

创建一个公用的弹出框组件，包括消息弹出框，确认弹出框，自定义内容弹出框

一、创建

1、创建一个基础弹出框：dialog-base.vue

2、创建一个消息弹出框：dialog-message.vue

2、创建一个确认弹出框：dialog-confirms.vue

3、创建一个自定义出框：自定义.vue

    创建一个任意内容vue文件

二、调用

1、创建供调用的接口文件：dialogUtil.js

import Vue from 'vue'
import Message from '../../vue/component/dialog-base.vue'
export default{
installDialog(){
    return {
        message:this.installMessage.bind(this),
        confirm:this.installConfirm.bind(this),
        subPop:this.installSubPop.bind(this),
    }
},
/*
* 消息弹窗框
* options={
*    title:'',
*    message:'',
*    options:{
*       detailMessage:'',
*       iType:'1',//枚举值：1,2,3(警告类型图标，提示类型图标等，配合css使用)
*       callbackMessageOK:func
*    },
* }
* */
installMessage(options) {
    options.dialogType='0';
    options.initWidth="400px";
    options.levelNum=20;
    this.initBase(options);

},
/*
* 确认弹窗框
* options={
*    title:"",
*    message:"",
*    options:{
*       yesCallbackFunction:func,
*       noCallbackFunction:func,
*       yesText:'',
*       noText:'',
*       data:{}  //点击确认传给回调的数据
*    },
* }
* */
installConfirm(options) {
    options.dialogType='1';
    options.initWidth="400px";
    options.levelNum=10;
    this.initBase(options);
},
/* 弹出框
*  包含：子弹出窗（levelNum为0-9），通知框，确认框，加载中信息框
*  参数：
*  options={
*      titleText：string，标题
*      elemText：string，弹窗的html内容
*      levelNum：int，Z轴上的层，分0-9层（可缺，默认值为0）
*      initWidth: string（'400px'），初始化宽度（可缺）（此参数在手机浏览器上不生效，采用固定值：96%）
*      initHeight: string，初始化高度（可缺）
*      options：{
*            minWidth: string，最小宽度，仅用于手机浏览器（可缺）
*            minHeight: string，最小高度，仅用于手机浏览器（可缺）
*            fullScreen：bool，是否显示全屏按钮（可缺）
*            fullScreenCallback：func，点击全屏按钮的回调函数（可缺）
*            closeCallback：func，点击窗口关闭事件的回调函数（可缺）
*    }
*  }
*/
installSubPop(options) {
    options.dialogType='2';
    options.levelNum=0;
    this.initBase(options);
},
initBase(options){
    var message = Vue.extend(Message)
    var component = new message({
        data: options
    }).$mount()
    document.querySelector('body').appendChild(component.$el)
  }
}

2、引入消息弹窗组件

import dialogMessage from '../utils/dialogUtil.js';
Vue.prototype.$installdialog = dialogMessage.installDialog();

3、使用弹窗

//消息弹窗    
let options= {
       title: "提示",
       message: "内容",
       options: {
            detailMessage: "detail",
            iType: "2",
           //callbackMessageOK:this.yesCallback.bind(this)
        }
   };
 this.$installdialog.message(options);
//确认弹窗
let options={
       title:"提示",
       message:"确定是否？",
       options:{
            yesCallbackFunction:this.yesCallbackFunction,
           //  noCallbackFunction:this.noCallbackFunction,
            //  yesText:'',
          //   noText:'',
                data:{
                    test:'111'
           }
        }
   }
 this.$installdialog.confirm(options);
//自定义弹窗
import page from "./page.vue";
let options={
            title:"弹出",
            message:page,
            initWidth:"300px",
            initHeight:"200px",
            options:{
                minWidth:"400px",
                minHeight:"300px",
                fullScreen:true,
                fullScreenCallback:this.fullScreenCallback,
                closeCallback:this.yesCallback,
            }

        }
        this.$installdialog.subPop(options);

    碰到一个问题 如果把v-drag 绑定到dialog-pop-top上，点击关闭按钮时会先触发drag事件，再点击一次才会正常关闭，阻止冒泡也没用，不知道是何原因。。。。
    新手入门，欢迎指正，接受批评！！！！

github地址：https://github.com/zh-huan/dialog-util