vuejs的消息框 - vue-msgbox

2015-12-18      116      Vue
项目简介 前往项目首页

概述

vue-msgbox是一个vue.js的消息框。

安装

从npm获得源文件.

$ npm install vue-msgbox --save

支持UMD库和个人的CSS文件.

./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');

使用方法

基础使用方法

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

或者传递一个对象作为选项,传递第二个参数作为回调:

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

基础使用方法

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);
});

提示

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

确认

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) {
  ...
});