一個基於mpvue的toast彈窗組件mptoast

介紹

mptoast 是一個基於mpvue的簡單彈窗組件 github地址：github.com/noahlam/mpv…

特性

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類型 則會被看成對象來處理，也就是上面提到的另外一種狀況
2	stirng	顯示圖標類型	否	-	3種可選 'success' , 'error' , 'info'
3	number	關閉時間	否	1500	單位是毫秒ms,傳其餘格式（非number類型）會報錯
4	string	文本樣式類名	否	-	若是須要自定義顯示的樣式，請先定一個樣式類 而後把類名傳給該參數，定義類的時候 若是全部頁面都使用這個類,必須定義爲全局的 若是定義在scope做用域內的話 子組件不能複用父組件的樣式。
5	string	icon樣式類名	否	-	同上，須要注意的是icon是包含在文本里面的

如下代碼是一個多個參數調用的簡單實例

this.$mptoast('舒適提示', 'success', 2000)
複製代碼

二， 單個object對象 object對象參數的功能，其實跟上面多個參數的對應的功能是同樣的，只是寫法不一樣而已，咱們直接看代碼

this.$mptoast({
  text: '舒適提示',        // 顯示文本
  icon:'success'          // 圖標類型
  duration:  2000,        // 關閉時間
  textClass: 'my-class'   // 樣式類名
  iconClass: 'icon-class' // 圖標類名
})
複製代碼

須要注意的是，以上參數，若是傳入錯誤的類型，先會進行類型轉換，若是轉換失敗的，可能會報錯。