jq960素材网

当前位置: 主页 > JQ/JS插件 > vue插件 > 布局 >

vuejs的消息框

官方网址:http:// 下载次数:
插件描述

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

OptionDescription
titleThe title of MessageBox.
messageThe content of MessageBox.
typeThe status type of MessageBox: success, warning, error
showConfirmButtonBoolean(default true) visible of confirm button.
showCancelButtonBoolean(default false) visible of cancel button.
confirmButtonTextThe 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.
cancelButtonTextThe text of cancel button.
cancelButtonHighlight(Default:false) Highlight cancel button if cancelButtonHighlight is true.
confirmButtonClassExtra className of confirm button.
cancelButtonClassExtra className of cancel button.
showInputBoolean(default false) visible of input.
inputValuevalue of input.
inputPlaceholderplaceholder of input.
inputPatternRegexp(default null). validation pattern of input.
inputValidatorvalidate function of input, if validator return a string, MessageBox will use it as inputErrorMessage.
inputErrorMessageerror 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 }}


顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐素材