摘要:介紹是一個基于的簡單彈窗組件地址特性輕量目前整個項目未打包前大概只有行代碼包括注釋,左右包括圖標配置少嘗試過無數種優化方法,只為減少配置冗余少每個頁面只需要引入一次,該頁面里面如果有多個子組件,可以跟頁面共用一個,無需重復引入。
介紹
mptoast 是一個基于mpvue的簡單彈窗組件 github地址:https://github.com/noahlam/mpvue-toast
特性輕量 目前整個項目未打包前大概只有120行代碼(包括注釋),5kb左右(包括圖標)
配置少 嘗試過無數種優化方法,只為減少配置
冗余少 每個頁面(page)只需要引入一次,該頁面里面如果有多個子組件,可以跟頁面共用一個,無需重復引入。
使用簡單 除了必須的在page頁面對組件import,注冊,和html引入(這些麻煩的東西由于mpvue不支持的原因,暫時無法做到優化),其他的使用只需一行簡單的代碼 this.$mptoast("提示消息‘)即可實現彈窗
可定制性強 提供用戶重寫樣式的屬性,只需傳入一個定義好的樣式類名既可實現對原有樣式的覆蓋(具體請看參數說明)
安裝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()了, 以下是一個簡單的實例
<-- 省略其他代碼 -->
至于為什么沒辦法做到像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" // 圖標類名 })
需要注意的是,以上參數,如果傳入錯誤的類型,先會進行類型轉換,如果轉換失敗的,可能會報錯。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94186.html
摘要:最后寫一個公用的樣式就可以使用了。現在我們可以愉快的使用其開發了,如果對開發比較熟悉的話,完全遷移過來是沒有問題的。 由于公司業務需求的需要,在這一周需要開發小程序,加急看了下小程序的文檔,發現用其原生來編寫程序不是很順手,公司前端用的技術棧是vue, 詢問了谷哥和度娘發現大部分推薦了 wepy和 mpvue,對比了兩個框架,還是選用了 mpvue, 因為 mpvue 繼承自 vue....
摘要:基于開發的插件包含仿照原生樣式來源一些想法剛開始的時候想要用現成的彈窗組件來著但是查找一圈沒有發現比較合適項目的所以才自己開發了一個包含四種并且可以單個引入的組件開發實際上比較簡單有興趣的可以看下源碼實現步驟很清晰關于樣式的問題是直接從魅 wc-messagebox 基于 vue 2.0 開發的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...
摘要:三更新內容在原來項目的基礎上,做了如下更新數據庫重新設計,改成以用戶分組的數據庫結構應數據庫改動,所有接口重新設計,并統一采用和網易立馬理財一致的接口風格刪除原來游客模式,增加登錄注冊功能,支持彈窗登錄。 這個項目最初其實是fork別人的項目。當初想接觸下mongodb數據庫,找個例子學習下,后來改著改著就面目全非了。后臺和數據庫重構,前端增加了登錄注冊功能,僅保留了博客設置頁面,但是...
摘要:美團小程序框架入門教程自打寫了美團小程序框架蹲坑指南一發不可收拾,今天趁周末空閑,來寫個沒朋友的簡單入門教程,本教程只針對新手,老鳥勿噴。 美團小程序框架mpvue入門教程 自打寫了 美團小程序框架mpvue蹲坑指南,一發不可收拾,今天趁周末空閑,來寫個mpvue(沒朋友)的簡單入門教程,本教程只針對新手,老鳥勿噴。 另外,我還專門為本文做了一個簡單的項目,如果懶得從頭開始搭項目的童鞋...
摘要:騰訊地圖提供的只提供了經緯度定位,而產品需要的是確認定位后獲取城市,進行同城商品檢索阿里云對象儲存處理文件上傳,比較意外的是騰訊對阿里云的域名前綴進行了封禁后臺不能配置,解決方案是讓后臺將該域名進行服務器域名代理。 mpvue開發小程序所遇問題及h5轉化方案 項目結構 |---build |---pages.js文件目錄 |---src ...
閱讀 511·2021-10-09 09:44
閱讀 2072·2021-09-02 15:41
閱讀 3550·2019-08-30 15:53
閱讀 1829·2019-08-30 15:44
閱讀 1283·2019-08-30 13:10
閱讀 1188·2019-08-30 11:25
閱讀 1458·2019-08-30 10:51
閱讀 3364·2019-08-30 10:49