Vue 2 Simple Alert Plugin (SweetAlert Inspired)
When we using vue2-simplert, we will need to import the library in every place we need. This is very bored because we do same task in many place. In vue2-simplert we need to access method inside using $refs which is not recommended. For solving those problems I reborn vue2-simplert as Vue.js Plugins and using EventBus for open/close.
yarn add vue2-simplert-pluginnpm i vue2-simplert-plugin --saveUsually main.js or index.js
import { Simplert } from 'vue2-simplert-plugin';
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';
Vue.use(Simplert);Or, with customize default config which still can be overrided.
import { Simplert } from 'vue2-simplert-plugin';
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';
Vue.use(Simplert, {
title: 'test', //string -- title alert
message: 'message', //string -- message alert
type: 'success', //string -- type : info (default), success, warning, error
customClass: '', //string -- custom class in simplert div
customIconUrl: '', //string -- custom url custom image icon
customCloseBtnText: '', //string -- close button text
customCloseBtnClass: '', //string -- custom class for close button
onClose: this.onClose, //function -- when close triggered
useConfirmBtn: false, //boolean -- using confirm button
customConfirmBtnText: '', //string -- confirm button text
customConfirmBtnClass: '', //string -- custom class for confirm button
onConfirm: this.onConfirm, //function -- when confirm button triggered
disableOverlayClick: false, //boolean -- set to true if you want disable overlay click function
hideAllButton: false, //boolean -- set to true if you want hide all button
onOpen: null, //function -- when simplert open will fire this method if available
showXclose: true, //boolean -- show x close button
});for more Methods and Props
Usually App.vue
<simplert />For open popup :
this.$Simplert.open(obj);Object that pass is same with vue2-simplert, please read wiki.
For close popup :
this.$Simplert.close();Migration from vue2-simplert
If you already use vue2-simplert in your project, please follow this below guide :
- Make sure you add dependency
npm i vue2-simplert-plugin --save - Import and use this plugin in your main app, ex :
main.js
import { Simplert } from 'vue2-simplert-plugin';
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';
Vue.use(Simplert);- Remove all import vue2-simplert in your components and/or pages, because as Plugin you dont need to import in all components
import Simplert from 'vue2-simplert';- Remove all adding component vue2-simplert in your components and/or pages, because you dont need set components again
components: {
Simplert;
}- Remove all template html snippet in each components
<simplert :useRadius="true" :useIcon="true" ref="simplert"> </simplert>- Add new html snippet in root application, ex :
App.vue
<simplert> </simplert>- Change all call method open with new plugin method, you dont need to change all configuration
// change this call
this.$refs.simplert.openSimplert(obj);
// to this way
this.$Simplert.open(obj);- And DONE 👍 !!!
You can add props in simplert component, example :
<simplert :useRadius="true" :useIcon="true" ref="simplert"> </simplert>| Attribute | Value Type | Default Value | Description |
|---|---|---|---|
| :useRadius | Boolean | true | Setting useRadius to true will make Simplert's message box and buttons have rounded corners |
| :useIcon | Boolean | true | true : will use SweatAlert icon based on type, false : not use icon |
| ref | String | - | child reference, [read here] |
| Property | Type - Default | Description |
|---|---|---|
| title | string - empty | Title of alert |
| message | string - empty | Message of alert |
| type | string - 'info' | Type of icon will used |
| customClass | string - empty | Adding extra class in parent simplert |
| customIconUrl | string - empty | Using custom icon instead of default |
| customCloseBtnText | string - empty | Using custom text in button close |
| customCloseBtnClass | string - empty | Change default class in button close |
| onClose | func - undefined | Function will fired when close button clicked |
| useConfirmBtn | boolean - false | Using two button with close and confirm |
| customConfirmBtnText | string - empty | Using custom text in button confirm |
| customConfirmBtnClass | string - empty | Change default class in button confirm |
| onConfirm | func - undefined | Function will fired when confirm button clicked |
| disableOverlayClick | string - empty | Prevent click overlay will close alert |
| hideAllButton | boolean - false | Hide both button close and confirm |
| onOpen | func - undefined | Function will fired when open alert |
| showXclose | boolean - false | Show X close button in right corner of alert |
{
title: 'test', //string -- title alert
message: 'message', //string -- message alert
type: 'success', //string -- type : info (default), success, warning, error
customClass: '', //string -- custom class in simplert div
customIconUrl: '', //string -- custom url custom image icon
customCloseBtnText: '', //string -- close button text
customCloseBtnClass: '', //string -- custom class for close button
onClose: this.onClose, //function -- when close triggered
useConfirmBtn: false, //boolean -- using confirm button
customConfirmBtnText: '', //string -- confirm button text
customConfirmBtnClass: '', //string -- custom class for confirm button
onConfirm: this.onConfirm, //function -- when confirm button triggered
disableOverlayClick: false, //boolean -- set to true if you want disable overlay click function
hideAllButton: false, //boolean -- set to true if you want hide all button
onOpen: null, //function -- when simplert open will fire this method if available
showXclose: true //boolean -- show x close button
}A : It happen when you have this below arguments:
let Warning = {
message: 'Do you really want to leave? you have unsaved changes!',
useConfirmBtn: true,
customCloseBtnText: 'Yes',
customConfirmBtnText: 'No',
onClose: this.Leave(),
onConfirm: this.StayWhereYouAre(),
};The function this.StayWhereYouAre() will be fired immediately, even you are not clicked it yet.
It because you put function to be executed.
The solution is to change the way you pass function, just pass as an ordinary variable:
let Warning = {
message: 'Do you really want to leave? you have unsaved changes!',
useConfirmBtn: true,
customCloseBtnText: 'Yes',
customConfirmBtnText: 'No',
onClose: this.Leave,
onConfirm: this.StayWhereYouAre,
};- The icons from SweetAlert
- Chakra UI for building the demo page
- vue-code-highlight for beautiful syntax highlighter
- Other awesome projects you can found on the
package.json
If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.
Copyright © 2017-present, built with ❤️ by Irfan Maulana