xiangyuan-gov-app/src/components/dialog/Dialog.vue

<template>
  <Popup
    v-bind="props"
    round
    position="center"
    @close="onClose"
  >
    <DialogInner 
      v-bind="$props"
      :onConfirm="$props.onConfirm"
      :onCancel="$props.onCancel"
      :topSlots="{
        default: Boolean($slots?.default),
        bottomContent: Boolean($slots?.bottomContent),
        title: Boolean($slots?.title),
        content: Boolean($slots?.content),
        icon: Boolean($slots?.icon),
      }"
      @close="onClose"
    >
      <template #default>
        <slot />
      </template>
      <template #icon="{ icon }">
        <slot name="icon" :icon="icon" />
      </template>
      <template #title="{ title }">
        <slot name="title" :title="title" />
      </template>
      <template #content>
        <slot name="content" />
      </template>
      <template #bottomContent="{ onConfirmClick, onCancelClick }">
        <slot 
          name="bottomContent"
          :onConfirmClick="onConfirmClick"
          :onCancelClick="onCancelClick"
        />
      </template>
    </DialogInner>
  </Popup>
</template>

<script setup lang="ts">
import DialogInner from './DialogInner.vue';
import Popup from './Popup.vue';
import type { PopupProps } from './Popup.vue';

export interface DialogProps extends Omit<PopupProps, 'onClose'|'position'|'renderContent'> {
  /**
   * 对话框的标题
   */
  title?: string;
  /**
   * 对话框的图标，显示在标题上方，同 Icon 组件的图标名字。
   */
  icon?: string;
  /**
   * 图标的颜色
   * @default primary
   */
  iconColor?: string|undefined;
  /**
   * 图标大小
   * @default 40
   */
  iconSize?: number;
  /**
   * 对话框的内容
   */
  content?: string;
  /**
   * 对话框内容超高后是否自动滚动
   * @default true
   */
  contentScroll?: boolean;
  /**
   * 对话框内容自动滚动超高高度，
   * @default 75%
   */
  contentScrollMaxHeight?: number|string,
  /**
   * 对话框内容框边距。
   * 支持数字或者数组: 如果是数字，则设置所有方向边距；两位数组 [vetical,horizontal]；四位数组 [top,right,down,left]
   * @default [ 15, 20 ]
   */
  contentPadding?: number|number[],
  /**
   * 底部按扭是否垂直排版
   * @default false
   */
  bottomVertical?: boolean;
  /**
   * 取消按扭的文字
   * @default 取消
   */
  cancelText?: string|undefined;
  /**
   * 确定按扭的文字
   * @default 确定
   */
  confirmText?: string|undefined;
  /**
   * 确定按扭文字的颜色
   * @default primary
   */
  confirmColor?: string|undefined;
  /**
   * 取消按扭文字的颜色
   * @default text.content
   */
  cancelColor?: string|undefined;
  /**
   * 自定义其他按扭，这些按扭将在 cancel 和 confirm 之间显示，建议设置 bottomVertical 使按扭垂直排列。
   */
  customButtons?: {
    name: string,
    text: string,
    color?: string|undefined,
    bold?: boolean,
  }[];
  /**
   * 是否显示取消按扭
   * @default false
   */
  showCancel?: boolean;
  /**
   * 是否显示确定按扭
   * @default true
   */
  showConfirm?: boolean;
  /**
   * 对话框宽度
   */
  width?: number|string|undefined;
  /**
   * 当对话框点击取消时的回调
   */
  onCancel?: () => void|Promise<void>;
  /**
   * 当对话框点击确定的回调
   */
  onConfirm?: (buttonName?: string) => void|Promise<void>;
}
export type DialogConfirmProps = Omit<DialogProps, 'show'|'showCancel'|'onClose'>;

const props = withDefaults(defineProps<DialogProps>(), {
  mask: true,
  showConfirm: true,
  contentScroll: true,
});
const emit = defineEmits([ 'close', 'update:show' ]);

function onClose() {
  emit('close');
  emit('update:show', false);
}
</script>