整理

2025-03-10 12:41:24 +08:00
parent a7b10809c1
commit 4542944f52
35 changed files with 66 additions and 60 deletions
--- a/src/pages/UI-components/PrimeVue/fns.tsx
+++ b/src/pages/UI-components/PrimeVue/fns.tsx
@@ -0,0 +1,74 @@
+import dialogContent from './__dialog-content.vue';
+
+const dynamicComponent = defineComponent({
+  props: {
+    'defining-props': {
+      default: () => ({}),
+      type: Object as PropType<Record<string, unknown>>,
+    },
+  },
+  setup(props, ctx) {
+    const dialogRef = usePrimevueDialogRef();
+    return () => (
+      <div>
+        <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/
+export const openDialog = async () => {
+  const dialog1 = DialogService.open(dynamicComponent, {
+    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 的组件
+      'defining-props': {
+        '用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
+      },
+      onClose: () => dialog1.close(),
+      绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
+    },
+    props: {
+      draggable: true,
+      header: '对话框1 可以拖动',
+      position: 'bottomleft',
+      pt: { mask: { class: 'backdrop-blur-sm' } }, // 相当于: pt:mask:class="backdrop-blur-sm"
+    },
+  });
+
+  await nextTick();
+  // if ($__DEV__) return;
+
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  DialogService.open(dialogContent, {
+    props: {
+      header: '对话框2',
+      // draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
+    },
+  });
+};
+
+export const openConfirm = async () => {
+  ConfirmationService.require({
+    accept: () => {
+      ToastService.add({ detail: '您已同意操作', life: 3000, severity: 'info', summary: '已确认' });
+    },
+    // rejectProps: { style: { display: 'none' } },
+    acceptProps: { label: '确定' },
+    header: '确认',
+    icon: 'pi pi-exclamation-triangle',
+    message: '确定要继续吗？',
+    reject: () => {
+      ToastService.add({ detail: '您已取消操作', life: 3000, severity: 'error', summary: '已取消' });
+    },
+    rejectProps: { label: '取消', outlined: true, severity: 'secondary' },
+  });
+};