0.0.3 • Published 5 years ago
bootstrap-vue-msgbox v0.0.3
bootstrap-vue-msgbox
Modal message with bootstrap 4 based on https://uiv.wxsm.space/message-box for Vue.js
Instalation
$ npm install bootstrap-vue-msgbox
Initiate
Inject plugin to your vue instance by Vue.use then initial it in your component that need to use message box
Default Injection
(main.js)
import Vue from 'vue'
import vbMsgBox from 'bootstrap-vue-msgbox'
Vue.use(vbMsgBox)
Methods
this.$alert({
// options...
})
this.$confirm({
// options...
})
this.$prompt({
// options...
})
Usage
this.$confirm({
title: 'this is a title',
content: 'this is a content'
})
.then(success => {
// Ok button pressed
console.log(sucess)
})
.catch(cancel => {
// Cancel button pressed
console.log(cancel)
})
// Example from the original component:
this.$prompt({
title: 'Welcome',
content: 'Please input your email:',
// A simple input validator
// returns the err msg (not valid) or null (valid)
validates (value) {
return /\S+@\S+\.\S+/.test(value) ? null : 'Email address is not valid!'
}
})
.then(success => {
// user input
console.log(sucess)
})
.catch(cancel => {
// Cancel button pressed
console.log(cancel)
})
Options
Option | Type | Default |
---|---|---|
title | String | Title |
isHtml | Boolean | false |
content | String | Empty |
inputType | String | text |
okText | String | Ok |
okType | String | primary |
cancelText | String | primary |
cancelType | String | default |
validates | Function | () => null |
defaultInputValue | String |
|
modalSize | String |
|
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1-alpha2.4
5 years ago
0.0.1-alpha2.3
5 years ago
0.0.1-alpha2.2
5 years ago
0.0.1-alpha2
5 years ago
0.0.1-alpha1
5 years ago
0.0.1
5 years ago