-
-
PrimeVue DynamicDialog
-
{`${JSON.stringify({ attrs, props }, null, 2)}`}
+
+
{JSON.stringify({ 'dialogRef?.data': dialogRef!.value.data }, null, 2)}
+
PrimeVue DynamicDialog
+
{`${JSON.stringify({ 'ctx.attrs': ctx, props }, null, 2)}`}
+
{JSON.stringify({ "inject('dialogRef')": dialogRef!.value }, null, 2)}
);
},
});
+
+// 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,则不会受到影响。
},
});
};