99 lines
3.0 KiB
Vue
99 lines
3.0 KiB
Vue
<script lang="ts"></script>
|
||
|
||
<script setup lang="tsx">
|
||
import { DialogService, ToastService } from '@/utils/primevue';
|
||
import dialogContent from './dialog-content.vue';
|
||
|
||
const dynamicComponent = defineComponent({
|
||
props: {
|
||
'defining-props': {
|
||
type: Object as PropType<Record<string, unknown>>,
|
||
default: () => ({}),
|
||
},
|
||
},
|
||
setup(props, ctx) {
|
||
const dialogRef = inject<ComputedRef<DynamicDialogOptions>>('dialogRef');
|
||
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/
|
||
const openDialog = async () => {
|
||
const dialog1 = DialogService.open(dynamicComponent, {
|
||
props: {
|
||
header: 'Header1 可以拖动',
|
||
position: 'bottomleft',
|
||
draggable: true,
|
||
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 的组件
|
||
'defining-props': {
|
||
'用-props-接收': '定义在-DynamicDialogOptions.emits-的数据',
|
||
},
|
||
绑定给组件的attrs: '定义在-DynamicDialogOptions.emits-的数据，',
|
||
onClose: () => dialog1.close(),
|
||
},
|
||
});
|
||
|
||
await nextTick();
|
||
// if ($__DEV__) return;
|
||
|
||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||
DialogService.open(dialogContent, {
|
||
props: {
|
||
header: 'Header2',
|
||
position: 'bottomright',
|
||
// draggable: false, // Header1的 draggable: true 会影响 Header2，如果指定 draggable: false，则不会受到影响。
|
||
},
|
||
});
|
||
};
|
||
const openToast = () => {
|
||
ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="primevue">
|
||
<InputText />
|
||
<Select
|
||
:options="[
|
||
{ name: 'New York', code: 'NY' },
|
||
{ name: 'Rome', code: 'RM' },
|
||
{ name: 'London', code: 'LDN' },
|
||
{ name: 'Istanbul', code: 'IST' },
|
||
{ name: 'Paris', code: 'PRS' },
|
||
]"
|
||
optionLabel="name"
|
||
placeholder="选择城市"
|
||
class="min-w-[200px]"
|
||
/>
|
||
|
||
<DatePicker dateFormat="dd/mm/yy" />
|
||
|
||
<Button @click="openToast"> ToastService </Button>
|
||
<Button @click="openDialog"> DialogService </Button>
|
||
</div>
|
||
</template>
|
||
|
||
<style>
|
||
.p-toast {
|
||
max-width: calc(100% - 50px);
|
||
}
|
||
.p-toast .p-toast-message-text {
|
||
margin-top: -0.2rem;
|
||
}
|
||
</style>
|