几乎每个小程序都会用到的弹窗功能，弹窗是为了友好的提示用户目前小程序的状态。这样以来toast弹窗就成了小程序不可或缺的组件。mptosat用过，不赖的一款。下面记录以下使用方法：
介绍
mptoast 是一个基于mpvue的简单弹窗组件 github地址：https://github.com/noahlam/mpvue-toast
安装
1.安装vuex，如果你项目还没使用的话。请放心，虽然mptoast依赖vuex,你不会接触到任何有关vuex的代码。添加vuex只为让你写更少的代码。
npm i vuex
2.安装mptoast
npm i mptoast -D
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' // 图标类名 })
需要注意的是，以上参数，如果传入错误的类型，先会进行类型转换，如果转换失败的，可能会报错。
原文链接：https://segmentfault.com/a/1190000014331380