成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

remcarpediem / 2547人閱讀

摘要：介紹是一個基于的簡單彈窗組件地址特性輕量目前整個項目未打包前大概只有行代碼包括注釋，左右包括圖標(biāo)配置少嘗試過無數(shù)種優(yōu)化方法，只為減少配置冗余少每個頁面只需要引入一次，該頁面里面如果有多個子組件，可以跟頁面共用一個，無需重復(fù)引入。

介紹

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

特性

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

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

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

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

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

安裝

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

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

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

一， 多個參數(shù)

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

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

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

二， 單個object對象
object對象參數(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)換失敗的，可能會報錯。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94186.html

相關(guān)文章

  • 小程序的初次遇見,使用mpvue搭建模板

    摘要：最后寫一個公用的樣式就可以使用了?，F(xiàn)在我們可以愉快的使用其開發(fā)了，如果對開發(fā)比較熟悉的話，完全遷移過來是沒有問題的。 由于公司業(yè)務(wù)需求的需要，在這一周需要開發(fā)小程序，加急看了下小程序的文檔，發(fā)現(xiàn)用其原生來編寫程序不是很順手，公司前端用的技術(shù)棧是vue， 詢問了谷哥和度娘發(fā)現(xiàn)大部分推薦了 wepy和 mpvue，對比了兩個框架，還是選用了 mpvue, 因為 mpvue 繼承自 vue....

    MangoGoing 評論0 收藏0

  • 基于 Vue 2.0 實現(xiàn)的移動端彈窗 (Alert, Confirm, Toast)組件.

    摘要：基于開發(fā)的插件包含仿照原生樣式來源一些想法剛開始的時候想要用現(xiàn)成的彈窗組件來著但是查找一圈沒有發(fā)現(xiàn)比較合適項目的所以才自己開發(fā)了一個包含四種并且可以單個引入的組件開發(fā)實際上比較簡單有興趣的可以看下源碼實現(xiàn)步驟很清晰關(guān)于樣式的問題是直接從魅 wc-messagebox 基于 vue 2.0 開發(fā)的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...

    Darkgel 評論0 收藏0

  • 一個基于Vue.js+Mongodb+Node.js的博客內(nèi)容管理系統(tǒng)

    摘要：三更新內(nèi)容在原來項目的基礎(chǔ)上，做了如下更新數(shù)據(jù)庫重新設(shè)計，改成以用戶分組的數(shù)據(jù)庫結(jié)構(gòu)應(yīng)數(shù)據(jù)庫改動，所有接口重新設(shè)計，并統(tǒng)一采用和網(wǎng)易立馬理財一致的接口風(fēng)格刪除原來游客模式，增加登錄注冊功能，支持彈窗登錄。 這個項目最初其實是fork別人的項目。當(dāng)初想接觸下mongodb數(shù)據(jù)庫，找個例子學(xué)習(xí)下，后來改著改著就面目全非了。后臺和數(shù)據(jù)庫重構(gòu)，前端增加了登錄注冊功能，僅保留了博客設(shè)置頁面，但是...

    wh469012917 評論0 收藏0

  • 美團(tuán)小程序框架mpvue入門教程

    摘要：美團(tuán)小程序框架入門教程自打?qū)懥嗣缊F(tuán)小程序框架蹲坑指南一發(fā)不可收拾，今天趁周末空閑，來寫個沒朋友的簡單入門教程，本教程只針對新手，老鳥勿噴。 美團(tuán)小程序框架mpvue入門教程 自打?qū)懥?美團(tuán)小程序框架mpvue蹲坑指南,一發(fā)不可收拾，今天趁周末空閑，來寫個mpvue(沒朋友)的簡單入門教程，本教程只針對新手，老鳥勿噴。 另外，我還專門為本文做了一個簡單的項目，如果懶得從頭開始搭項目的童鞋...

    YorkChen 評論0 收藏0

  • mpvue開發(fā)小程序所遇問題及h5轉(zhuǎn)化方案

    摘要：騰訊地圖提供的只提供了經(jīng)緯度定位，而產(chǎn)品需要的是確認(rèn)定位后獲取城市，進(jìn)行同城商品檢索阿里云對象儲存處理文件上傳，比較意外的是騰訊對阿里云的域名前綴進(jìn)行了封禁后臺不能配置，解決方案是讓后臺將該域名進(jìn)行服務(wù)器域名代理。 mpvue開發(fā)小程序所遇問題及h5轉(zhuǎn)化方案 項目結(jié)構(gòu) |---build |---pages.js文件目錄 |---src ...

    big_cat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<