From 722f880f813db925928010a18edbcb1480c4978a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Fri, 13 Dec 2024 09:40:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=20DynamicDialog=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=B3=A8=E5=85=A5=E5=92=8C=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/primevue/dialog-content.vue | 18 +--------
 src/components/primevue/primevue.vue       | 46 +++++++++++-----------
 2 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/src/components/primevue/dialog-content.vue b/src/components/primevue/dialog-content.vue
index 51a4f02..daa9bd9 100644
--- a/src/components/primevue/dialog-content.vue
+++ b/src/components/primevue/dialog-content.vue
@@ -1,19 +1,3 @@
-<script setup lang="ts">
-const dialogRef = inject<ComputedRef<DynamicDialogOptions>>('dialogRef');
-// console.debug(`dialogRef?.value :>> `, dialogRef?.value);
-// console.debug(`dialogRef?.value.data :>> `, JSON.stringify(dialogRef?.value.data, null, 2));
-
-// import 'primevue/dynamicdialog'
-</script>
-
 <template>
-  <div>
-    <div>dialog-content.vue</div>
-    <pre>{{
-      {
-        'dialogRef?.data': dialogRef?.data,
-        "inject('dialogRef')": dialogRef,
-      }
-    }}</pre>
-  </div>
+  <div>dialog-content.vue</div>
 </template>
diff --git a/src/components/primevue/primevue.vue b/src/components/primevue/primevue.vue
index 8748dff..37ba7cc 100644
--- a/src/components/primevue/primevue.vue
+++ b/src/components/primevue/primevue.vue
@@ -11,52 +11,52 @@ const dynamicComponent = defineComponent({
       default: () => ({}),
     },
   },
-  setup(props, { attrs, emit }) {
+  setup(props, ctx) {
+    const dialogRef = inject<ComputedRef<DynamicDialogOptions>>('dialogRef');
     return () => (
       <div>
-        <button onClick={() => emit('close')}>close</button>
-        <div>PrimeVue DynamicDialog</div>
-        <pre>{`${JSON.stringify({ attrs, props }, null, 2)}`}</pre>
+        <button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
+        <pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
+        <div>PrimeVue DynamicDialog</div> <hr />
+        <pre>{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}</pre> <hr />
+        <pre>{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}</pre> <hr />
       </div>
     );
   },
 });
+
+// https://primevue.org/dynamicdialog/
 const openDialog = async () => {
-  // TODO: primevue 的 dialog 代码有问题。https://github.com/primefaces/z/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L64
-  // https://primevue.org/dynamicdialog/#import
   const dialog1 = DialogService.open(dynamicComponent, {
     props: {
-      header: 'Header1 Drag Me',
+      header: 'Header1 可以拖动',
+      position: 'bottomleft',
       draggable: true,
-      // 'pt:mask:class': 'backdrop-blur-sm',
-      pt: {
-        mask: {
-          class: 'backdrop-blur-sm',
-        },
-      },
-      position: 'bottomright',
+      pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: 'pt:mask:class': 'backdrop-blur-sm',
+    },
+    data: {
+      用inject接收: '定义在-DynamicDialogOptions.data-的数据',
     },
     emits: {
       // https://github.com/primefaces/primevue/blob/bd7161298a472c8cd954e35e6a538a8bd1b1b386/packages/primevue/src/dynamicdialog/DynamicDialog.vue#L5
-      //   v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
-      'some-data': 'in-dialog',
+      //   ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
       'defining-props': {
-        'defined-props': 'in-dialog',
+        '用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
       },
+      绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
       onClose: () => dialog1.close(),
     },
   });
+
   await nextTick();
   // if ($__DEV__) return;
-  await new Promise((resolve) => setTimeout(resolve, 500));
+
+  await new Promise((resolve) => setTimeout(resolve, 300));
   DialogService.open(dialogContent, {
     props: {
       header: 'Header2',
-      position: 'bottomleft',
-      // draggable: false,
-    },
-    data: {
-      some: 'data',
+      position: 'bottomright',
+      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
     },
   });
 };