怎么在mpvue中使用mptoast弹窗组件-创新互联

怎么在mpvue中使用mptoast弹窗组件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联公司作为成都网站建设公司，专注成都网站建设、网站设计，有关企业网站建设方案、改版、费用等问题，行业涉及混凝土搅拌罐等多个领域，已为上千家企业服务，得到了客户的尊重与认可。

特性

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' // 图标类名
})

关于怎么在mpvue中使用mptoast弹窗组件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

新闻名称：怎么在mpvue中使用mptoast弹窗组件-创新互联
文章地址：https://www.cdcxhl.com/article16/eggdg.html

成都网站建设公司_创新互联，为您提供做网站、网站设计、全网营销推广、静态网站、品牌网站建设、小程序开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容