README-ZH.md

移动端 Messages组件

文档

中文 | English

在线预览

介绍

iview风格的轻量级全局消息提示组件。

特点

• 友好的接口文档
• 简洁的UI风格
• 轻量且高效
• 适配移动端
• 支持hook函数
• 支持自定义样式 (2.0实现)
• 支持jsx高级语法 (2.0实现)

快速上手

安装 使用npm:

$ npm install vue-messages

用法

import Vue from 'vue'
// 导入其他模块
...
// 注意引入顺序，必须放在vue后面
import VueMessages from 'vue-messages'


/** 默认配置 */
Vue.use(VueMessage)

/** 高级用法 */
Vue.use(VueMessage, {
  duration: 1, // 单位: s
  themes: 'blackGold', // classic or classicBold
  styles: {
    top: 24, // 单位: px
    fontWeight: 'normal',
    fontSize: 28
  },
  before () {
    console.log('custom before hook')
  },
  done () {
    console.log('custom done hook')
  }
})

启动vue项目，在控制台执行下面语句，查看是否有值输出

// 有输出表示引入成功，否则输出undefined表示引入失败。

$ window.$Message

调用方式

API

可以通过以下方法来使用组件:

/** config 类型： string */
this.$Message.info(config)
this.$Message.success(config)
this.$Message.warning(config)
this.$Message.error(config)
this.$Message.loading(config)


/** config 类型: object */
this.$Message.info({
  content: 'This is a normal message.',
  duration: 1,
  themes: 'classic', // classic blackGold
  styles: {
    fontSize: 14 // 单位: px
  },
  before () {
    console.log('my before hook')
  },
  done () {
    console.log('my done hook')
  }
})
// other type 
...

config 配置项

属性	说明	类型	默认值
duration	弹窗停留时间	number	2(单位:s)
styles	自定义样式	Object	{fontSize:'16px',top:'20px'}
Theme	(高级)主题	Object	-
before	Hook 函数	Function	执行前调用
done	Hook 函数	Function	执行后调用
后期添加			-
render	(高级)渲染函数(支持jsx语法)	Function	-

消息种类

目前支持有四种类型：

• success
• info
• warning
• error

功能演示

Github项目源码

欢迎在下面进行讨论👇

issues1

License

MIT

Copyright (c) 2017-present, Charles yang