欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 基于mpvue的简单弹窗组件mptoast

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:511

HTML5自适应律师工作室类网

2020-04-04   浏览:505

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

基于mpvue的简单弹窗组件mptoast

发布时间:2020-10-25  
介绍

 

 

特性

轻量 目前整个项目未打包前大概只有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()了, 以下是一个简单的实例

 

<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种类型,一种是多个参数,另一个种则少只接收一个对象

 

一, 多个参数

基于mpvue的简单弹窗组件mptoast

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

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

 

二, 单个object对象

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

 

this.$mptoast({

text: '温馨提示', // 显示文本

icon:'success' // 图标类型

duration: 2000, // 关闭时间

textClass: 'my-class' // 样式类名

iconClass: 'icon-class' // 图标类名

})

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