element-ui封装全局弹窗

利于统一全局弹窗样式布局
组件
BaseDialog.vue

<template>
  <el-dialog
    :title="title"
    :custom-class="customClass?`g-common-dialog `+ customClass :' g-common-dialog '"
    :top="dialog_top"
    :modal="modal"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :visible.sync="visible"
    :destroy-on-close="destroyOnClose"
    :center="center"
    :width="width"
    @close="$emit('close')"
  >
    <slot name="title" slot="title"></slot>
    <div class="g-common-dialog-body">
         <slot></slot>
    </div>
     <!-- <div class="g-common-dialog-footer"> </div>-->
      <slot slot="footer" name="footer"></slot>
  </el-dialog>
</template>
<script>
export default {
  props: {
    title: { type: String, default: '' },
    appendToBody: { type: Boolean, default: false },
    closeOnClickModal: { type: Boolean, default: false },
    visible: { type: Boolean, default: false },
    customClass: { type: String, default: '' },
    modal: { type: Boolean, default: true },
    lockScroll: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    top: { type: String, default: '15vh' },
       beforeClose: Function,
      center: {
        type: Boolean,
        default: false
      },
      width:{type:String,default:'960px'},
      destroyOnClose: Boolean
  },
  data() {
    return {

    }
  },
  computed: {
    dialog_top() {
      return this.top //根据不同屏幕计算
    }
  },
  methods: {
  },
}
</script>

注册全局组件
main.js

import BaseDialog from 'common/dialog/BaseDialog'
Vue.component("BaseDialog",BaseDialog)

使用
CreateObject.vue

<template>
  <BaseDialog :visible="visible" @close="close" > 
  <div slot="title"  >
  <h4>标题</h4>
</div>
  </BaseDialog>
  </template>