几乎每个小程序都会用到的弹窗功能,弹窗是为了友好的提示用户目前小程序的状态。这样以来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种类型,一种是多个参数,另一个种则少只接收一个对象

一, 多个参数

参数位置 参数类型 参数名称 是否必填 默认值 其他说明
string 显示文本 - 如果第一个参数不是string或number类型
则会被当作对象来处理,也就是上面提到的另一种情况
stirng 显示图标类型 - 3种可选 'success' , 'error' , 'info'
number 关闭时间 单位是毫秒ms,传其他格式(非number类型)会报错
string 文本样式类名 - 如果需要自定义显示的样式,请先定一个样式类
然后把类名传给该参数,定义类的时候
如果所有页面都使用这个类,必须定义为全局的
如果定义在scope作用域内的话
子组件不能复用父组件的样式。
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

mpvue的toast弹窗组件-mptosat的更多相关文章

  1. 从零开始徒手撸一个vue的toast弹窗组件

    相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...

  2. Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍

    轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时,右下角给予适当的提示信息 <ToastBox class="d ...

  3. uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

    介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...

  4. Vue自定义Popup弹窗组件|vue仿ios、微信弹窗|vue右键弹层

    基于vue.js构建的轻量级Vue移动端弹出框组件Vpopup vpopup 汇聚了有赞Vant.京东NutUI等Vue组件库的Msg消息框.Popup弹层.Dialog对话框.Toast弱提示.Ac ...

  5. vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  6. Android破解学习之路(五)——Android游戏 割绳子:魔法 + 在游戏加入Toast弹窗提示

    前言:这一期的破解教程,有新的知识内容出现啦! 这一期破解的游戏是找不到之前的关键字,怎么破解呢? 破解成功之后,添加一个Toast弹窗提示由XX破解,这操作该如何实现呢?请往下看~ 链接: http ...

  7. 微信小程序之自定义toast弹窗

    微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的 ...

  8. Vue列表组件与弹窗组件示例

    列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...

  9. Jquery弹窗组件

    下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...

随机推荐

  1. C++ 指针偏移的理解

    //题目:若有程序段int a[5] = { 1, 2, 3, 4, 5 }; int *p = (int *)(&a + 1); printf("%d,%d", *(a ...

  2. C/C++、C#、JAVA(一):代码模板与库代码的引入

    代码默认模板 编译性高级编程语言中,几乎每种语言,都有个静态的 main 方法作为程序启动入口,每种语言都有其编写规范.为了学习 C/C++.C#.JAVA四种语言,我们要先从默认代码模板中,慢慢摸索 ...

  3. Leetcode_1048. 最长字符串链

    字符串的最长严格递增子序列,前后只能相差一个字符. 直接O(N^2)暴力建图,然后记忆化跑个最长路. 直接按字符串长度排序,然后求LIS. code1 class Solution { public: ...

  4. python如何通过正则表达式一次性提取到一串字符中所有的汉字

    1.python如何通过正则表达式一次性提取到一串字符中所有的汉字 https://blog.csdn.net/py0312/article/details/93999895 说明:字符串前的 “ r ...

  5. .NET Core技术研究-HttpContext访问的正确姿势

    将ASP.NET升级到ASP.NET Core之后,相信大家都会遇到HttpContext.Current无法使用的问题.这也是我们迁移ASP.NET Core必须解决的问题. 本文我们详细讨论一下, ...

  6. VSCode 配置C++开发环境

    目录 安装VSCode应用程序 安装相关插件 汉化插件 C++编辑器插件 编写配置文件 tasks.json launch.json c_cpp_properties.json 第一步.安装VSCod ...

  7. Partition Array into Disjoint Intervals

    2020-02-10 22:16:50 问题描述: 问题求解: 解法一:MultiSet O(nlog) 看了下数据规模,第一个想到的是multiset,肯定可以ac的,就直接敲了出来. public ...

  8. [二分]codeforces 274A k-Multiple Free Set

    k-Multiple Free Set time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. 李宏毅老师机器学习课程笔记_ML Lecture 1: 回归案例研究

    引言: 最近开始学习"机器学习",早就听说祖国宝岛的李宏毅老师的大名,一直没有时间看他的系列课程.今天听了一课,感觉非常棒,通俗易懂,而又能够抓住重点,中间还能加上一些很有趣的例子 ...

  10. 《深入理解 Java 虚拟机》读书笔记:Java 内存模型与线程

    正文 由于计算机的处理器运算速度与它的存储和通信子系统速度的差距太大了,大量的时间都花费在磁盘 I/O.网络通信或者数据库访问上,导致处理器在大部分时间里都处于等待其他资源的状态.因此,为了充分利用计 ...