成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

mptosat,一個(gè)基于mpvue的toast彈窗組件

remcarpediem / 2562人閱讀

摘要：介紹是一個(gè)基于的簡(jiǎn)單彈窗組件地址特性輕量目前整個(gè)項(xiàng)目未打包前大概只有行代碼包括注釋?zhuān)笥野▓D標(biāo)配置少?lài)L試過(guò)無(wú)數(shù)種優(yōu)化方法，只為減少配置冗余少每個(gè)頁(yè)面只需要引入一次，該頁(yè)面里面如果有多個(gè)子組件，可以跟頁(yè)面共用一個(gè)，無(wú)需重復(fù)引入。

介紹

mptoast 是一個(gè)基于mpvue的簡(jiǎn)單彈窗組件 github地址：https://github.com/noahlam/mpvue-toast

特性

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

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

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

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

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

安裝

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

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í)例

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94186.html

相關(guān)文章

  • 小程序的初次遇見(jiàn),使用mpvue搭建模板

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

    MangoGoing 評(píng)論0 收藏0

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

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

    Darkgel 評(píng)論0 收藏0

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

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

    wh469012917 評(píng)論0 收藏0

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

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

    YorkChen 評(píng)論0 收藏0

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

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

    big_cat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<