Live Demo)
x5 Dialog (This is a lightweight dialog plugin for Vue.
Installation
# npm
npm install x5-dialog
Deployment
This plugin does require a Vuex store and can be installed like any Vue plugin in your entry point:
Vue.use(Vuex)
const store = new Vuex.Store()
import x5Dialog from 'x5-dialog'
Vue.use(x5Dialog, store)
new Vue({
el: '#app',
store: store,
render: h => h(App),
})
This plugin uses a component to house all the magic, so it's recommended to put this near the end of your Vue app (e.g. bottom of your App.vue template)
<div id="app">
...
<x5-dialog></x5-dialog>
</div>
Attribute | Type | Default | Description |
---|---|---|---|
zIndex | Number | 200 |
z-index style for plugin |
Usage
this.$modal(component, options)
Custom Modal -
import CustomComponent from './CustomComponent.vue'
export default {
methods: {
open() {
this.$modal(CustomComponent, { permanent: true })
},
},
}
Option | Type | Default | Description |
---|---|---|---|
buttons | String | 'OK' | Buttons to show (OK , OKCancel , Cancel ) |
cancelvalue | Any | false |
Promise return value on cancel |
cancelText | String | Cancel | Cancel button label |
data | Any | null | Offers custom component prop 'data' |
okValue | Any | true |
Promise return value on OK |
okText | String | OK | OK button label |
onCancel | (async) Function | -- | Callback for cancel |
onClose | Function | -- | Callback for when the modal is closed |
onOK | (async) Function | -- | Callback for ok |
permanent | Boolean | false |
Only allow closing the window via provided buttons |
title | String | null | Modal header title (leave empty for no header) |
width | Number | 500 |
Maximum window width |
this.$alert(text, options)
Dialog -
this.$alert('This is an alert dialog.')
this.$confirm('A confirm with a title.', { title: 'This is a confirm dialog.' })
ℹ️ Prompt has one extra option to those above
Option | Type | Default | Description |
---|---|---|---|
rules | Array | [] |
Array of functions to test prompt input against |
Contributing
Please read CONTRIBUTING.md for the process for submitting pull requests.
Authors
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
Inspired by:
- The look and feel of alertifyJS
- The size and code of vue-toast-notification by @ankurk91