• Stars
    star
    278
  • Rank 148,494 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

轻量级的信息反馈组件

中文 | English

popular-message

travis-ci Coverage Status license release

A lightweight feedback message appearing at the top of the screen, fading automatically. Has many different options for different situations.

Demo

Features

  1. API design for iview-$mesage。
  2. No dependence,lightweight,200 lines of source code,Smaller after compression。
  3. UI Beautiful,Reference iview UI styles。

Install

  1. use unpkg cdn link
<script src="https://unpkg.com/popular-message/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/popular-message/index.css">

2.use npm or yarn install

$ npm install popular-message
$ yarn add popular-message

Use

use script,get global variable $message

use npm install,need import The module

import $message from 'popular-message';
import 'popular-message/index.css';

use in page

<!-- global configuration -->
$message.config({ top:85, duration: 4})

<!-- types -->
$message.info('this is a info message')
$message.success('this is a success message')
$message.warning('this is a info warning message')
$message.error('this is a info error message')
$message.loading('loading...')

<!-- onClose -->
$message.info('this is message can close', {
    onClose:() => console.log('close'),
    closable: true,
    duration: 6
})

<!-- destroy -->
$message.destroy()

API

Message instance

This component can be used with the following static methods:

  • $message.info(config)
  • $message.success(config)
  • $message.warning(config)
  • $message.error(config)
  • $message.loading(config)

Parameter config can be string or object. When string, the content will be directly displayed, when object, the detail usage is explained below:

Property Description Type Default
duration Time before prompt dismisses, in seconds. Use 0 to not dismiss Number 2
onClose Function to be called after the prompt is closed Function -
closable Whether to show a close button. Boolean false
dangerUseHtml whether message is treated as HTML string Boolean false

Methods for global configuration and disposal are also provided:

  • $message.config(options)
  • $message.destroy()
$Message.config({
    top: 50,
    duration: 3
});
Property Description Type Default
top Prompt's distance from top, in pixels. Number 24
duration Default time before prompt dismisses, in seconds. Number 1.5
singleton Singleton Pattern Boolean false

License

Licensed under the MIT License.