基于mpvue的toast彈出元件mptoast介紹

介紹

mptoast 是一個基于mpvue的簡單彈窗元件 github位址：https://github.com/noahlam/mpvue-toast

特性

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是包含在文本裡面的

以下代碼是一個多個參數調用的簡單執行個體

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

二， 單個object對象

object對象參數的功能，其實跟上面

多個參數

的對應的功能是一樣的，隻是寫法不同而已，我們直接看代碼

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

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