feat: 重构 DynamicDialog 组件，优化数据注入和事件处理逻辑

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>
 </template>

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>
+        <button onClick={() => ctx.emit('close')}>emit('close')</button> <hr />
-        <div>PrimeVue DynamicDialog</div>
+        <pre>{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}</pre> <hr />
-        <pre>{`${JSON.stringify({ attrs, props }, null, 2)}`}</pre>
+        <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' } }, // 相当于: 'pt:mask:class': 'backdrop-blur-sm',
-      pt: {
-        mask: {
-          class: 'backdrop-blur-sm',
     },
-      },
+    data: {
-      position: 'bottomright',
+      用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 的组件
+      //   ↑v-bind="instance.options.emits", 所以 props 也可以通过 emits 传递给 content 的组件
-      'some-data': 'in-dialog',
       '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',
+      position: 'bottomright',
-      // draggable: false,
+      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
-    },
-    data: {
-      some: 'data',
     },
   });
 };