useConfirmDialog
useConfirmDialog è una funzione progettata per creare dialog di conferma personalizzabili in progetti Nuxt, utilizzando la libreria vuetify-use-dialog. Include opzioni predefinite e un'opzione di countdown che aggiunge un contatore prima che l'utente possa confermare o annullare l'azione.
Per prima cosa bisogna creare il plugin di nuxt nella cartella plugins
typescript
import VuetifyUseDialog from 'vuetify-use-dialog'
export default defineNuxtPlugin((app) => {
app.vueApp.use(VuetifyUseDialog)
})import VuetifyUseDialog from 'vuetify-use-dialog'
export default defineNuxtPlugin((app) => {
app.vueApp.use(VuetifyUseDialog)
})Opzioni:
| Parametro | Descrizione | Default |
|---|---|---|
| title | Titolo del dialog di conferma | $i18n.t('msg.are_you_sure') |
| content | Contenuto del messaggio di conferma | $i18n.t('msg.action_is_permanent') |
| countdown | Numero di secondi per il countdown prima della conferma | 3 |
| cardProps | Proprietà per il componente v-card, usato per personalizzare lo stile del dialog | { maxWidth: 350 } |
| dialogProps | Proprietà per il componente v-dialog, usato per configurare il comportamento del dialog | { maxWidth: 350 } |
| confirmationText | Testo per il pulsante di conferma | $i18n.t('btn.confirm') |
| cancellationText | Testo per il pulsante di annullamento | $i18n.t('btn.cancel') |
| confirmationButtonProps | Proprietà per il pulsante di conferma | { color: 'error' } |
| cancellationButtonProps | Proprietà per il pulsante di annullamento | { variant: 'text', color: 'grey' } |
Esempio di utilizzo:
typescript
const confirm = useConfirmDialog()
const confirmed = await confirm.ask({
// opzioni
title: t('msg.reset_settings'),
content: t('msg.reset_warning'),
countdown: 10,
confirmationButtonProps: {
color: 'blue',
variant: 'outlined',
},
cancellationButtonProps: {
color: 'grey',
icon: 'mdi-close',
},
confirmationText: t('btn.reset'),
cancellationText: t('btn.cancel'),
})
if(confirmed) {
// azione da eseguire se l'utente conferma
}const confirm = useConfirmDialog()
const confirmed = await confirm.ask({
// opzioni
title: t('msg.reset_settings'),
content: t('msg.reset_warning'),
countdown: 10,
confirmationButtonProps: {
color: 'blue',
variant: 'outlined',
},
cancellationButtonProps: {
color: 'grey',
icon: 'mdi-close',
},
confirmationText: t('btn.reset'),
cancellationText: t('btn.cancel'),
})
if(confirmed) {
// azione da eseguire se l'utente conferma
}