1.引言
微信小程序中经常需要用到弹出框，而showModal是官方提供的弹窗提示框组件。但是官方提供的一些参数和样式有限，我们有时候需要根据自己程序的需求去自定义弹出框。本文将分享如何自定义showModal弹出框，并提供代码实现。
2.showModal组件介绍
showModal是微信小程序官方提供的弹窗提示框组件，可以通过调用API wx.showModal(options)来展示。其中，options是一个Object类型的参数，包括以下几个属性：
wx.showModal({
title: '提示', //弹窗标题
content: '这是一个弹窗', //弹窗内容
showCancel: true, //是否显示取消按钮
cancelText: '取消', //取消按钮的文字，默认是'取消'
cancelColor: '#000000', //取消按钮的文字颜色，默认是黑色
confirmText: '确定', //确定按钮的文字，默认是'确定'
confirmColor: '#3CC51F', //确定按钮的文字颜色，默认是绿色
success: function (res) {
//点击确定或者取消后触发的回调函数
if (res.confirm) {
console.log('用户点击确定')
} else {
console.log('用户点击取消')
}
}
})
3.自定义showModal组件
3.1 隐藏微信官方的showModal
自定义弹出框之前，我们需要先将微信官方的showModal组件隐藏，方法是在app.json文件中加入以下配置：
{
"window": {
"usingComponents": {}
}
}
这样在所有页面中就不能直接调用showModal组件了，而需要自己去实现一个。
3.2 自定义showModal
我们先定义一个自己的modal组件，其中包含一个半透明的背景遮罩和一个弹出框。如下所示：
<view class="modal-mask"></view>
<view class="modal">
<view class="modal-title">{{title}}</view>
<view class="modal-content">{{content}}</view>
<view class="modal-buttons">
<view class="modal-button">{{cancelText}}</view>
<view class="modal-button">{{confirmText}}</view>
</view>
</view>
这里使用了一个view标签和四个class，分别是modal-mask、modal、modal-title、modal-content和modal-buttons。其中modal-mask表示半透明的背景遮罩；modal表示弹出框的整体区域；modal-title表示弹框的标题；modal-content表示弹出框的内容；modal-button表示按钮。通过样式可以控制这些元素的位置、大小和颜色等属性。
然后我们在js文件中定义这几个属性：
properties: {
//弹框的标题
title: {
type: String,
value: '',
},
//弹框的内容
content: {
type: String,
value: '',
},
//是否显示取消按钮
showCancel: {
type: Boolean,
value: true,
},
//取消按钮的文字
cancelText: {
type: String,
value: '取消',
},
//取消按钮的文字颜色
cancelColor: {
type: String,
value: '#000000',
},
//确定按钮的文字
confirmText: {
type: String,
value: '确定',
},
//确定按钮的文字颜色
confirmColor: {
type: String,
value: '#3CC51F',
},
},
这里定义了6个属性，分别是title、content、showCancel、cancelText、cancelColor和confirmColor，分别对应弹出框的标题、内容、是否显示取消按钮、取消按钮的文字、取消按钮的文字颜色和确定按钮的文字颜色。
然后，在js文件中定义一个方法，用于显示和隐藏弹出框：
methods: {
//显示弹框
showModal() {
this.setData({
showModal: true
})
},
//隐藏弹框
hideModal() {
this.setData({
showModal: false
})
},
},
这里使用了setData函数来更新showModal属性的值，从而使弹出框显示或隐藏。
最后，我们在wxml文件中将这个弹出框引入并调用：
<my-modal id="myModal" title="{{title}}" content="{{content}}"
showCancel="{{showCancel}}" cancelText="{{cancelText}}"
confirmText="{{confirmText}}" cancelColor="{{cancelColor}}"
confirmColor="{{confirmColor}}"></my-modal>
这里我们使用了自定义组件的方式，将该弹出框引入到页面中，并将属性传递给该组件。
4.示例代码
完整的自定义showModal代码如下：
4.1 WXML代码
<!--自定义弹框-->
<custom-modal id="customModal" title="{{modalTitle}}" content="{{modalContent}}"
showCancel="{{showCancel}}" confirmText="{{confirmText}}"
confirmColor="{{confirmColor}}"></custom-modal>
<!--元素区域-->
<view class='page-body'>
<button class='btn' bindtap="showModal">显示弹框</button>
</view>
4.2 JS代码
Component({
properties: {
//弹框的标题
title: {
type: String,
value: '',
},
//弹框的内容
content: {
type: String,
value: '',
},
//是否显示取消按钮
showCancel: {
type: Boolean,
value: true,
},
//取消按钮的文字
cancelText: {
type: String,
value: '取消',
},
//取消按钮的文字颜色
cancelColor: {
type: String,
value: '#000000',
},
//确定按钮的文字
confirmText: {
type: String,
value: '确定',
},
//确定按钮的文字颜色
confirmColor: {
type: String,
value: '#3CC51F',
},
},
data: {
showModal: false,
},
methods: {
//显示弹框
showModal() {
this.setData({
showModal: true
})
},
//隐藏弹框
hideModal() {
this.setData({
showModal: false
})
},
//确定按钮被点击
clickConfirm() {
this.triggerEvent("confirm");
this.hideModal();
},
//取消按钮被点击
clickCancel() {
this.triggerEvent("cancel");
this.hideModal();
}
}
})
5.总结
通过自定义showModal，我们可以让弹出框更符合我们的需求。在使用过程中需要注意，自定义弹出框只是替换了微信官方的弹出框组件，没有修改官方的弹出框效果。因此，只能实现showModal的基本功能，如需更加复杂的动画效果，需要使用其他方法实现。