近期手上有个小程序项目，UI妹纸给的对话框效果图需要自定义，因为wx.showModal无法自定义内容，例如icon图标，字体大小之类的，只能自定义一个Modal组件。
下面是自定义组件的文件：
1. dialogModal.js
Component({
properties: {
// 模态框 显示/隐藏
modalHidden: {
type: Boolean,
value: false
}, //这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hidden，
showCancel: {
type: Boolean,
value: true
},
// 模态框title标题
modalTitle: {
type: String,
value: '',
},
// 模态框msg内容
modalMsg: {
type: String,
value: ''
},
// 模态框状态 1.‘’；2.‘success’；3.‘error’
modalType: {
type: String,
value: ''
}
},
methods: {
// 防止事件冒泡，阻止page滚动事件
moveD: () => { },
// modal取消点击事件
modal_cancel: function () {
// 隐藏模态框
this.setData({
modalHidden: true,
})
},
// modal确认点击事件
modal_confirm: function (e) {
this.modal_cancel();
var eventDetail = {} // detail对象，提供给事件监听函数
var eventOption = {} // 触发事件的选项
this.triggerEvent('handleConfirm');
}
}
})
2. dialogModal.json
{
"component": true,
"usingComponents": {}
}
3. dialogModal.wxml
<!--components/dialogModal/dialogModal.wxml-->
<view hidden='{{modalHidden}}' class="dialog-modal" catchtouchmove='moveD'>
<view class='mask_layer' />
<view class='modal_box'>
<image bindtap='modal_cancel' src="../../images/modal_close.png" class="modal-close"></image>
<view class='modal-body'>
<view>
<view class="modal-title">
<image src="../../images/error.png" wx:if="{{modalType == 'error'}}"></image>
<image src="../../images/success.png" wx:if="{{modalType == 'success'}}"></image>
<text>{{modalTitle}}</text>
</view>
<!-- modal状态为'success',只显示标题 -->
<view class="modal-content" wx:if="{{modalMsg}}">
<text>{{modalMsg}}</text>
</view>
</view>
</view>
<view class='modal-btn'>
<text wx:if="{{showCancel}}" bindtap='modal_cancel' class='modal-cancel'>取消</text>
<text bindtap='modal_confirm' class='modal-confirm'>确定</text>
</view>
</view>
</view>
4. dialogModal.wxss
/* components/dialogModal/dialogModal.wxss */
.dialog-modal {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.mask_layer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: #000;
opacity: 0.5;
overflow: hidden;
}
.modal_box {
position: relative;
width: 91.4%;
overflow: hidden;
z-index: 1001;
background: #fff;
border-radius: 3px;
}
.modal-close {
position: absolute;
right: 16rpx;
top: 16rpx;
width: 20rpx;
height: 20rpx;
}
.modal-body {
text-align: center;
/* margin: 30rpx 0; */
display: flex;
overflow-y: scroll; /*超出父盒子高度可滚动*/
min-height: 228rpx;
justify-content: center;
align-items: center;
padding: 20rpx;
}
.modal-body image {
width: 44rpx;
/* vertical-align:-6rpx; */
height: 44rpx;
margin-right: 15rpx;
}
.modal-title {
padding: 20rpx 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: gazure;
font-size: 32rpx;
color: #484848;
letter-spacing: 0.36px;
}
.modal-content {
padding: 20rpx 0;
font-size: 28rpx;
color: #484848;
letter-spacing: 0.31px;
}
.modal-btn {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
background-color: #fff;
}
.modal-cancel {
width: 100%;
padding: 40rpx;
text-align: center;
border-top: 1rpx solid #f3f3f3;
border-right: 1rpx solid #f3f3f3;
font-size: 28rpx;
color: #fd5612;
letter-spacing: 0.31px;
}
.modal-confirm {
width: 100%;
padding: 40rpx;
background-color: #fff;
text-align: center;
border-top: 1rpx solid #f3f3f3;
font-size: 28rpx;
color: #fd5612;
letter-spacing: 0.31px;
}
.modal-msg {
text-align: center;
margin-bottom: 50rpx;
display: block;
}
接下来就是在我们的index页面里使用自定义的Modal组件：
1. index.json
{
"usingComponents": {
"modal": "../../components/dialogModal/dialogModal"
}
}
2. index.wxml
<!--index.wxml-->
<view class="container">
<modal bind:handleConfirm="modalConfirmCallBack" modal-hidden="{{modal.hidden}}" modal-title="{{modal.title}}" modal-msg="{{modal.msg}}" modal-type="{{modal.type}}" data-params="{{modal.params}}"></modal>
<button bindtap='handleDefaultClick'>default</button>
<button bindtap='handleSuccessClick'>success</button>
<button bindtap='handleErrorClick'>error</button>
</view>
3. index.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
modal: {
hidden: true,
title: '',
msg: '',
type: '',
params: {}
}
},
handleDefaultClick: function () {
this.setData({
'modal.hidden': false,
'modal.title': 'default标题',
'modal.msg': 'default内容',
'modal.type': '',
'modal.params': {
type: 'default'
}
})
},
handleSuccessClick: function () {
this.setData({
'modal.hidden': false,
'modal.title': 'success标题',
'modal.msg': 'success内容',
'modal.type': 'success',
'modal.params': {
type: 'success'
}
})
},
handleErrorClick: function () {
this.setData({
'modal.hidden': false,
'modal.title': 'error标题',
'modal.msg': 'error内容',
'modal.type': 'error',
'modal.params': {
type: 'error'
}
})
},
modalConfirmCallBack: function (e) {
const params = e.target.dataset.params;
console.log(params);
}
})
4. index.wxss
/**index.wxss**/
.container button {
margin-top: 20rpx;
}
modal {
z-index: 1024;
}
具体代码在： mrabit/wx_app_component
参考地址：
