muse-ui-message v0.2.1

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

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