hz_crm_web/src/components/mDialog.vue

<template>
  <el-dialog
    custom-class="dialog-custom"
    :title="$slots.title ? '' : title"
    :visible.sync="visible"
    :width="width"
    :top="top"
    :append-to-body="true"
    :modal="modal"
    :close-on-click-modal="false"
    :fullscreen="false"
    :destroy-on-close="false"
    :modal-append-to-body="true"
    :before-close="handleClose"
    v-dialogDrag
    center
    @open="open"
    @opened="opened"
    @close="close"
    @closed="closed"
  >
    <template v-if="$slots.title">
      <span slot="title">
        <slot name="title" />
      </span>
    </template>
    <slot />
    <span slot="footer" class="dialog-footer">
      <slot name="footer" />
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "mDialog",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "提示",
    },
    modal: {
      // 是否需要遮罩层
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: "30%",
    },
    top: {
      type: String,
      default: "15vh"
    }
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val); // visible 改变的时候通知父组件
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    // 关闭前回调
    handleClose(done) {
      this.$emit("beforeClose");
      done();
    },
    // Dialog 打开的回调
    open() {
      this.$emit("open");
    },
    // Dialog 打开动画结束时的回调
    opened() {
      this.$emit("opened");
    },
    // Dialog 关闭的回调
    close() {
      this.$emit("close");
    },
    // Dialog 关闭动画结束时的回调
    closed() {
      this.$emit("closed");
    },
  },
};
</script>

<style scoped lang="scss">
// .dialog-custom{
//   .el-dialog__header{

//   }
// }
</style>