基于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 相关文章推荐
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
chrome原生方法之数组
Nov 30 Javascript
javascript的alert box在java中如何显示多行
May 18 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
JavaScript实现多球运动效果
Sep 07 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
apache集成php7.3.5的详细步骤
2019/06/20 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
深入理解vue中的$set
2017/06/01 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
python中的decorator的作用详解
2018/07/26 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
django基础学习之send_mail功能
2019/08/07 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
法国珠宝店:CLEOR
2017/01/29 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
采购部岗位职责
2013/11/24 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
集中整治工作方案
2014/05/01 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2014年司法局工作总结
2014/12/11 职场文书
办公室个人总结
2015/02/28 职场文书
追悼会悼词大全
2015/06/23 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL