0.0.5 • Published 3 years ago
vue-lite-modal v0.0.5
vue-lite-modal
Vue.js modal dialog plugin for vue 3
vue-lite-toast : Vue.js toast notification plugin for vue 3
Installation
# npm
npm install vue-lite-modal -S
Import
// In you main.js
// ... considering that your app creation is here
import Modal from "@vue-lite-modal";
createApp(App).use(Modal).mount("#app");
Usage
// this.$modal.open({/* options */});
this.$modal.open({content: 'Hello world'});
this.$modal.alert({
title: 'Hello world',
confirmButtonText: 'OK!'
});
this.$modal.confirm({
title: 'Hello world',
content: 'Vue.js modal dialog plugin for vue 3',
cancelButtonText: 'NO!',
confirmButtonText: 'YES!'
}).then(( {action} ) => {
if(action == 'confirm'){
alert('You clicked the confirm button!')
} else {
alert('You clicked the cancel button!')
}
});
Available options
The API methods accepts these options:
Attribute | Type | Default | Description |
---|---|---|---|
title | String | -- | The Modal Dialog title, Can be empty |
content | String | -- | The Modal Dialog content, Can not be empty |
customClass | String | -- | The Override class to overwrite the style |
showCancelButton | Boolean | true | If the cancel button show or not |
cancelButtonText | String | Cancel | The cancel button text |
confirmButtonText | String | Confirm | The confirm button text |
API methods
open(options)
This is generic method, you can use this method to make any kind of modal dialog.
// Can accept a message as string and apply rest of options from defaults
this.$modal.open({content: 'Hello world'});
alert(options)
There are some proxy methods to make it more readable.
this.$modal.alert({
title: 'Hello world',
confirmButtonText: 'OK!'
}).then(({action}) => {
console.log(action)
//do some thing when the modal dialog closed
});
// it's the same as
this.$modal.open({
showCancelButton: false,
title: 'Hello world',
confirmButtonText: 'OK!'
}).then(({action}) => {
console.log(action)
//do some thing when the modal dialog closed
});
confirm(options)
this.$modal.confirm({
title: 'Hello world',
cancelButtonText: 'NO!',
confirmButtonText: 'YES!'
}).then(({action}) => {
if(action == 'confirm'){
alert('You clicked the confirm button!')
//do some thing when the modal dialog closed
} else {
alert('You clicked the cancel button!')
//do some thing when the modal dialog closed
}
});
License
MIT License