Blame view

node_modules/mptoast/README.md 4.21 KB
ce4c83ff   wxy   初始提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
  ### 介绍
  mptoast 是一个基于mpvue的简单弹窗组件  github地址:[https://github.com/noahlam/mpvue-toast](https://github.com/noahlam/mpvue-toast)
  
  ### 特性
  0. **轻量** 目前整个项目`未打包前`大概只有`120行`代码(包括注释),5kb左右(包括图标)
  1. **配置少**  尝试过无数种优化方法,只为减少配置
  2. **冗余少**  每个页面(page)只需要引入一次,该页面里面如果有多个子组件,可以跟页面共用一个,无需重复引入。
  3. **使用简单** 除了必须的在page页面对组件import,注册,和html引入(这些麻烦的东西由于mpvue不支持的原因,暂时无法做到优化),其他的使用只需一行简单的代码 `this.$mptoast('提示消息‘)`即可实现弹窗
  4. **可定制性强** 提供用户重写样式的属性,只需传入一个定义好的`样式类名`既可实现对原有样式的覆盖(具体请看参数说明)
  
  
  ### 安装
  
  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类型<br>则会被当作对象来处理,也就是上面提到的另一种情况  |
  |     2   | stirng | 显示图标类型 |   否     |   -   |  3种可选  'success'  ,  'error'  ,  'info'      |
  |     3   | number | 关闭时间 |   否     | 1500   |  单位是毫秒ms,传其他格式(非number类型)会报错      |
  |     4   | string | 文本样式类名 |   否     |   -   |  如果需要自定义显示的样式,请先定一个样式类<br>然后把类名传给该参数,定义类的时候<br>如果所有页面都使用这个类,必须定义为全局的<br>如果定义在scope作用域内的话<br>子组件不能复用父组件的样式。      |
  |     5   | string | icon样式类名 |   否     |   -   |  同上,需要注意的是icon是包含在文本里面的      |
  
  以下代码是一个多个参数调用的简单实例
  
      this.$mptoast('温馨提示', 'success', 2000)
  
  二, 单个object对象
  object对象参数的功能,其实跟上面`多个参数`的对应的功能是一样的,只是写法不同而已,我们直接看代码
  
      this.$mptoast({
        text: '温馨提示',        // 显示文本
        icon:'success'          // 图标类型
        duration:  2000,        // 关闭时间
        textClass: 'my-class'   // 样式类名
        iconClass: 'icon-class' // 图标类名
      })
  
  需要注意的是,以上参数,如果传入错误的类型,先会进行类型转换,如果转换失败的,可能会报错。