说明：微信小程序中存在自定义的弹窗，这时候并不能满足我们的业务需求，我们需要重新自定弹窗组件dialog
1.效果图展示
2.开发参数说明
- 传递参数
title：头部提示文字
content：内容文字
contentWeight：字体粗细
contentSize：内容字体大小
contentColor：内容字体颜色
showCancel：是否展示取消按钮
cancelText：取消按钮的文字
cancelColor：取消字体颜色
confirmText：确认按钮文字
confirmColor：确认按钮颜色
- 调用方式
组件需要导入
.json
页面写入组件.wxml
.js中调用
3.组件中的 .wxml
<cover-view class='mask' wx:if='{{show}}' catchtouchmove='touchMove' bindtap="maskClose">
<cover-view class='modal-content'>
<cover-view class="title">{{title}}</cover-view>
<cover-view wx:if="{{content}}" class="content" style="color:{{contentColor}};font-weight:{{contentWeight}};font-size:{{contentSize}};">{{content}}</cover-view>
<block wx:if="{{!content}}">
<slot />
</block>
<cover-view class="modal-btn-wrapper {{!showCancel?'modal-btn-center':''}}">
<cover-view class="cancel-btn common-btn" bindtap="cancel" wx:if="{{showCancel}}" style="color:{{cancelColor}}">{{cancelText}}</cover-view>
<cover-view class="confirm-btn common-btn" bindtap="confirm" style="color:{{confirmColor}}">{{confirmText}}</cover-view>
</cover-view>
</cover-view>
</cover-view>
说明：传入参数通过内联样式展示出来，判断逻辑如果传入的content内容那么不会允许slot绑定传入元素。
4.组件中 .js
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
value: '温馨提示'
},
content: {
type: String,
value: ''
},
// 内容字体
contentWeight:{
type: String,
value: '400'
},
//是否显示取消按钮
showCancel: {
type: Boolean,
value: true
},
//取消按钮文字
cancelText: {
type: String,
value: '取消'
},
contentSize:{
type: String,
value: '24rpx'
},
// 内容字体颜色
contentColor:{
type: String,
value: '#666666'
},
//取消按钮颜色
cancelColor: {
type: String,
value: '#000000'
},
//确定按钮的文字
confirmText: {
type: String,
value: '确定'
},
//确定按钮的颜色
confirmColor: {
type: String,
value: '#C11920'
},
//是否显示modal
show: {
type: Boolean,
value: false
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 点击蒙版关闭弹窗
maskClose() {
this.setData({
show: false
})
},
// 取消函数
cancel() {
this.setData({
show: false
})
var res = {};
res["confirm"] = false;
this.data.success && this.data.success(res);
},
// 确认函数
confirm() {
this.setData({
show: false
})
var res = {};
res["confirm"] = true;
this.data.success && this.data.success(res);
},
showModal({
title,
contentColor, // 内容模块颜色
content, // 文字内容
contentSize, // 文字大小
contentWeight, // 内容字体宽度
showCancel, //是否显示取消按钮
cancelText, //取消按钮文本
cancelColor, //取消按钮颜色
confirmText, //确定按钮文本
confirmColor, //确定按钮颜色
success
}) {
if(contentSize){
this.setData({
contentSize:contentSize
})
}
if(contentColor){
this.setData({
contentColor:contentColor
})
}
if(contentWeight){
this.setData({
contentWeight:contentWeight
})
}
if (title) {
this.setData({
title: title
})
}
if (content) {
this.setData({
content: content
})
}
if (showCancel == null) {
this.setData({
showCancel: true
})
} else {
this.setData({
showCancel: showCancel
})
}
if (cancelText) {
this.setData({
cancelText: cancelText
})
}
if (cancelColor) {
this.setData({
cancelColor: cancelColor
})
}
if (confirmText) {
this.setData({
confirmText: confirmText
})
}
if (confirmColor) {
this.setData({
confirmColor: confirmColor
})
}
this.data.success = success;
this.setData({
show: true
});
},
touchMove() {
// 阻止滑动底层
}
}
})
5.组件中的 .json
{
"component": true,
"usingComponents": {}
}
6.组件中的 .wxss
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
overflow: hidden;
}
.icon{
width: 50rpx;
height: 50rpx;
text-align: center;
margin: 45rpx auto 0;
}
.modal-content {
box-sizing: border-box;
display: flex;
flex-direction: column;
margin:300rpx 74rpx 0 74rpx;
background-color: #fff;
border-radius: 16rpx;
}
.title {
font-size: 32rpx;
font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC;
color: #333333;
line-height: 45rpx;
text-align: center;
padding-top: 56rpx;
}
.content {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 33rpx;
text-align: center;
padding: 24rpx 0 46rpx 0;
}
.modal-btn-wrapper{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
margin:0 40rpx 40rpx 40rpx;
}
.modal-btn-center{
justify-content: center;
}
.modal-btn-wrapper .common-btn{
width: 248rpx;
height: 72rpx;
border-radius: 8rpx;
text-align: center;
line-height: 72rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.modal-btn-wrapper .cancel-btn{
background: #FFFFFF;
border: 1rpx solid #CCCCCC;
color: #666666;
}
.modal-btn-wrapper .confirm-btn{
border: 1rpx solid #C11920;
color: #C11920;
}
7.页面调用案例
-
index.json中引入{ "usingComponents": { "dialog": "/components/dialog/dialog" } } -
index.wxss中使用<dialog id="dialog"></dialog> -
index.js中使用showNoCancel(){ var dialog = this.selectComponent('#dialog'); dialog.showModal({ title: '温馨提示', confirmText: "关闭", content:'这是我的提示内容', confirmColor: "#C11920", showCancel: false, success: res => { if (res.confirm) { console.log('点击了确认') } else { console.log('点击了取消') } } }); }, showDialog(){ var dialog = this.selectComponent('#dialog'); dialog.showModal({ title: '温馨提示', confirmText: "确认", content:"请选择你的效果", contentSize: "24rpx", contentWeight:"bold", cancelText: "取消", confirmColor: "#C11920", success: res => { if (res.confirm) { console.log('点击了确认') } else { console.log('点击了取消') } } }); }
