小程序 模態對話框自定義組件(modal)

1. 概述

1.1 說明

小程序中使用wx.showModal(Object object)打開一個模態對話框，但是目前小程序所提供的modal中的內容顯示比較死板，不能夠完全滿足工作中所遇到的功能信息，故做一個自定義組件來處理相關的功能任務。

自定義組件所需功能：

1. 1. 全屏蒙版
   2. 模態對話框的顯示內容：標題、內容、操作按鈕
   3. 對模態框的操作，如顯示與隱藏，取消按鈕是否顯示，按鈕對應標題顏色等
   4. 模態對話框內容信息能夠自定義操作

1.2 自定義組件

　　1.2.1 概述

　　多個頁面中會存在相同功能模塊或類似功能模塊，此時就可以把這些相同或類似的功能模塊抽象成自定義組件，進行減少工作量的開展與后期維護；也可對復雜的頁面拆分功能模塊處理。

　　小程序中的自定義組件也是由 json 、wxml 、wxss 、js 4個文件組成，直接右鍵點擊新建component：

• •  json -- json文件中  "component": true (即顯示聲明自定義組件)，則代表這個文件(json&wxml&wxss&js)為自定義組件
  • wxml -- wxml文件中進行編寫自定義組件結構，其中組件中可使用<slot>節點去承載組件引用時所提供的子節點信息，即組件中寫入<slot></slot>的地方，在頁面中引用時可以執行定義節點信息。
  • wxss -- wxss文件中編寫組件的樣式，使用類選擇器進行處理。
  • js -- js文件是定義組件的組件構造器Component({***})，包含組件對外屬性properties，組件內部數據data，組件方法methods等

　　1.2.2 引用

　　使用已注冊(json中顯示聲明component為true)的自定義組件前，需要先在頁面的json文件中引用聲明，自定義組件的標簽名和組件文件路徑：

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

　　頁面中引用：

<view>
  <!-- 以下是對一個自定義組件的引用 -->
  <component-tag-name 屬性="屬性值"></component-tag-name>
</view>

1.3 自定義組件圖例

  

2. 代碼

　　碼雲: https://gitee.com/ajuanK/wxSimpleTodoList.git

2.1 組件頁面設計(wxml)

　　對話框中內容：標題、內容、操作按鈕，其中內容使用slot去承接頁面中自定義節點，按鈕可以單按鈕顯示並更改其對應顯示內容與顏色。

<view class='modal-wrapp' wx:if='{{modal.show}}'>
  <view class='modal-main' style='height:{{(modal.height)?modal.height:modalDefault.height}}'>
    <view class='modal-title'>{{(modal.title)?modal.title:modalDefault.title}}</view>
    <scroll-view scroll-y class='modal-content'>
      <slot></slot>
    </scroll-view>
    <view class='modal-button'>
      <view class='modal-cancel' style='color:{{(modal.cancelColor)?modal.cancelColor:modalDefault.cancelColor}}' wx:if='{{modal.showCancel}}' bindtap="modalCancel">{{(modal.cancelText)?modal.cancelText:modalDefault.cancelText}}</view>
      <view class='modal-confirm' style='color:{{(modal.confirmColor)?modal.confirmColor:modalDefault.confirmColor}}' bindtap="modalConfirm">{{(modal.confirmText)?modal.confirmText:modalDefault.confirmText}}</view>
    </view>
  </view>
</view>

2.2 組件構造器(js)

　　使用modal對象去承接彈出框相關配置，modalDefault對象配置默認數據信息，按鈕點擊事件觸發返回事件success

