xiangyuan-app/src/common/components/CommonDialog.vue

<template>
  <Dialog
    v-bind="props"
    mask
    closeable
    closeIcon=""
    backgroundColor="transparent"
    @update:show="emit('update:show', $event)"
  >
    <BackgroundBox 
      backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxDialog.png"
      :backgroundCutBorder="48"
      :backgroundCutBorderSize="48"
      :padding="24"
      direction="column"
      gap="gap.md"
    >
      <template v-if="props.title">
        <Height :size="24" />
        <slot name="titlePre"></slot>
        <FlexCol center gap="gap.lg">
          <H3 fontConfig="primaryTitle">{{ props.title }}</H3>
          <CommonDivider v-if="props.showDivider" />
        </FlexCol>
      </template>
      <slot></slot>
      <Height :size="24" />
    </BackgroundBox>
    <Height :size="24" />
    <ImageButton v-if="props.showCloseButton"
      src="https://xy.wenlvti.net/app_static/images/ButtonClose.png"
      :width="80"
      :height="80"
      @click="emit('update:show', false)"
    />
  </Dialog>
</template>

<script setup lang="ts">
import Dialog, { type DialogProps } from '@/components/dialog/Dialog.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import H3 from '@/components/typography/H3.vue';
import CommonDivider from './CommonDivider.vue';
import ImageButton from '@/components/basic/ImageButton.vue';

const props = withDefaults(defineProps<DialogProps & {
  title?: string;
  showCloseButton?: boolean;
  showDivider?: boolean;
}>(), {
  showCloseButton: true,
  showDivider: true,
});
const emit = defineEmits<{
  (e: 'update:show', value: boolean): void;
}>();



</script>