微信小程式自定義封裝元件-showModal

封裝一個元件

這裡由于最近使用微信小程式居多，是以着重寫的是小程式的，但是萬變不離其宗，元件實作思路其實都差不多的

微信小程式開發中官方自帶的wx.showModal，這個彈窗

API有時候并不能滿足我們的彈窗效果，是以往往需要自定義modal元件。下面我們進行一個自定義modal彈窗元件的開發，并進行元件的引用。

wx.showModal({
    cancelColor: \'cancelColor\',
    title: \'提示\',
    content: \'這是一個模态彈窗\',
})

效果如下：

使用微信自定義modal，功能單一，樣式也不能滿足ui需求，這裡自定義一個modal

我們建立在components裡建立一個modal檔案來封裝我們自己的自定義彈框：

index.wxml頁面

<view wx:if="{{_show}}" class=\'popV\' catchtouchmove="move">
    <view class=\'popV-mask\' bindtap="selectMask" animation=\'{{maskAnimate}}\'></view>
    <!-- 動态修改top -->
    <view class=\'popV-content\' animation=\'{{frameAnimate}}\'>
        <view class="tap_title" wx:if="{{tabTitleShow}}">{{tapTitle}}</view>
        <view class="popV-title" wx:if="{{title}}">{{title}}</view>
        <slot wx:if="{{custom}}"></slot>
        <view class=\'popV-content-btm\'>
            <button wx:for="{{btns}}" wx:key="index" data-index="{{index}}" class=\'popV-item\' style="color:{{btnTextColor[index]?btnTextColor[index]:\'\'}};" hover-class=\'popV-hover\' bindtap=\'selectBtn\'>
                {{item}}
            </button>
        </view>
    </view>
</view>

這裡由于動效展示，使用了animation動畫，大家也可以用這個api來實作想要的效果，如果想要更好的效果其實也可以通過設定參數來實作更好的彈框效果展示，這裡不做更多的展示，喜歡的可以自己優化

元件相關參數

參數名	含義
_show	彈框是否展示（Boolean類型）
tapTitle	頂部提示标題（string）
tabTitleShow	頂部提示标題是否展示（Boolean類型）
title	提示文字（string）
btns	底部按鈕（array）
btnTextColor	底部文字顔色（array）
custom	是否自定義插糟（Boolean類型）

然後，我們在需要的地方，index.json中引入元件

"usingComponents": {
    "modal":"./common/index"
  }

1.簡單封裝元件

在自己要使用的元件使用：

<modal show="true" title="這是一個彈框" btns="{{[\'取消\',\'确定\']}}" binddidClickBtn="onClickModalBtn"></modal>

如下圖就實作了彈框展示效果：

這裡我們直接把元件的props show寫死了，是以直接展示，我們可以通過動态數組來實作展示隐藏，

我們看看效果：

這裡可以看到大部分效果已經實作，這裡我們對最外層的view做了一個catchtouchmove方法，用來組織冒泡

接下來就是對底部按鈕的處理：

// 選中底部的按鈕
selectBtn: function (e) {
    let index = e.currentTarget.dataset.index;
    this.triggerEvent(\'didClickBtn\', index); // 外面通過e.detail擷取index的值
},

我們讓元件設定一個triggerEvent事件，讓父元件接受這個事件，使得調用該元件的元件能夠處理底部按鈕點選對應的事件

// wxml
<modal show="{{modalShow}}" title="這是一個彈框" btns="{{[\'取消\',\'确定\']}}" binddidClickBtn="onClickModalBtn"></modal>
// js
  //底部按鈕點選
onClickModalBtn(e){
    console.log(e);
    if(e.detail == 0){
        console.log(\'關閉事件\');
    }else{
        console.log(\'确定事件\');
    }
}

這裡我們隻對兩個按鈕的做處理，如果對應的多個元件可以自定義封裝，由于沒有做到多個按鈕的需求，底部按鈕隻做兩個：

我們看看效果:

這樣我們就實作了對Modal的簡單封裝，你想要在那個檔案使用，在json引入就可以。

2.優化封裝

但是有一個問題就是，每次想要彈窗都需要建立一個modal，然後在裡面寫入相關的參數，也是有點小麻煩的。

我們可以把參數抽出來，寫在函數裡面，實作像微信小程式一樣的寫法，具體可以參考 wx.showModal(Object object)

wx.showModal({
  title: \'提示\',
  content: \'這是一個模态彈窗\',
  success (res) {
    if (res.confirm) {
      console.log(\'使用者點選确定\')
    } else if (res.cancel) {
      console.log(\'使用者點選取消\')
    }
  }
})

這樣子寫起來着實友善，快捷，易懂，我們對現有代碼進行封裝，把相關參數抽離到一個函數中：

showModal: function (params) {
    let {cuccess,error} = this
    this.setData({
    show: !this.data.show,
    title: params.title,
    tabTitleShow:params.tabTitleShow,
    success: params.success || function () { },
    error: params.error || function () { },
    })
},
// 選中底部的按鈕
selectBtn: function (e) {
    let index = e.currentTarget.dataset.index;
    this.triggerEvent(\'didClickBtn\', index); // 外面通過e.detail擷取index的值
    if (index == 0) {
    this.setData({
        show: false
    }, () => {
        this.data.error()
    })
    } else {
    this.setData({
        show: false
    }, () => {
        this.data.success()
    })
    }
},

這裡把所有參數放到了showModal方法裡，然後點選取消确定時關閉彈框并且觸發成功失敗方法，在調用元件時可以在success、error回調中做相應的方法

我們在調用元件的位置調用showModal:

由于是擷取元件裡的方法，是以我們需要先擷取元件

// show  調用
this.modal = this.selectComponent("#modal")
onClick4() {
    this.modal.showModal({
      show: true,
      title: \'函數調用\',
      tabTitleShow: false,
      success :(res) => {
        wx.showToast({
          icon:"success",
          title: \'确定按鈕點選\',
        })
      },
      error: () => {
        wx.showToast({
          icon:\'error\',
          title: \'取消按鈕點選\',
        })
      },
    }) 
  },

我們看看效果：

這裡已經實作了函數調用元件

3.将元件全局化

但是每個元件都得重新擷取元件，然後才能調用方法，這個也很麻煩，我們可以全局執行個體化這個方法，在app.js把這個方法挂載：

//app.js

showModal(that,options){
    that.selectComponent(\'#modal\').showModal(options);
  }
// 元件調用
const app = getApp()
app.showModal(this,{
    show: true,
    title: \'函數調用\',
    tabTitleShow: false,
    success :(res) => {
    wx.showToast({
        icon:"success",
        title: \'确定按鈕點選\',
    })
    },
    error: () => {
    wx.showToast({
        icon:\'error\',
        title: \'取消按鈕點選\',
    })
  },
})

這樣子，全局元件就封裝好了，調用效果和上面函數調用效果一樣，這裡我隻把我常用的參數和方法進行了封裝，大家也可以根據自己産品對封裝元件進行很多函數。參數的封裝。

微信小程式的彈框已經大概實作，其實vue、react也大緻相同。可以參考封裝一個，這裡不做解釋.

這裡附上相關代碼，希望能幫助大家：

微信小程式自定義modal 代碼》》》自定義modal

其他作品也希望大佬多多指點