None.
+Mitt.
ConfirmPopup displays a confirmation overlay displayed relatively to its target.
+ConfirmPopup requires Mitt, a tiny 200b EventBus implementation.
+
+
+npm install mitt --save
+
+
+
+ ConfirmPopup is controlled via the ConfirmationService that needs to be installed globally before the application + instance is created.
+
+
+import {createApp} from 'vue';
+import ConfirmationService from 'primevue/confirmationservice';
+
+const app = createApp(App);
+app.use(ConfirmationService);
+
+
+
+
+
+import ConfirmPopup from 'primevue/confirmpopup';
+
+
+
+ ConfirmPopup is displayed by calling the require method of the $confirm instance by passing the options to customize the Popup.
+
+
+<ConfirmPopup></ConfirmPopup>
+
+<Button @click="delete()" icon="pi pi-check" label="Confirm"></Button>
+
+
+
+
+export default {
+ methods: {
+ delete() {
+ this.$confirm.require({
+ message: 'Are you sure you want to proceed?',
+ icon: 'pi pi-exclamation-triangle',
+ accept: () => {
+ //callback to execute when user confirms the action
+ },
+ reject: () => {
+ //callback to execute when user rejects the action
+ }
+ });
+ },
+ }
+}
+
+
+
+ The service can be injected with the useConfirm function.
+
+
+import { defineComponent } from "vue";
+import { useConfirm } from "primevue/useconfirm";
+
+export default defineComponent({
+ setup() {
+ const confirm = useConfirm();
+ confirm.require({
+ message: 'Are you sure you want to proceed?',
+ icon: 'pi pi-exclamation-triangle',
+ accept: () => {
+ //callback to execute when user confirms the action
+ },
+ reject: () => {
+ //callback to execute when user rejects the action
+ }
+ });
+ }
+})
+
+
+
+ The popup can also be hidden programmatically using the close method.
+
+
+export default {
+ methods: {
+ discard() {
+ this.$confirm.close();
+ }
+ }
+}
+
+
+
+ ConfirmDialog can be customized with various options listed here.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| message | +string | +null | +Message of the confirmation. | +
| group | +string | +null | +Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance. | +
| icon | +string | +null | +Icon to display next to the message. | +
| accept | +Function | +null | +Callback to execute when action is confirmed. | +
| reject | +Function | +null | +Callback to execute when action is rejected. | +
| acceptLabel | +string | +null | +Label of the accept button. | +
| rejectLabel | +string | +null | +Label of the reject button. | +
| acceptIcon | +string | +null | +Icon of the accept button. | +
| rejectIcon | +string | +null | +Icon of the reject button. | +
| acceptClass | +string | +null | +Style class of the accept button. | +
| rejectClass | +string | +null | +Style class of the reject button. | +
| Name | +Type | +Default | +Description | +
|---|---|---|---|
| group | +string | +null | +Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance. | +
ConfirmDialog inherits all the classes from the Dialog component, visit
| Name | +Element | +
|---|---|
| p-confirm-popup | +Container element. | +
| p-confirm-content | +Content element. | +
| p-confirm-popup-icon | +Message icon. | +
| p-confirm-popup-message | +Message text. | +
| p-confirm-popup-footer | +Footer element for buttons. | +
Mitt.
+
+
+<ConfirmPopup></ConfirmPopup>
+
+<div class="card">
+ <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+ <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
+</div>
+
+
+
+
+
+export default {
+ methods: {
+ confirm1() {
+ this.$confirm.require({
+ message: 'Are you sure you want to proceed?',
+ icon: 'pi pi-exclamation-triangle',
+ accept: () => {
+ this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+ },
+ reject: () => {
+ this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+ }
+ });
+ },
+ confirm2() {
+ this.$confirm.require({
+ message: 'Do you want to delete this record?',
+ icon: 'pi pi-info-circle',
+ acceptClass: 'p-button-danger',
+ accept: () => {
+ this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+ },
+ reject: () => {
+ this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+ }
+ });
+ }
+ }
+}
+
+
+