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

remcarpediem 发布于2019-08-22 16:15 / 2511人阅读

摘要：介绍是一个基于的简单弹窗组件地址特性轻量目前整个项目未打包前大概只有行代码包括注释，左右包括图标配置少尝试过无数种优化方法，只为减少配置冗余少每个页面只需要引入一次，该页面里面如果有多个子组件，可以跟页面共用一个，无需重复引入。

介绍

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

特性

轻量目前整个项目未打包前大概只有120行代码(包括注释)，5kb左右(包括图标)

配置少 尝试过无数种优化方法，只为减少配置

冗余少 每个页面（page）只需要引入一次，该页面里面如果有多个子组件，可以跟页面共用一个，无需重复引入。

使用简单 除了必须的在page页面对组件import，注册，和html引入（这些麻烦的东西由于mpvue不支持的原因，暂时无法做到优化），其他的使用只需一行简单的代码 this.$mptoast("提示消息‘)即可实现弹窗

可定制性强 提供用户重写样式的属性，只需传入一个定义好的样式类名既可实现对原有样式的覆盖（具体请看参数说明）

安装

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()了，以下是一个简单的实例

至于为什么没办法做到像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" // 图标类名
})

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

GPU云服务器云服务器 js 关闭一个弹窗 mptosat mpvue 好看的html弹窗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94186.html

小程序的初次遇见,使用mpvue搭建模板

摘要：最后写一个公用的样式就可以使用了。现在我们可以愉快的使用其开发了，如果对开发比较熟悉的话，完全迁移过来是没有问题的。由于公司业务需求的需要，在这一周需要开发小程序，加急看了下小程序的文档，发现用其原生来编写程序不是很顺手，公司前端用的技术栈是vue，询问了谷哥和度娘发现大部分推荐了 wepy和 mpvue，对比了两个框架，还是选用了 mpvue, 因为 mpvue 继承自 vue....

MangoGoing 2019-08-22 16:59 评论0 收藏0
基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.

摘要：基于开发的插件包含仿照原生样式来源一些想法刚开始的时候想要用现成的弹窗组件来着但是查找一圈没有发现比较合适项目的所以才自己开发了一个包含四种并且可以单个引入的组件开发实际上比较简单有兴趣的可以看下源码实现步骤很清晰关于样式的问题是直接从魅 wc-messagebox 基于 vue 2.0 开发的插件包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...

Darkgel 2019-08-21 11:41 评论0 收藏0
一个基于Vue.js+Mongodb+Node.js的博客内容管理系统

摘要：三更新内容在原来项目的基础上，做了如下更新数据库重新设计，改成以用户分组的数据库结构应数据库改动，所有接口重新设计，并统一采用和网易立马理财一致的接口风格删除原来游客模式，增加登录注册功能，支持弹窗登录。这个项目最初其实是fork别人的项目。当初想接触下mongodb数据库，找个例子学习下，后来改着改着就面目全非了。后台和数据库重构，前端增加了登录注册功能，仅保留了博客设置页面，但是...

wh469012917 2019-08-26 11:46 评论0 收藏0
美团小程序框架mpvue入门教程

摘要：美团小程序框架入门教程自打写了美团小程序框架蹲坑指南一发不可收拾，今天趁周末空闲，来写个没朋友的简单入门教程，本教程只针对新手，老鸟勿喷。美团小程序框架mpvue入门教程自打写了美团小程序框架mpvue蹲坑指南,一发不可收拾，今天趁周末空闲，来写个mpvue(没朋友)的简单入门教程，本教程只针对新手，老鸟勿喷。另外，我还专门为本文做了一个简单的项目，如果懒得从头开始搭项目的童鞋...

YorkChen 2019-08-22 16:14 评论0 收藏0
mpvue开发小程序所遇问题及h5转化方案

摘要：腾讯地图提供的只提供了经纬度定位，而产品需要的是确认定位后获取城市，进行同城商品检索阿里云对象储存处理文件上传，比较意外的是腾讯对阿里云的域名前缀进行了封禁后台不能配置，解决方案是让后台将该域名进行服务器域名代理。 mpvue开发小程序所遇问题及h5转化方案项目结构 |---build |---pages.js文件目录 |---src ...

big_cat 2019-08-22 18:06 评论0 收藏0