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

noahlam發表於2018-04-03
VueAST元件

介紹

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

特性

  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' // 圖示類名
})
複製程式碼

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

相關文章