Overview

vue-msgbox is a message box (like Sweet Alert) for vue.js.

Install

Get source from npm.

$ npm install vue-msgbox --save

Supported UMD library and individual CSS file.

./lib/
├── vue-msgbox.js
└── vue-msgbox.css
./src/
├── index.js
└── msgbox.vue

// For ES6 module
import MessageBox from 'vue-msgbox';

// For commonJS
const MessageBox = require('vue-msgbox').default;

// For global variable, import from script label, then
const MessageBox = VueMsgbox.default;

// Import from src code for debugging or self building
import MessageBox from 'vue-msgbox/src';

And import CSS file:

require('vue-msgbox/lib/vue-msgbox.css');

Usage

Basic usage

MessageBox("Good job!", "You clicked the button!", "success");// title, message, type

Or pass an object as options, and second parameter as callback:

MessageBox({
  title: 'I\'m a title',
  message: 'I\'m a message',
  type: 'success',
  showCancelButton: true
}, function(action) {
  console.log('callback:', action);
  MessageBox('Clicked: ' + action);
});

Promise based usage

Basic usage

MessageBox({
  title: 'I\'m a title',
  message: 'I\'m a message',
  type: 'success',
  showCancelButton: true
}).then(function(action) {
  console.log('callback:', action);
  MessageBox('Clicked: ' + action);
});

alert

MessageBox.alert(message, title, options);

MessageBox.alert('message').then(function(action) {
  ...
});

confirm

If user press cancel button, then this promise will be rejected.

MessageBox.confirm(message, title, options);

MessageBox.confirm('message').then(function(action) {
  ...
});

prompt

If user press cancel button, then this promise will be rejected.

MessageBox.prompt(message, title, options);

MessageBox.prompt('message').then(function(value, action) {
  ...
});

Options

| Option | Description | | ----- | ----- | | title | The title of MessageBox. | | message | The content of MessageBox. | | type | The status type of MessageBox: success, warning, error | | showConfirmButton | Boolean(default true) visible of confirm button. | | showCancelButton | Boolean(default false) visible of cancel button. | | confirmButtonText | The text of confirm button. | | confirmButtonPosition | (Default:right) The position of confirm button, default is right. | | confirmButtonHighlight | (Default:false) Highlight confirm button if confirmButtonHighlight is true. | | cancelButtonText | The text of cancel button. | | cancelButtonHighlight | (Default:false) Highlight cancel button if cancelButtonHighlight is true. | | confirmButtonClass | Extra className of confirm button. | | cancelButtonClass | Extra className of cancel button. | | showInput | Boolean(default false) visible of input. | | inputValue | value of input. | | inputPlaceholder | placeholder of input. | | inputPattern | Regexp(default null). validation pattern of input. | | inputValidator | validate function of input, if validator return a string, MessageBox will use it as inputErrorMessage. | | inputErrorMessage | error message when inputPattern test inputValue failed. |

Develop

Coding with watching and hot-reload.

$ npm run dev

Develop on real remote device.

$ npm run remote-dev {{ YOUR IP ADDRESS }}

License

MIT