mptosat,一个基于mpvue的toast弹窗组件

介绍

mptoast 是一个基于mpvue的简单弹窗组件 github地址：https://github.com/noahlam/mpvue-toast

特性

1. 轻量 目前整个项目未打包前大概只有120行代码(包括注释)，5kb左右(包括图标)
2. 配置少 尝试过无数种优化方法，只为减小配置
3. 冗余少 每一个页面（page）只须要引入一次，该页面里面若是有多个子组件，能够跟页面共用一个，无需重复引入。
4. 使用简单 除了必须的在page页面对组件import，注册，和html引入（这些麻烦的东西因为mpvue不支持的缘由，暂时没法作到优化），其余的使用只需一行简单的代码 this.$mptoast('提示消息‘)便可实现弹窗
5. 可定制性强 提供用户重写样式的属性，只需传入一个定义好的样式类名既可实现对原有样式的覆盖（具体请看参数说明）

安装

1.安装vuex，若是你项目还没使用的话。请放心，虽然mptoast依赖vuex,你不会接触到任何有关vuex的代码。添加vuex只为让你写更少的代码。

npm i vuex

2.安装mptoast

npm i mptoast -D

或者

yarn add mptoast --dev

3.在项目的主配置文件（通常位于src/main.js）加入如下代码

import mpvueToastRegistry from 'mptoast'
mpvueToastRegistry(Vue)

4.在你须要弹窗的页面，引入组件，并注册，而后在页面内加入一个你注册的组件，就能够在js里面调用this.$mptoast()了， 如下是一个简单的实例

<template>
  <div>
    <-- 省略其余代码 -->
    <mptoast />
  </div>
</template>

<script>
import mptoast from 'mptoast'

export default {
  components: {
    mptoast
  },
  data () {
    return {}
  },
  methods: {
    showToast () {
      this.$mptoast('我是提示信息')
    },
  }
}
</script>

至于为何没办法作到像vue组件那样，引入一次，就能够在全部页面使用，我想我必须得解释如下，由于mpvue目前还不支持全局的组件，我尝试过不少种变通办法，都行不通，甚至为了让你们使用的时候，少输入几个字，少一些冗余，我都作了不少尝试和优化，目前mpvue团队已经在考虑新增全局组件功能，我会时刻关注，一旦支持，我这边也立马作支持。

参数说明

参数分2种类型，一种是多个参数，另外一个种则少只接收一个对象

一， 多个参数

参数位置	参数类型	参数名称	是否必填	默认值	其余说明
1	string	显示文本	是	-	若是第一个参数不是string或number类型 则会被看成对象来处理，也就是上面提到的另外一种状况
2	stirng	显示图标类型	否	-	3种可选 'success' , 'error' , 'info'
3	number	关闭时间	否	1500	单位是毫秒ms,传其余格式（非number类型）会报错
4	string	文本样式类名	否	-	若是须要自定义显示的样式，请先定一个样式类 而后把类名传给该参数，定义类的时候 若是全部页面都使用这个类,必须定义为全局的 若是定义在scope做用域内的话 子组件不能复用父组件的样式。
5	string	icon样式类名	否	-	同上，须要注意的是icon是包含在文本里面的

如下代码是一个多个参数调用的简单实例

this.$mptoast('舒适提示', 'success', 2000)

二， 单个object对象
object对象参数的功能，其实跟上面多个参数的对应的功能是同样的，只是写法不一样而已，咱们直接看代码

this.$mptoast({
  text: '舒适提示',        // 显示文本
  icon:'success'          // 图标类型
  duration:  2000,        // 关闭时间
  textClass: 'my-class'   // 样式类名
  iconClass: 'icon-class' // 图标类名
})

须要注意的是，以上参数，若是传入错误的类型，先会进行类型转换，若是转换失败的，可能会报错。