75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
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' },
|
||
});
|
||
};
|