小程序实战(十五)-自定义弹框组件
发表时间:2021-1-4
发布人:葵宇科技
浏览次数:54
一、需求说明
目前项目中的弹框用的都是 wx.showModal(),有以下几点改造需求:
- 调用弹框的方式尽量与 showModal 保持一致,避免过大改动
- 目前项目中弹框分为两类,二次确认框和成功提示框,希望能简单地调用这两种弹框
二、需求实现
2.1 实现思路
- 确定组件入参,为了减少改动,参数名与 showModal 的参数名保持一致
- 打开弹框方式:为弹框组件定义一个 showDialog 函数,函数接收一个参数对象,用于初始化,与 showModal 的调用方式保持一致
- 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('打开弹框')
}
}
})
复制代码