- Notifications
You must be signed in to change notification settings - Fork4
A plugin dedicated for vue3 to show confirm dialog modal
License
malekim/v3confirm
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A plugin dedicated for vue3 to show confirm dialog modal. Currently the plugin works only with composition api.
The plugin can be installed by npm or yarn.
npm install v3confirm --save
yarn add v3confirm
import{createApp}from'vue'importVueConfirmPluginfrom'v3confirm'importAppfrom'@/App.vue'constapp=createApp(App)app.use(VueConfirmPlugin,{root:'#confirm',yesText:'Yes',noText:'No',})app.mount('#app')
Remember to have a html handler somewhere with id provided in root option. For example in App.vue:
<template><divid="confirm"></div></template>
Then in component with composition api:
<template><button@click="deleteAllUsers"><button@click="deleteAllUsersWithAsync"></template><scriptlang="ts">import{defineComponent}from'vue'import{useConfirm}from'v3confirm'exportdefaultdefineComponent({setup:()=>{constconfirm=useConfirm()constdeleteAllUsers=()=>{confirm.show('Are you sure?').then((ok)=>{if(ok){alert('All users deleted')}else{alert('Users not deleted')}})}constdeleteAllUsersWithAsync=async()=>{constok=awaitconfirm.show('Are you sure?')if(ok){alert('All users deleted')}else{alert('Users not deleted')}}return{ deleteAllUsers, deleteAllUsersWithAsync,}},})</script>
Type: string
Default: none
An HTML element where confirm dialog is attached. It should be empty.
Type string
Default: 'yes'
A text used for confirm button.
Type string
Default: 'no'
A text used for decline button.
This project is using bulma.io styles. If your project is not using bulma, then you can style confirm for your own orimport bulma modal.
@import"bulma/sass/utilities/_all.sass"@import"bulma/sass/components/modal.sass"
About
A plugin dedicated for vue3 to show confirm dialog modal