feat: 函数式弹框添加updateDialog更改弹框自身属性值方法

src/components/ReDialog/index.ts

@@ -12,6 +12,7 @@ import type {
 
 const dialogStore = ref<Array<DialogOptions>>([]);
 
+/** 打开弹框 */
 const addDialog = (options: DialogOptions) => {
   const open = () =>
     dialogStore.value.push(Object.assign(options, { visible: true }));
@@ -24,16 +25,40 @@ const addDialog = (options: DialogOptions) => {
   }
 };
 
+/** 关闭弹框 */
 const closeDialog = (options: DialogOptions, index: number, args?: any) => {
   dialogStore.value.splice(index, 1);
   options.closeCallBack && options.closeCallBack({ options, index, args });
 };
 
+/**
+ * @description 更改弹框自身属性值
+ * @param value 属性值
+ * @param key 属性，默认`title`
+ * @param index 弹框索引（默认`0`，代表只有一个弹框，对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`）
+ */
+const updateDialog = (value: any, key = "title", index = 0) => {
+  dialogStore.value[index][key] = value;
+};
+
+/** 关闭所有弹框 */
 const closeAllDialog = () => {
   dialogStore.value = [];
 };
 
+/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L18
+ */
 const ReDialog = withInstall(reDialog);
 
 export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
-export { ReDialog, dialogStore, addDialog, closeDialog, closeAllDialog };
+export {
+  ReDialog,
+  dialogStore,
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+};

src/views/components/dialog/index.vue

@@ -2,9 +2,14 @@
 import { useRouter } from "vue-router";
 import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
-import { cloneDeep } from "@pureadmin/utils";
 import forms, { type FormProps } from "./form.vue";
-import { addDialog, closeDialog, closeAllDialog } from "@/components/ReDialog";
+import { cloneDeep, debounce } from "@pureadmin/utils";
+import {
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+} from "@/components/ReDialog";
 
 defineOptions({
   name: "DialogPage"
@@ -60,13 +65,16 @@ function onStyleClick() {
   });
 }
 
-function onoOpenDelayClick() {
-  addDialog({
-    title: "延时2秒打开弹框",
-    openDelay: 2000,
-    contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
-  });
-}
+// 添加 600ms 防抖
+const onoOpenDelayClick = debounce(
+  () =>
+    addDialog({
+      title: "延时2秒打开弹框",
+      openDelay: 2000 - 600,
+      contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
+    }),
+  600
+);
 
 function onCloseDelayClick() {
   addDialog({
@@ -240,6 +248,35 @@ function onNestingClick() {
   });
 }
 
+// 满足在 contentRenderer 内容区更改弹框自身属性值的场景
+function onUpdateClick() {
+  const curPage = ref(1);
+  addDialog({
+    title: `第${curPage.value}页`,
+    contentRenderer: () => (
+      <>
+        <el-button
+          disabled={curPage.value > 1 ? false : true}
+          onClick={() => {
+            curPage.value -= 1;
+            updateDialog(`第${curPage.value}页`);
+          }}
+        >
+          上一页
+        </el-button>
+        <el-button
+          onClick={() => {
+            curPage.value += 1;
+            updateDialog(`第${curPage.value}页`);
+          }}
+        >
+          下一页
+        </el-button>
+      </>
+    )
+  });
+}
+
 // 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
 function onFormOneClick() {
   addDialog({
@@ -421,6 +458,7 @@ function onBeforeSureClick() {
       <el-button @click="onOpenClick"> 打开后的回调 </el-button>
       <el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
       <el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
+      <el-button @click="onUpdateClick"> 更改弹框自身属性值 </el-button>
     </el-space>
     <el-divider />
     <el-space wrap>