A confirmation is always required on tasks which if a user takes, can have certain consequences. For example deleting a user, publishing an article and many such things. Creating a confirmation box to show a message and make the user aware is important.
This directive will help create a confirmation box for the user with a custom alert message and then allow to handle the action.
There exist a lot of components which gives you buttons but why should we restrict a user to a button. Can be any HTML element like image. And hence, this directive.
npm i vuejs-confirm-directive
yarn add vuejs-confirm-directive
You can do a require in your main js and then use the directive anywhere in the application.
require('vuejs-confirm-directive');
<button v-confirm.reload="{
link: 'your-url-comes-here',
message: 'Your custom message comes here',
data: {name: 'Custom directive', short: 'v-confirm'},
}"></button>
<button v-confirm="{
link: 'your-url-comes-here',
message: 'Your custom message comes here',
data: {name: 'Custom directive', short: 'v-confirm'},
callback: functionToHandleCallback
}"></button>
<button v-confirm="{
link: 'your-url-comes-here',
message: 'Your custom message comes here',
data: {name: 'Custom directive', short: 'v-confirm'},
callback: null
}"></button>
Below is a list of attributes that you can send and what that does.
Props | Type | Optional | Options |
---|---|---|---|
link | String | required | any valid url |
message | String | required | custom message |
data | Object | optional | payload to the post url |
callback | function | optional | function or name of function |
NOTE: When the reload modifier is not provided, a callback function is required. If, for any situation you don't want to handle the confirm of user (which I feel is a rare case) pass null or false to the callback property.