怎么在mpvue中使用mptoast彈窗組件-創(chuàng)新互聯(lián)

怎么在mpvue中使用mptoast彈窗組件？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，有關(guān)企業(yè)網(wǎng)站建設(shè)方案、改版、費(fèi)用等問題，行業(yè)涉及混凝土攪拌罐等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

特性

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

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

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

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

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

安裝

1.安裝vuex，如果你項(xiàng)目還沒使用的話。請(qǐng)放心，雖然mptoast依賴vuex,你不會(huì)接觸到任何有關(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.在你需要彈窗的頁(yè)面，引入組件，并注冊(cè)，然后在頁(yè)面內(nèi)加入一個(gè)你注冊(cè)的組件，就可以在js里面調(diào)用this.$mptoast()了，以下是一個(gè)簡(jiǎn)單的實(shí)例

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

<script>
import mptoast from 'mptoast'

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

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

參數(shù)說明

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

一，多個(gè)參數(shù)

參數(shù)位置	參數(shù)類型	參數(shù)名稱	是否必填	默認(rèn)值	其他說明
1	string	顯示文本	是	-	如果第一個(gè)參數(shù)不是string或number類型則會(huì)被當(dāng)作對(duì)象來(lái)處理，也就是上面提到的另一種情況
2	stirng	顯示圖標(biāo)類型	否	-	3種可選 'success' , 'error' , 'info'
3	number	關(guān)閉時(shí)間	否	1500	單位是毫秒ms,傳其他格式（非number類型）會(huì)報(bào)錯(cuò)
4	string	文本樣式類名	否	-	如果需要自定義顯示的樣式，請(qǐng)先定一個(gè)樣式類然后把類名傳給該參數(shù)，定義類的時(shí)候如果所有頁(yè)面都使用這個(gè)類,必須定義為全局的如果定義在scope作用域內(nèi)的話子組件不能復(fù)用父組件的樣式。
5	string	icon樣式類名	否	-	同上，需要注意的是icon是包含在文本里面的

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

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

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

二，單個(gè)object對(duì)象

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

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

關(guān)于怎么在mpvue中使用mptoast彈窗組件問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

新聞名稱：怎么在mpvue中使用mptoast彈窗組件-創(chuàng)新互聯(lián)
文章地址：http://muchs.cn/article16/eggdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容