自定义vue组件

使用js的方式对弹框进行的扩展 使用介绍 （alert跟这个差不多 并且更加简易 不再赘述）

弹框部分的引用

this.$Dialog.modal({

dialogClass: 'delModal-ma',

header: "删除确认",

body: `删除项目${this.projectName}后，会进入回收站，7天后彻底删除`,

confirm: () => {

this.$Dialog.hide('modal');

// 如果需要 在你点击确定之后发生什么 在这里面添加ajax请求等

},

close: () => {

this.$Dialog.hide('modal')

},

})

显示效果

mark

html配置

mark

配置项	渲染结果
header	弹框的头部提示语
body	弹框的body部分 支持html格式
dialogClass	弹框的类名 默认是dialogClass
titleClass	弹框头部的类名 默认是titleClass
primaryBtn	确定按钮的文案
defaultBtn	取消按钮的文案
dialog	控制弹框显示和隐藏的开关
confirm	点击确按钮之后发生的行为
close	点击取消按钮之后发生的行为

配置源码

import Vue from 'vue'

let alertVm, modalVm;
export default {
  alert: (options) => {
    if (!alertVm) {
      let container = document.createElement("div");
      container.setAttribute("class", "alert-component");
      document.body.appendChild(container)
      alertVm = new Vue({
        el: container,
        template: `<mu-dialog :open="dialog" :title="header" :titleClass='titleClass'  :dialogClass='dialogClass' >
      <div v-html='body' class='muse-ui-alertBody'></div>
    <mu-flat-button :label="primaryBtn" slot="actions" primary @click="confirm"/>
  </mu-dialog>`,
        data () {
          return {
            timer: '',
            hidden: true,
            dialogClass: 'alertClass',
            titleClass: 'titleClass',
            header: '提示',
            body: '',
            footer: '',
            primaryBtn: '确定',
            dialog: true,
            confirm: () => {
              this.hide();
            },
          }
        },
        methods: {
          show (options) {
            console.log('show');
            if (!options) options = {};
            if (typeof options === 'string') {
              this.body = options
            } else {
              this.dialog = true;
              this.dialogClass = options.dialogClass ? options.dialogClass : 'sindialogClass';
              this.titleClass = options.titleClass ? options.titleClass : 'titleClass';
              this.header = options.header ? options.header : '提示';
              this.body = options.body ? options.body : '';
              this.footer = options.footer ? options.footer : '';
              this.primaryBtn = options.primaryBtn ? options.primaryBtn : '确定';
              options.confirm ? this.confirm = options.confirm : false;
            }
            var headerClass = this.titleClass;
            $('.headerClass').html('<h1>这是一个演习</h1>');
            // this.timer = setTimeout(() => {
            //   clearTimeout(this.timer);
            //   this.body = options.body;
            //   this.dialog = false;
            //   this.timer = setTimeout(() => {
            //     this.hide()
            //   }, time)
            // }, 4000)
          },
          hide () {
            this.dialog = false;
          }
        },
        mounted(){
          if(navigator.userAgent.indexOf('Firefox')>=0){
            this.dialogClass += ' '+ 'fireFpox-mudialog';
          }
        }
      })
      $(document).on('click', function (e) {
        if (alertVm.hidden === false) {
          if ($.contains(alertVm.$el, e.target) || alertVm.$el === e.target) {
            return false;
          }
          alertVm.hide();
        }
      })
    }
    alertVm.show(options)
  },
  modal: options => {
    if (!modalVm) {
      let container = document.createElement("div");
      container.setAttribute("class", "muse-dialog");
      document.body.appendChild(container)
      modalVm = new Vue({
        el: container,
        template: `<mu-dialog :open="dialog" :title="header" :titleClass='titleClass' :dialogClass='dialogClass' @close="close">
    <div v-html='body' class='muse-ui-body'></div>
      <mu-flat-button slot="actions" @click="close" primary :label="defaultBtn"/>
      <mu-flat-button slot="actions" primary @click="confirm" :label="primaryBtn"/>
  </mu-dialog>
`,
        data () {
          return {
            header: `提示`,
            headerDiv: '',
            dialogClass: 'dialogClass',
            titleClass: 'titleClass',
            body: '',
            footer: '',
            primaryBtn: '确定',
            defaultBtn: '取消',
            dialog: true,
            confirm: () => {
              this.hide();
            },
            close: () => {
              this.hide()
            },
          }
        },
        methods: {
          show (options) {
            console.log('show');
            if (!options) options = {};
            if (typeof options === 'string') {
              this.body = options
            } else {
              this.dialog = true;
              this.dialogClass = options.dialogClass ? options.dialogClass : 'sindialogClass';
              this.titleClass = options.titleClass ? options.titleClass : 'tittleClass';
              this.header = options.header ? options.header : '提示';
              this.headerDiv = options.headerDiv ? options.headerDiv : 'majunchang';
              this.body = options.body ? options.body : '';
              this.footer = options.footer ? options.footer : '';
              this.primaryBtn = options.primaryBtn ? options.primaryBtn : '确定';
              this.defaultBtn = options.defaultBtn ? options.defaultBtn : '取消';
              options.confirm ? this.confirm = options.confirm : false;
              options.close ? this.close = options.close : false;
            }
            var headerClass = this.titleClass;
            $('.headerClass').html('<h1>这是一个演习</h1>');
          },
          hide () {
            this.dialog = false;
          }
        },
        mounted(){
          this.dialog = true;
            if(navigator.userAgent.indexOf('Firefox')>=0){
              this.dialogClass += ' '+ 'fireFpox-mudialog';
            }
        },
      })
    }

    modalVm.show(options)
    Vue.nextTick(function () {
      if (options.callback) {
        options.callback();
      }
    })
  },
  hide: (e) => {
    console.log(e);
    if (!e || e === 'modal') {
      modalVm.hide();
    } else if (e === 'alert') {
      alertVm.hide();
    }
  }
}