Vue2-Simplert as Vue.js Plugins
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.
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: !!!