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

<template>
  <Dialog
    v-bind="props"
    mask
    closeable
    closeIcon=""
    backgroundColor="transparent"
    contentScroll
    contentScrollMaxHeight="90vh"
    :contentPadding="0"
    width="auto"
    title=""
    @update:show="emit('update:show', $event)"
  >
    <template #content>
      <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">
            <slot name="titleHeader"></slot>
            <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);emit('close')"
      />
    </template>
  </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;
  (e: 'close'): void;
}>();



</script>