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

一、需求说明

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

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

二、需求实现

2.1 实现思路

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

2.2 组件设计

1. 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>

2. 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 组件调用

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

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

page.wxml 文件：

<dialog></dialog>

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

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

3. 需要提示时打开弹框： 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('打开弹框')
        }
    }
})

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。

目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~