Vue2-Simplert as Vue.js Plugins

by Vue.js Examples

vue2-simplert-plugin

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.

View Demo Download Source

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 :+1: !!!

GitHub