介紹

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

特性

1.輕量 目前整個項(xiàng)目未打包前大概只有120行代碼(包括注釋)，5kb左右(包括圖標(biāo))

2.配置少 嘗試過無數(shù)種優(yōu)化方法，只為減少配置

3.冗余少 每個頁面（page）只需要引入一次，該頁面里面如果有多個子組件，可以跟頁面共用一個，無需重復(fù)引入。

4.使用簡單 除了必須的在page頁面對組件import，注冊，和html引入（這些麻煩的東西由于mpvue不支持的原因，暫時無法做到優(yōu)化），其他的使用只需一行簡單的代碼 this.$mptoast('提示消息‘)即可實(shí)現(xiàn)彈窗

5.可定制性強(qiáng) 提供用戶重寫樣式的屬性，只需傳入一個定義好的樣式類名既可實(shí)現(xiàn)對原有樣式的覆蓋（具體請看參數(shù)說明）

安裝

1.安裝vuex，如果你項(xiàng)目還沒使用的話。請放心，雖然mptoast依賴vuex,你不會接觸到任何有關(guān)vuex的代碼。添加vuex只為讓你寫更少的代碼。

npm i vuex

2.安裝mptoast

npm i mptoast -D

或者

yarn add mptoast --dev

3.在項(xiàng)目的主配置文件（一般位于src/main.js）加入以下代碼

import mpvueToastRegistry from 'mptoast'
mpvueToastRegistry(Vue)

4.在你需要彈窗的頁面，引入組件，并注冊，然后在頁面內(nèi)加入一個你注冊的組件，就可以在js里面調(diào)用this.$mptoast()了， 以下是一個簡單的實(shí)例

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

<script>
import mptoast from 'mptoast'

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

至于為什么沒辦法做到像vue組件那樣，引入一次，就可以在所有頁面使用，我想我必須得解釋以下，因?yàn)閙pvue目前還不支持全局的組件，我嘗試過很多種變通辦法，都行不通，甚至為了讓大家使用的時候，少輸入幾個字，少一些冗余，我都做了很多嘗試和優(yōu)化，目前mpvue團(tuán)隊(duì)已經(jīng)在考慮新增全局組件功能，我會時刻關(guān)注，一旦支持，我這邊也立馬做支持。

參數(shù)說明

參數(shù)分2種類型，一種是多個參數(shù)，另一個種則少只接收一個對象

一， 多個參數(shù)

同上，需要注意的是icon是包含在文本里面的

以下代碼是一個多個參數(shù)調(diào)用的簡單實(shí)例

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

二， 單個object對象

object對象參數(shù)的功能，其實(shí)跟上面多個參數(shù)的對應(yīng)的功能是一樣的，只是寫法不同而已，我們直接看代碼

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

需要注意的是，以上參數(shù)，如果傳入錯誤的類型，先會進(jìn)行類型轉(zhuǎn)換，如果轉(zhuǎn)換失敗的，可能會報錯。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論