小程序?qū)崙?zhàn)(十五)-自定義彈框組件

發(fā)表時(shí)間：2021-1-4

發(fā)布人：葵宇科技

瀏覽次數(shù)：65

一、需求說明

目前項(xiàng)目中的彈框用的都是 wx.showModal()，有以下幾點(diǎn)改造需求：

調(diào)用彈框的方式盡量與 showModal 保持一致，避免過大改動(dòng)
目前項(xiàng)目中彈框分為兩類，二次確認(rèn)框和成功提示框，希望能簡(jiǎn)單地調(diào)用這兩種彈框

二、需求實(shí)現(xiàn)

2.1 實(shí)現(xiàn)思路

確定組件入?yún)?，為了減少改動(dòng)，參數(shù)名與 showModal 的參數(shù)名保持一致
打開彈框方式：為彈框組件定義一個(gè) showDialog 函數(shù)，函數(shù)接收一個(gè)參數(shù)對(duì)象，用于初始化，與 showModal 的調(diào)用方式保持一致

2.2 組件設(shè)計(jì)

dialog.wxml 文件：

<view wx:if="{{showDialog}}" class="page-container">
  <view class="mask"></view>
  <view class="dialog-container">
    <view class="content-container">
      <view class="title">{{title}}</view>
      <view class="content">{{content}}</view>
      <!-- 二次確認(rèn)框按鈕樣式 -->
      <view wx:if="{{type === 'confirm'}}" class="btn-container">
        <button class="btn cancel-btn" bindtap="handleCancel">{{cancelText}}</button>
        <button class="btn confirm-btn" bindtap="handleConfirm">{{confirmText}}</button>
      </view>
      <!-- 成功提示框按鈕樣式 -->
      <view wx:if="{{type === 'success'}}" class="btn-container">
        <button class="btn success-btn" bindtap="handleConfirm">{{confirmText}}</button>
      </view>
    </view>
  </view>
</view>
復(fù)制代碼

dialog.js 文件：

data: {
    // 初始化入?yún)?
    showDialog: false,
    title: '',
    content: '',
    type: '',
    confirmText: '',
    cancelText: '',
    success: null,
},
// 初始化并打開彈框方法
showDialog(params) {
  this.setData({
    title: params.title ? params.title : '提示',
    content: params.content ? params.content : '',
    type: params.type ? params.type : 'confirm',
    confirmText: params.confirmText ? params.confirmText : '確定',
    cancelText: params.cancelText ? params.cancelText : '取消',
    success: params.success ? params.success : null,
    // 打開彈框
    showDialog: true
  })
},

handleConfirm() {
  if (this.data.success && typeof this.data.success === 'function') {
  // 點(diǎn)擊確定，若傳入的 success 是函數(shù)，則執(zhí)行函數(shù)，并傳入?yún)?shù) {confirm: true}
    this.data.success({
      confirm: true
    })
  }
  // 若傳入的 success 不存在或不是函數(shù)，則只關(guān)閉彈框
  this.setData({
    showDialog: false
  })
},

handleCancel() {
  if (this.data.success && typeof this.data.success === 'function') {
  // 點(diǎn)擊取消，若傳入的 success 是函數(shù)，則執(zhí)行函數(shù)，并傳入?yún)?shù) {cancel: true}
    this.data.success({
      cancel: true
    })
  }
  // 若傳入的 success 不存在或不是函數(shù)，則只關(guān)閉彈框
  this.setData({
    showDialog: false
  })
}
復(fù)制代碼

2.3 組件調(diào)用

在頁(yè)面添加彈框組件： page.json 文件：

{
  "component": true,
  "usingComponents": {
    "dialog": "/components/dialog/dialog"
  }
}

復(fù)制代碼

page.wxml 文件：

<dialog></dialog>
復(fù)制代碼

在頁(yè)面的生命周期函數(shù)中獲取組件 dom： page.js 文件：

data: {
    dialog: null
},
onShow() {
    this.setData({
        dialog: this.selectComponent('#dialog')
    })
}
復(fù)制代碼

需要提示時(shí)打開彈框： page.js 文件：

// 二次確認(rèn)框配置
this.data.dialog.showDialog({
    title: '提示',
    content: '確定要打開彈框嗎？',
    success: res => {
        if (res.confirm) {
            console.log('確定打開彈框')
        } else if (res.cancel) {
            console.log('不打開彈框')
        }
    }
})
復(fù)制代碼

// 成功提示框配置
this.data.dialog.showDialog({
    title: '提示',
    content: '您已成功打開彈框',
    type: 'success',
    confirmText: '我知道啦',
    success: res => {
        if (res.confirm) {
            console.log('打開彈框')
        }
    }
})
復(fù)制代碼