Component({
  /**
   * 組件的屬性列表
   *  show: false,//modal是否顯示，默認false
      height: '',//modal顯示內容高度，默認為50%
      title: '',//modal標題，默認提示
      showCancel: false,//是否顯示取消按鈕，默認顯示
      cancelText: '取消',//取消按鈕標題，默認為取消
      cancelColor: '',//取消按鈕標題顏色，默認為#000000
      confirmText: '',//確定按鈕標題，默認為確定
      confirmColor: '',//確定按鈕標題顏色，默認為#3cc51f
      clickClose:true//點擊取消或確認按鈕后是否關閉modal,默認為true
   */
  properties: {
    modal: {
      type: Object,
      value: {
        show: false,
        height: '',
        title: '',
        showCancel: true,
        cancelText: '取消',
        cancelColor: '',
        confirmText: '',
        confirmColor: '',
        clickClose: true
      }
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    modalDefault: {
      show: false,
      height: '50%',
      title: '提示',
      showCancel: true,
      cancelText: '取消',
      cancelColor: '#000000',
      confirmText: '確定',
      confirmColor: '#3cc51f',
      clickClose: true
    }
  },

  /**
   * 組件的方法列表
   */
  methods: {
    /**
     * 取消按鈕事件
     */
    modalCancel() {
      this.modalShowChange();
      this.triggerEvent('success', {
        res: 'cancel'
      })
    },
    /**
     * 確定按鈕事件
     */
    modalConfirm() {
      this.modalShowChange();
      this.triggerEvent('success', {
        res: 'confirm'
      })
    },
    /**
     * 彈框顯示屬性更改
     */
    modalShowChange: function() {
      let clickClose = this.data.modalDefault.clickClose;
      if (this.data.modal && this.data.modal.clickClose != undefined) {
        if (this.data.modal.clickClose == false) {
          clickClose = false
        }
      }
      if (clickClose) {
        let objModal = {
          show: false
        }
        this.setData({
          modal: objModal
        })
      }
    }
  }
})

2.3 組件配置(json)

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

2.4 組件樣式(wxss)

.modal-wrapp{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.4);
  z-index: 9999;
}
.modal-main{
  width: 80%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.modal-title{
  font-size: 60rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.modal-content{
  flex: 1;
  width: 100%;
  overflow: hidden;
}
.modal-content-scroll{
  margin-left: 32rpx;
  margin-right: 32rpx;
}
.modal-button{
  font-size: 48rpx;
  width: 100%;
   height: 100rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  border-top: 2rpx solid rgba(7,17,27,0.1);

}
.modal-cancel, .modal-confirm{
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.modal-cancel{
  border-right: 2rpx solid rgba(7,17,27,0.1);
}

2.5 頁面使用(json)

　　自定義組件是在與pages同一目錄下的components文件夾中的modal中。

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

2.6 頁面使用(wxml)

　　使用 catchtouchmove="ture" 處理彈出對話框后下邊滾動條穿透問題

<view>
  <button class="buttonClass" type="primary" bindtap='showModal'>打開彈出框</button>
  <modal modal="{{modal}}" bindsuccess='modalOperate' catchtouchmove="ture">
    <view class='modal-content' wx:for="{{content}}">{{item.text}}</view>
  </modal>
</view>

2.7 頁面使用(js)

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    modal: {},
    content: [{
        text: '1.這是第一條數據信息，這是第一條數據信息，這是第一條數據信息，這是第一條數據信息。'
      },
      {
        text: '2.這是第二條數據信息，這是第二條數據信息，這是第二條數據信息，這是第二條數據信息，這是第二條數據信息，這是第二條數據信息，這是第二條數據信息。'
      }
    ]
  },
  showModal: function() {
    let objModal = {
      show: true,
      title: '這是一個modal',
      showCancel: false,
      height: '70%',
      confirmText: '我知道了'
    }
    this.setData({
      modal: objModal
    })
  },
  /**
   * 彈框按鈕操作事件
   * @res 取消/確定按鈕的相關信息
   */
  modalOperate: function(res) {
    if (res.detail.res == 'confirm') {
      console.log('confirm')
    } else if (res.detail.res == 'cancel') {
      console.log('cancel')
    }
  }
})

2.8 頁面使用(wxss)

.modal-content{
  margin-left: 32rpx;
  margin-right: 32rpx;
}
.buttonClass{
  height: 100rpx
}