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	``