微信小程序自定義模態彈窗組件

小程序自帶一個showModal彈窗，調用很簡單，但是限制很多，title有字數限制，中間的content也只能放文字不能放組件，所以作爲一個前端碰到那種連續好幾個跟微信自帶的模態彈窗風格一模一樣，但是功能又花裏胡哨的UI稿，就不能忍受頻繁的複製粘貼了。自己寫了一個組件，雖然調用起來比微信自帶的麻煩一點，但是還蠻實用的。

                 

效果大概長這樣。

上代碼：

wxml：

<!-- 自定義模態彈窗 -->
<view class="modalDIY" wx:if="{{showModal}}">
  <view class="bg">
    <view class="modalTitle">{{title}}</view>
    <view class="modalContent">
      <view>{{content}}</view>
      <slot></slot>
    </view>
    <view class="modalOperate">
      <view bindtap="_cancel" hidden="{{!showCancel}}" style="color:{{cancelColor}}" class="cancelBtn">{{cancelText}}</view>
      <view bindtap="_comfirm" class="comfirmBtn" style="color:{{confirmColor}}">{{confirmText}}</view>
    </view>
  </view>
</view>

js：

const regeneratorRuntime = require('../../dependence/generator-runtime.js'); //這是一個es6轉es5的js
Component({
  properties: {
    // 這裏定義了innerText屬性，屬性值可以在組件使用時指定
  },
  data: {
    showModal: false,
    title: '溫馨提示',
    content: '',
    showCancel: true,
    cancelColor: '#3a3a3a',
    cancelText: '取消',
    confirmColor: '#00800',
    confirmText: '確認',
    comfirm() { },
    cancel() { }
  },
  methods: {
    // 外部方法調用
    showModal(params) {
      this.setData({
        showModal: true,
        title: params.title || '溫馨提示', //title
        content: params.content || '',//中間內容
        showCancel: params.showCancel == undefined ? true : params.showCancel,//是否顯示左側
        cancelColor: params.cancelColor || '#3a3a3a',//取消按鈕文字顏色
        cancelText: params.cancelText || '取消',//左側按鈕文字
        confirmColor: params.confirmColor || '#09BA07',//右側按鈕文字顏色
        confirmText: params.confirmText || '確認',//右側按鈕文字
        /* 回調函數 */
        comfirm: params.comfirm || function(){},//點擊確認（右側按鈕）
        cancel: params.cancel || function(){}//點擊取消（左側按鈕）
      })
    },
    // 點擊確定
    _comfirm() {
      this.setData({
        showModal: false
      },()=>{
        this.data.comfirm();
      })
    },
    // 點擊取消
    _cancel() {
      this.setData({
        showModal: false
      },()=>{
        this.data.cancel();
      })
    }
  }
})

// 調用示例
// 引入組件後通過js  selectComponent('#id')方法獲得組件對象  再調用組件對象下的showModal方法   傳入配置參數即可  可以在組件中自定義內容節點

wxss：

.modalDIY{
  position: fixed;
  z-index: 99999999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.bg{
  background: #fff;
  text-align: center;
  border-radius: 10rpx;
  width: 90%;
}
.modalTitle{
  padding: 30rpx 40rpx 0 40rpx;
  font-size: 36rpx;
  line-height: 55rpx;
  color: #000;
}
.modalContent{
  padding: 20rpx 40rpx;
  font-size: 30rpx;
  color: #7a7a7a;
}
.modalOperate{
  height: 100rpx;
  line-height: 100rpx;
  border-top: 2rpx solid #eee;
  display: flex;
}
.cancelBtn{
  border-right: 2rpx solid #eee;
  flex: 1;
}
.comfirmBtn{
  flex: 1;
}

json：（記住要把component設置成true）

{
  "component": true,
  "usingComponents": {}
}

調用的時候需要貼別說明一下，拿我上面示例圖的第二個彈窗的調用爲例

首先引入組件

在wxml中引用組件

在js中可以配置一些顏色之類的樣式

首先通過selectComponent這個方法獲得組件對象，可以存成全局的常量。

我們要調用這個對象下自己封裝的showModal方法

完畢。