mptosat,一個基於mpvue的toast彈窗組件

2023年12月12日 117次阅读 来源: noahlam

引見

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種範例，一種是多個參數，另一個種則少只吸收一個對象

一， 多個參數

參數位置參數範例參數稱號是不是必填默認值其他申明
1string顯現文本是–假如第一個參數不是string或number範例
則會被看成對象來處置懲罰，也就是上面提到的另一種狀況
2stirng顯現圖標範例否–3種可選 ‘success’ , ‘error’ , ‘info’
3number封閉時候否1500單元是毫秒ms,傳其他花樣（非number範例）會報錯
4string文本款式類名否–假如須要自定義顯現的款式，請先定一個款式類
然後把類名傳給該參數，定義類的時候
假如一切頁面都運用這個類,必需定義為全局的
假如定義在scope作用域內的話
子組件不能復用父組件的款式。
5stringicon款式類名否–同上，須要注重的是icon是包含在文本內里的

以下代碼是一個多個參數挪用的簡樸實例

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

二， 單個object對象
object對象參數的功用，實在跟上面多個參數的對應的功用是一樣的，只是寫法差別罷了，我們直接看代碼

this.$mptoast({
  text: '溫馨提醒',        // 顯現文本
  icon:'success'          // 圖標範例
  duration:  2000,        // 封閉時候
  textClass: 'my-class'   // 款式類名
  iconClass: 'icon-class' // 圖標類名
})

須要注重的是，以上參數，假如傳入毛病的範例，先會舉行範例轉換，假如轉換失利的，可能會報錯。

    原文作者：noahlam
    原文地址: https://segmentfault.com/a/1190000014331380
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