feat: `ReDialog`组件添加全屏回调事件

src/components/ReDialog/index.vue

@@ -64,9 +64,10 @@ const fullscreenClass = computed(() => {
 function eventsCallBack(
   event: EventType,
   options: DialogOptions,
-  index: number
+  index: number,
+  isClickFullScreen = false
 ) {
-  fullscreen.value = options?.fullscreen ?? false;
+  if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
   if (options?.[event] && isFunction(options?.[event])) {
     return options?.[event]({ options, index });
   }
@@ -108,7 +109,17 @@ function handleClose(
         <i
           v-if="!options?.fullscreen"
           :class="fullscreenClass"
-          @click="fullscreen = !fullscreen"
+          @click="
+            () => {
+              fullscreen = !fullscreen;
+              eventsCallBack(
+                'fullscreenCallBack',
+                { ...options, fullscreen },
+                index,
+                true
+              );
+            }
+          "
         >
           <IconifyIconOffline
             class="pure-dialog-svg"

src/components/ReDialog/type.ts

@@ -1,7 +1,12 @@
 import type { CSSProperties, VNode, Component } from "vue";
 
 type DoneFn = (cancel?: boolean) => void;
-type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
+type EventType =
+  | "open"
+  | "close"
+  | "openAutoFocus"
+  | "closeAutoFocus"
+  | "fullscreenCallBack";
 type ArgsType = {
   /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
   command: "cancel" | "sure" | "close";
@@ -175,6 +180,14 @@ interface DialogOptions extends DialogProps {
     index: number;
     args: any;
   }) => void;
+  /** 点击全屏按钮时的回调 */
+  fullscreenCallBack?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
   /** 输入焦点聚焦在 `Dialog` 内容时的回调 */
   openAutoFocus?: ({
     options,

src/views/components/dialog/index.vue

@@ -43,9 +43,11 @@ function onFullscreenClick() {
 
 function onFullscreenIconClick() {
   addDialog({
-    title: "全屏按钮",
+    title: "全屏按钮和全屏事件",
     fullscreenIcon: true,
-    contentRenderer: () => <p>弹框内容-全屏按钮</p>
+    fullscreenCallBack: ({ options, index }) =>
+      message(options.fullscreen ? "全屏" : "非全屏"),
+    contentRenderer: () => <p>弹框内容-全屏按钮和全屏事件</p>
   });
 }
 
@@ -468,7 +470,7 @@ function onBeforeSureClick() {
       <el-button @click="onBaseClick"> 基础用法 </el-button>
       <el-button @click="onDraggableClick"> 可拖拽 </el-button>
       <el-button @click="onFullscreenClick"> 全屏 </el-button>
-      <el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
+      <el-button @click="onFullscreenIconClick"> 全屏按钮和全屏事件 </el-button>
       <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
       <el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
       <el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>