微信小程序自定义组件的showModel的封装
大家可能疑惑了，微信小程序有自己的showMode，而且API十分的完善，为啥还要自己封装呢？难道自带的有bug？小编会告诉你No。因为微信小程序自带的showModel是固定的，只能用显示文字，如果你想显示表单，并且用户可以输入，那么微信小程序自带的就不能使用了吧，一般就是再写个输入界面，那多麻烦啊，还不如自己封装一个showMode的组件呢。下面小编给大家看下小编怎么做的。仅供参考哈。
首先是wxml：
<view class='mask' wx:if='{{show}}'>
<view class='modal-content'>
<view class="title">{{title}}</view>
<slot></slot>
<view class='modal-btn-wrapper'>
<view class='cancel-btn' bindtap='cancel' wx:if="{{showCancel}}" style="color:{{cancelColor}}">{{cancelText}}</view>
<view class='confirm-btn' bindtap='confirm' style="color:{{confirmColor}}">{{confirmText}}</view>
</view>
</view>
</view>样式wxss：
.mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9999;
}
.modal-content {
display: flex;
flex-direction: column;
width: 85%;
padding: 10rpx;
background-color: #fff;
border-radius: 15rpx;
}
.title {
font-size: 40rpx;
text-align: center;
padding: 15rpx;
}
.modal-btn-wrapper {
display: flex;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
border-top: 2rpx solid rgba(7, 17, 27, 0.1);
}
.cancel-btn, .confirm-btn {
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
}
.cancel-btn {
border-right: 2rpx solid rgba(7, 17, 27, 0.1);
}
.main-content {
flex: 1;
height: 100%;
overflow-y: hidden;
}
然后是js
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
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: '#576B95'
},
//是否显示modal
show: {
type: Boolean,
value: false
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 取消函数
cancel() {
this.setData({
show: false
})
this.triggerEvent('cancel')
},
// 确认函数
confirm() {
this.setData({
show: false
})
this.triggerEvent('confirm')
}
}
})最后搞定：
