Muse-UI-Message

Muse-UI plugin message dialog

Installation

npm install -S muse-ui-message
// or
yarn add muse-ui-message

CDN

<link rel="stylesheet" href="https://unpkg.com/muse-ui-message/dist/muse-ui-message.all.css"/>
<script src="https://unpkg.com/muse-ui-message/dist/muse-ui-message.js"></script>

Usage

import 'muse-ui-message/dist/muse-ui-message.css';
import Vue from 'vue';
import MuseUIMessage from 'muse-ui-message';
Vue.use(MuseUIMessage);

new Vue({
  methods: {
    open () {
      this.$alert('Hello world');
      this.$confirm('Hello world ?');
      this.$prompt('Input Some I');
    }
  }
})

// or
MuseUIMessage.alert('Hello world');
MuseUIMessage.confirm('Hello world ?');
MuseUIMessage.prompt('Input Some I');

// use with router

router.beforeEach(() => {
  MuseUIMessage.close();
});

API

config

export default {
  successIcon: 'check_circle',                    // success icon
  infoIcon: 'info',                               // info icon
  warningIcon: 'priority_high',                   // warning icon
  errorIcon: 'warning',                           // error icon
  iconSize: 24,                                   // icon size
  width: 350,                                     // dialog width
  maxWidth: '80%',                                // dialog max width
  className: '',                                  // dialog class
  okLabel: '确定',                                 // dialog ok label
  cancelLabel: '取消',                             // dialog cancel label
  transition: 'scale'                             // 'slide-top', 'slide-bottom', 'slide-left', 'slide-right', 'fade', 'scale'
};

config (config)

Change default config, Will return new config.

Methods

• $alerts(content, title, options) 或 $alerts(content, options)
• $confirm(content, title, options) 或 $confirm(content, options)
• $prompt(content, title, options) 或 $prompt(content, options)

Will return Promise, ({ resule, value })

this.$confirm('confirm ?')
  .then(({ result, value }) => {
    // result:  true click ok Button, false click cancel button
    // value: input value
  })

Options

Name	Description	Type	Accepted Values	Default
title	dialog title	String	—	—
content	dialog content， support render function	String, Function	—	—
mode	dialog mode	String	alert / confirm / prompt	alert
type	dailog level type	String	success / info / error / warning	—
icon	dialog icon	String	—	—
iconSize	icon size	Number	—	24
width	dialog width	Number / String	—	350
maxWidth	max width	Number / String	—	80%
className	dialog class	String	—	—
transition	transition animate	String	slide-top / slide-bottom / slide-left / slide-right / fade / scale	scale
beforeClose	before close callback (result, instance, done)	Function	—	—
okLabel	ok button label	String	—	—
cancelLabel	cancel button label	String	—	—
inputType	input type	String	—	—
inputPlaceholder	input placeholder	String	—	—
inputValue	input default value	String	—	—
validator	input validator function (val), will return { valid, message }	Function	—	—

Dependencies Muse-UI

• mu-dialog
• mu-icon
• mu-text-field
• mu-button

Licence

muse-ui-message is open source and released under the MIT Licence.

Copyright (c) 2018 myron