mpvue实现的picker和mptosat弹窗组件详解

 讲几个自己开发中用到的组件吧，其他组件待后期用到了再补上。网上的信息五花八门的坑挺多，实际运用到小程序中各种错误，不了解的时候还真无从下手。

• mpVue中使用小程序自带组件——picker

时间选择

时间选择器



//js


日期选择

搜索



//js


单列选择器

自定义



//js


省市区三级联动

{{province}} - {{city}} - {{district}}


//js


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

特性

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

安装

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

npm i vuex

2.安装mptoast

npm i mptoast -D

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

注意：网上很多文章里面写的都是import mptoastRegistry from &＃39;mptoast&＃39;，使用时小程序会有一些错误信息

import mptoastRegistry from &＃39;mptoast/src/registry&＃39;
mptoastRegistry(Vue)

4.在你需要弹窗的页面，引入组件，并注册，然后在页面内加入一个你注册的组件，就可以在js里面调用this.$mptoast()

 以下是一个简单的实例

参数说明

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

1.多个参数

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

this.$mptoast(&＃39;温馨提示&＃39;, &＃39;success&＃39;, 2000)

2.单个object对象

object对象参数的功能，其实跟上面多个参数的对应的功能是一样的，只是写法不同而已
代码如下：

this.$mptoast({text: &＃39;温馨提示&＃39;, // 显示文本icon: &＃39;success&＃39;, // 图标类型duration: 2000, // 关闭时间textClass: &＃39;my-class&＃39;， // 样式类名iconClass: &＃39;icon-class&＃39; // 图标类名
})

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