可拖拽、全屏

<template>
  <DialogCon
    ref="dialogConRef"
    :title="dialogTitle"
    :after-open="afterOpen"
    :before-close="beforeClose"></DialogCon>

  <el-button type="primary" @click="open">打开弹窗</el-button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { DialogConExpose } from "h-business-ui";

const dialogConRef = ref<DialogConExpose>();
const dialogTitle = ref("新增用户");

const open = () => {
  dialogConRef.value?.open();
};

const afterOpen = (changeDetailLoading: (loading: boolean) => void) => {
  console.log(changeDetailLoading);
};

const beforeClose = (
  action: string,
  close: () => void,
  changeLoading: (loading: boolean) => void,
) => {
  console.log(action, close, changeLoading);

  if (action === "cancel") {
    close();
    return;
  }

  if (action === "confirm") {
    changeLoading(true);

    setTimeout(() => {
      changeLoading(false);
      close();
    }, 2000);
  }
};

defineExpose({
  open,
});
</script>

<style lang="less" scoped></style>

</script>

<style lang="less" scoped></style>

属性名	类型	默认值	说明
-	-	-	可继承element-plus的dialog属性
afterOpen	(changeDetailLoading: (loading: boolean) => void) => void	-	弹窗打开后调用的函数
beforeClose	(type: BeforeCloseType, done: (close: boolean) => void, changeLoading?: (loading: boolean) => void) => void	-	弹窗关闭前调用的函数

无

方法名	类型	说明
open	() => void	打开弹窗

type BeforeCloseType = "confirm" | "cancel";

export interface Props {
  afterOpen: (changeDetailLoading: (loading: boolean) => void) => void;
  beforeClose: (
    type: BeforeCloseType,
    done: (close: boolean) => void,
    changeLoading?: (loading: boolean) => void,
  ) => void;
}

export interface DialogConExpose {
  open: () => void;
}