muse-ui-message
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

Muse-UI-Message

Muse-UI plugin message dialog

travis ci badge Downloads Downloads

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

Readme

Keywords

Package Sidebar

Install

npm i muse-ui-message

Weekly Downloads

375

Version

0.2.1

License

MIT

Unpacked Size

90.6 kB

Total Files

14

Last publish

Collaborators

  • myronliu347