Muse-UI-Message

Muse-UI plugin message dialog

Installation

1npm install -S muse-ui-message
2// or
3yarn add muse-ui-message

CDN

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

Usage

1import 'muse-ui-message/dist/muse-ui-message.css';
2import Vue from 'vue';
3import MuseUIMessage from 'muse-ui-message';
4Vue.use(MuseUIMessage);
5
6new Vue({
7  methods: {
8    open () {
9      this.$alert('Hello world');
10      this.$confirm('Hello world ?');
11      this.$prompt('Input Some I');
12    }
13  }
14})
15
16// or
17MuseUIMessage.alert('Hello world');
18MuseUIMessage.confirm('Hello world ?');
19MuseUIMessage.prompt('Input Some I');
20
21// use with router
22
23router.beforeEach(() => {
24  MuseUIMessage.close();
25});

API

config

1export default {
2  successIcon: 'check_circle',                    // success icon
3  infoIcon: 'info',                               // info icon
4  warningIcon: 'priority_high',                   // warning icon
5  errorIcon: 'warning',                           // error icon
6  iconSize: 24,                                   // icon size
7  width: 350,                                     // dialog width
8  maxWidth: '80%',                                // dialog max width
9  className: '',                                  // dialog class
10  okLabel: '确定',                                 // dialog ok label
11  cancelLabel: '取消',                             // dialog cancel label
12  transition: 'scale'                             // 'slide-top', 'slide-bottom', 'slide-left', 'slide-right', 'fade', 'scale'
13};

config (config