mazipan / vue2-simplert-plugin

⚠️ Vue 2 Simple Alert Plugin (SweetAlert Inspired)
https://mazipan.github.io/vue2-simplert-plugin/
MIT License
30 stars 8 forks source link
vue-alert vue-popup vue-sweatalert vue2-alert vue2-popup vue2-simplert vue2-sweatalert

⚠️ vue2-simplert-plugin

Vue 2 Simple Alert Plugin (SweetAlert Inspired)

License minified version downloads Build and Deploy

Why we need ?

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.

Demo

Install

Yarn

yarn add vue2-simplert-plugin

NPM

npm i vue2-simplert-plugin --save

How to use

Import in your root project

Usually 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

Add template in your root Vue

Usually App.vue

<simplert />

Open/Close Popup

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 :

import { Simplert } from 'vue2-simplert-plugin';
import 'vue2-simplert-plugin/dist/vue2-simplert-plugin.min.css';

Vue.use(Simplert);
import Simplert from 'vue2-simplert';
components: {
  Simplert;
}
<simplert :useRadius="true" :useIcon="true" ref="simplert"> </simplert>
<simplert> </simplert>
// change this call
this.$refs.simplert.openSimplert(obj);
// to this way
this.$Simplert.open(obj);

Available Props

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]

Object Arguments

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
}

FAQ

Why my onConfirm fired immediately

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,
};

Credits

Contributing

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.

vue2-simplert

Copyright © 2017-present, built with ❤️ by Irfan Maulana