小程序实战(十五)-自定义弹框组件

发表时间：2021-1-4

发布人：葵宇科技

浏览次数：43

一、需求说明

目前项目中的弹框用的都是 wx.showModal()，有以下几点改造需求：

调用弹框的方式尽量与 showModal 保持一致，避免过大改动
目前项目中弹框分为两类，二次确认框和成功提示框，希望能简单地调用这两种弹框

二、需求实现

2.1 实现思路

确定组件入参，为了减少改动，参数名与 showModal 的参数名保持一致
打开弹框方式：为弹框组件定义一个 showDialog 函数，函数接收一个参数对象，用于初始化，与 showModal 的调用方式保持一致

2.2 组件设计

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>
      <!-- 二次确认框按钮样式 -->
      <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>
复制代码

dialog.js 文件：

data: {
    // 初始化入参
    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') {
  // 点击确定，若传入的 success 是函数，则执行函数，并传入参数 {confirm: true}
    this.data.success({
      confirm: true
    })
  }
  // 若传入的 success 不存在或不是函数，则只关闭弹框
  this.setData({
    showDialog: false
  })
},

handleCancel() {
  if (this.data.success && typeof this.data.success === 'function') {
  // 点击取消，若传入的 success 是函数，则执行函数，并传入参数 {cancel: true}
    this.data.success({
      cancel: true
    })
  }
  // 若传入的 success 不存在或不是函数，则只关闭弹框
  this.setData({
    showDialog: false
  })
}
复制代码

2.3 组件调用

在页面添加弹框组件： page.json 文件：

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

复制代码

page.wxml 文件：

<dialog></dialog>
复制代码

在页面的生命周期函数中获取组件 dom： page.js 文件：

data: {
    dialog: null
},
onShow() {
    this.setData({
        dialog: this.selectComponent('#dialog')
    })
}
复制代码

需要提示时打开弹框： page.js 文件：

// 二次确认框配置
this.data.dialog.showDialog({
    title: '提示',
    content: '确定要打开弹框吗？',
    success: res => {
        if (res.confirm) {
            console.log('确定打开弹框')
        } else if (res.cancel) {
            console.log('不打开弹框')
        }
    }
})
复制代码

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