muse-ui-message

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