A toast pop-up window component mptoast based on mpvue

introduce

mptoast is a simple popup window component github address based on mpvue: github.com/noahlam/mpv…

characteristic

0. Lightweight At present, the entire project 未打包前only has 120行code (including comments), about 5kb (including icons)
1. Less configuration Tried countless optimization methods, just to reduce configuration
2. Less redundancy Each page (page) only needs to be introduced once. If there are multiple subcomponents in the page, they can share one with the page without repeating the introduction.
3. Simple to use In addition to the necessary import, registration, and html introduction of components on the page (these troublesome things cannot be optimized for the time being due to the unsupported reason of mpvue), other uses only need a simple line of code this.$mptoast('提示消息‘)to realize the pop-up window
4. Strong customizability Provide the attribute of the user's rewriting style, and only need to pass in a defined one 样式类名to achieve the coverage of the original style (for details, please refer to the parameter description)

Install

1. Install vuex, if your project is not already using it. Rest assured, though mptoastdependent vuex, you won't be touching any related vuexcode. Add vuexjust to let you write less code.

npm i vuex

2. Installationmptoast

npm i mptoast -D

or

yarn add mptoast --dev

（一般位于src/main.js）3. Add the following code to the main configuration file of the project

import mpvueToastRegistry from 'mptoast'
mpvueToastRegistry(Vue)

4. On the page where you need the pop-up window, import the component, register it, and then add a component you registered to the page, you can call it in js this.$mptoast(), the following is a simple example

<template>
  <div>
    <-- 省略其他代码 -->
    <mptoast />
  </div>
</template>

<script>
import mptoast from 'mptoast'

export default {
  components: {
    mptoast
  },
  data () {
    return {}
  },
  methods: {
    showToast () {
      this.$mptoast('我是提示信息')
    },
  }
}
</script>

As for why there is no way to introduce it once and use it on all pages like vue components, I think I have to explain the following, because mpvue does not currently support global components, I have tried many workarounds, but it doesn't work , and even in order to let everyone use less words and less redundancy, I have made a lot of attempts and optimizations. At present, the mpvue team is already considering adding global component functions. I will always pay attention. Once supported, I will Immediate support here.

Parameter Description

There are two types of parameters, one is multiple parameters, and the other is at least one object.

One, multiple parameters

parameter location	Parameter Type	parameter name	Is it required	Defaults	other instructions
1	string	display text	Yes	-	If the first parameter is not of type string or number , it will be treated as an object, which is another case mentioned above
2	stirng	Display icon type	no	-	3 optional 'success' , 'error' , 'info'
3	number	Closing time	no	1500	The unit is milliseconds, and other formats (non-number types) will report an error
4	string	Text style class name	no	-	If you need to customize the displayed style, please set a style class first and then pass the class name to this parameter. When defining the class, if all pages use this class, it must be defined as global. If it is defined in the scope, the subcomponent cannot Reuse styles from parent components.
5	string	icon style class name	no	-	Same as above, it should be noted that the icon is contained in the text

The following code is a simple example of a multiple parameter call

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

Second, the function of the object object parameter of a single object object is actually 多个参数the same as the corresponding function above, but the writing method is different. Let's look at the code directly

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

It should be noted that if the wrong type is passed in the above parameters, type conversion will be performed first. If the conversion fails, an error may be reported.