介紹
特性
輕量 目前整個項目未打包前大概只有120行代碼(包括注釋)，5kb左右(包括圖標)
配置少 嘗試過無數種優化方法，只為減少配置
冗余少 每個頁面（page）只需要引入一次，該頁面里面如果有多個子組件，可以跟頁面共用一個，無需重復引入。
使用簡單 除了必須的在page頁面對組件import，注冊，和html引入（這些麻煩的東西由于mpvue不支持的原因，暫時無法做到優化），其他的使用只需一行簡單的代碼 this.$mptoast('提示消息‘)即可實現彈窗
可定制性強 提供用戶重寫樣式的屬性，只需傳入一個定義好的樣式類名既可實現對原有樣式的覆蓋（具體請看參數說明）
安裝
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種類型，一種是多個參數，另一個種則少只接收一個對象
一， 多個參數
以下代碼是一個多個參數調用的簡單實例
this.$mptoast('溫馨提示', 'success', 2000)
二， 單個object對象
object對象參數的功能，其實跟上面多個參數的對應的功能是一樣的，只是寫法不同而已，我們直接看代碼
-
this.$mptoast({
-
text: '溫馨提示', // 顯示文本
-
icon:'success' // 圖標類型
-
duration: 2000, // 關閉時間
-
textClass: 'my-class' // 樣式類名
-
iconClass: 'icon-class' // 圖標類名
-
})
需要注意的是，以上參數，如果傳入錯誤的類型，先會進行類型轉換，如果轉換失敗的，可能會報錯。
|
