drawing-board-service/src/example/basemap/dialog.vue

<template>
  <ElDialog
    :title="props.title"
    v-model="props.visiable"
    :width="props.width"
    :height="props.height"
    @closed="showContent = false"
  >
    <div v-if="showContent">
      <component :is="props.content" ref="contentRef" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="props.cancel">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </div>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import { ElDialog, ElButton } from "element-plus";
import { ref, watch } from "vue";
import { props } from ".";

const contentRef = ref<any>(null);
const showContent = ref(false);

watch(
  () => props.visiable,
  () => {
    if (props.visiable) {
      showContent.value = true;
    }
  }
);

const submit = async () => {
  try {
    const info = await contentRef.value.submit();
    props.submit(info);
  } catch {}
};
</script>