基于mpvue的简单弹窗组件mptoast使用详解


Posted in Javascript onAugust 02, 2019

介绍

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是包含在文本里面的

同上,需要注意的是icon是包含在文本里面的

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

this.$mptoast('温馨提示', 'success', 2000)

二, 单个object对象

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 #Javascript
超轻量级的js时间库miment使用解析
Aug 02 #Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 #Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 #Javascript
微信小程序的授权实现过程解析
Aug 02 #Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
用 js 写一个 js 解释器过程详解
Aug 02 #Javascript
You might like
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
php解析url的三个示例
2014/01/20 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP.vs.JAVA
2016/04/29 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python sep参数使用方法详解
2020/02/12 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
仓管岗位职责范本
2014/02/08 职场文书
《问银河》教学反思
2014/02/19 职场文书
行政副总岗位职责
2014/02/23 职场文书
亚运会口号
2014/06/20 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
Python jiaba库的使用详解
2021/11/23 Python
详解python的异常捕获
2022/03/03 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技