56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
// @ts-expect-error - Ignore missing types
|
|
import ToastEventBus from 'primevue/toasteventbus';
|
|
import type { ToastServiceMethods } from 'primevue/toastservice';
|
|
|
|
// https://github.com/primefaces/primevue/blob/61929eae7526015af0362fc5889f2af7527403d1/packages/primevue/src/toastservice/ToastService.js
|
|
const ToastService: ToastServiceMethods = {
|
|
add: (message) => {
|
|
ToastEventBus.emit('add', message);
|
|
},
|
|
remove: (message) => {
|
|
ToastEventBus.emit('remove', message);
|
|
},
|
|
removeGroup: (group) => {
|
|
ToastEventBus.emit('remove-group', group);
|
|
},
|
|
removeAllGroups: () => {
|
|
ToastEventBus.emit('remove-all-groups');
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="primevue">
|
|
<Toast />
|
|
<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="ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 })">
|
|
ToastService
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.p-toast {
|
|
max-width: calc(100% - 50px);
|
|
}
|
|
.p-toast .p-toast-message-text {
|
|
margin-top: -0.2rem;
|
|
}
|
|
</style>
|