微信小程序自定義模态彈窗插件

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：101

最近在(zài)寫微信小程序的(de)時(shí)候用到(dào)了(le／liǎo)模态彈窗，但是(shì)發現微信官方給的(de)wx.showModal(OBJECT)可自定義性還是(shì)太少，滿足不(bù)了(le／liǎo)某些情況下的(de)需求。

比如，用戶點擊了(le／liǎo)蒙層，而(ér)不(bù)是(shì)點擊取消按鈕，彈窗也(yě)會去執行取消事件，并且将彈窗關閉。文檔裏并沒有屏蔽蒙層點擊事件的(de)屬性，也(yě)沒有辦法通過其他(tā)的(de)方式去屏蔽。

所以(yǐ)就(jiù)寫了(le／liǎo)一個(gè)可随意自定義的(de)第三方彈窗插件【wxPopup】

使用方法也(yě)很簡單，在(zài)要(yào / yāo)調用彈窗的(de)位置使用this.showModel()方法，傳入一些參數，就(jiù)可以(yǐ)将彈窗顯示出(chū)來(lái)。

this.showModel({
  ModelId: 1,
  ModelTitle: '标題(2)',
  ModelContent: '感謝使用wxPoput自定義模态彈窗,一個(gè)可以(yǐ)随意自定義樣式的(de)微信小程序彈窗插件。已經開源到(dào)GitHub上(shàng)。'
})

彈窗的(de)取消事件

//取消事件
ancel: function(e){
    if (e.currentTarget.dataset.modelid == 0){
      console.log("用戶點擊了(le／liǎo)取消(1)")
    } else if (e.currentTarget.dataset.modelid == 1){
      console.log("用戶點擊了(le／liǎo)取消(2)")
    }
}

彈窗的(de)确定事件

//确定事件
confirm: function(e){
    if (e.currentTarget.dataset.modelid == 0) {
      console.log("用戶點擊了(le／liǎo)确定(1)")
    } else if (e.currentTarget.dataset.modelid == 1) {
      console.log("用戶點擊了(le／liǎo)确定(2)")
    }
    //關閉模态彈窗
    this.setData({
      isShowModel: false
    })
}