SZYGM1.0/src/components/dialog/index.vue

<template>
  <div class="dialog">
    <el-dialog :model-value="props.flag" :append-to-body="props.isBody" ref="dialogTk" :top="props.top" :custom-class="props.customClass" :lock-scroll="false" :modal="props.modal" :before-close="props.close" :close-on-click-modal="false" :width="props.width" :show-close="props.showFlag">
      <div class="dialog-content">
        <slot />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  // 弹框开关
  flag: {
    type: Boolean,
    default: false,
  },
  showFlag: {
    type: Boolean,
    default: false,
  },
  // 弹框宽度
  width: {
    type: String,
    default: "400px",
  },
  // 弹框类名
  customClass: {
    type: String,
    default: "",
  },
  // 弹框高度
  top: {
    type: String,
    default: "0vh",
  },
  // 弹框遮罩层
  modal: {
    type: Boolean,
    default: true,
  },
  // 二级弹框标记
  child: {
    type: Boolean,
    default: false,
  },
  isBody: {
    type: Boolean,
    default: true,
  },
});
const emits = defineEmits(["closeDialog"]);
const close = () => {
  emits("closeDialog");
};
</script>