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 @@ - - 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>('dialogRef'); return () => (
- -
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,则不会受到影响。 }, }); };