⚠️🔌 vue2-simplert-plugin

Vue2-Simplert as Vue.js Plugins

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

https://mazipan.github.io/vue2-simplert-plugin/

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' require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')  Vue.use(Simplert)

from v0.4.0 you need to add vue2-simplert-plugin.css

Or, with customize default config which still can be overrided.

import Simplert from 'vue2-simplert-plugin' 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></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 :

• 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' require('vue2-simplert-plugin/dist/vue2-simplert-plugin.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 👍 !!!

Documentation Vue2-Simplert

• Download
• Usage Guide
• Methods And Props
• Example Code
• Articles
• FAQ

Credit

• Icon from SweetAlert

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.

Copyright © 2017 Built with ❤️ by Irfan Maulana