封装全局el-dialog组件

使用

this.$dialogPopup({
        title: '测试',
        width: '800px',
        coexist: false,//控制上一次弹窗是否保留，默认false
        option: {
          text: '你好呀'
        },
        cancelClick: () => {
          console.log('你点击了取消')
        },
        saveClick: () => {
          console.log('你点击了保存')
        }
      })

index.vue

<template>
  <!-- 封装弹框 -->
  <el-dialog
    custom-class="DialogPopup"
    :title="dialogTitle"
    :visible.sync="dialogPopVisible"
    :width="popupWidth"
    :before-close="onBeforeClose"
    :center="true">
    <component
      :is="dom"
      :option.sync="option"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="Cancel">取 消</el-button>
      <el-button type="primary" @click="Save">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'DialogPopup',
  data () {
    return {
      title: '', // 窗体标题
      dialogPopVisible: false, // 窗体显示控制
      width: '550px'
    }
  },
  computed: {
    popupWidth: function () {
      return this.width || '550px'
    },
    dialogTitle: function () {
      return this.title || '标题'
    }
  },
  methods: {
    Cancel () {
      this.dialogPopVisible = false
      this.cancelClick()
    },
    Save () {
      this.dialogPopVisible = false
      this.saveClick(this.option)
    },
    onBeforeClose (done) {
      done()
    }

  }
}
</script>

<style lang="scss">
.DialogPopup {
  &.el-dialog {
    z-index: 99;
    background-color: #ffffff;
    margin-top: 10% !important;
  }
  .el-dialog__header {
    width: 100%;
    height: 40px;
    line-height: 5px;
    box-sizing: border-box;
    padding: 15px 20px;
    font-size: 16px;
    text-align: center;
  }
  .el-dialog__close.el-icon.el-icon-close {
    font-size: 20px;
    width: 17px;
    height: 17px;
    top: -10px;
    position: relative;
    right: 3px;
  }
  .el-dialog__body {
    // padding: 30px 32px;
    box-sizing: border-box;
  }
  .el-dialog__title {
    color: #333333;
    font-size: 16px;
    line-height: 16px;
  }
  .el-dialog__footer {
    text-align: center;
    height: 72px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
     .el-button {
      width: 80px;
      height: 32px;
      margin-top: 12px;
      padding: 6px 20px;
    }
  }
}
</style>

index.js

//其中#mes为根目录的id，用户将dialog，appendChild到元素中
import Vue from 'vue'
import DialogPopup from './index.vue'
let instance
let iscoexist
const PopupBox = Vue.extend(DialogPopup)
DialogPopup.install = function (data) {
  if (data.coexist) {
    iscoexist = new PopupBox({
      data
    }).$mount()
    document.querySelector('#mes').appendChild(iscoexist.$el)
    // 挂载至页面（#app）
    Vue.nextTick(() => {
      iscoexist.dialogPopVisible = true
      // show 和弹窗组件里的show对应，用于控制显隐
    })
  } else {
    if (iscoexist) {
      iscoexist.dialogPopVisible = false
      document.querySelector('#mes').removeChild(iscoexist.$el)
      iscoexist = null
    }
    if (instance) {
      instance.dialogPopVisible = false
      document.querySelector('#mes').removeChild(instance.$el)
      instance = null
    } // 移除已有弹窗，确保只有一个弹窗显示
    instance = new PopupBox({
      data
    }).$mount()
    document.querySelector('#mes').appendChild(instance.$el)
    // 挂载至页面（#mes

    Vue.nextTick(() => {
      instance.dialogPopVisible = true
      // dialogPopVisible 和弹窗组件里的show对应，用于控制显隐
    })
  }

  // if (instance) {
  //   instance.dialogPopVisible = false
  //   document.querySelector('#mes').removeChild(instance.$el)
  //   instance = null
  // } // 移除已有弹窗，确保只有一个弹窗显示
  // instance = new PopupBox({
  //   data
  // }).$mount()
  // document.querySelector('#mes').appendChild(instance.$el)
  // // 挂载至页面（#app）
  // Vue.nextTick(() => {
  //   instance.dialogPopVisible = true
  // })
}
export default DialogPopup

全局注册

import DialogPopup from '@/components/DialogPopup';
Vue.prototype.$dialogPopup = DialogPopup.install;
//TAPD
==**注意不要忘了引用**==
import element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(element)