99 lines
2.7 KiB
Vue
99 lines
2.7 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, { attrs, emit }) {
|
|
return () => (
|
|
<div>
|
|
<button onClick={() => emit('close')}>close</button>
|
|
<div>PrimeVue DynamicDialog</div>
|
|
<pre>{`${JSON.stringify({ attrs, props }, null, 2)}`}</pre>
|
|
</div>
|
|
);
|
|
},
|
|
});
|
|
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',
|
|
draggable: true,
|
|
// 'pt:mask:class': 'backdrop-blur-sm',
|
|
pt: {
|
|
mask: {
|
|
class: 'backdrop-blur-sm',
|
|
},
|
|
},
|
|
position: 'bottomright',
|
|
},
|
|
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',
|
|
'defining-props': {
|
|
'defined-props': 'in-dialog',
|
|
},
|
|
onClose: () => dialog1.close(),
|
|
},
|
|
});
|
|
await nextTick();
|
|
// if ($__DEV__) return;
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
DialogService.open(dialogContent, {
|
|
props: {
|
|
header: 'Header2',
|
|
position: 'bottomleft',
|
|
// draggable: false,
|
|
},
|
|
data: {
|
|
some: 'data',
|
|
},
|
|
});
|
|
};
|
|
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>
|