环境：我们为什么要在api中调用自定义组件的原因我就不说了，用得到的开发者自然用得到！
现在百度上有很多人都写了自定义组件showModal，但是有一个很致命的缺陷，不能像微信小程序的api那样使用（wx.showModal）。
话不多说上代码
css：
.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;
}
wxml：
<view class='mask' wx:if='{{show}}'>
<view class='modal-content'>
<view class="title">{{title}}</view>
<view>{{content}}</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>
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: '#FECC34'
},
//是否显示modal
show: {
type: Boolean,
value: false
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 取消函数
cancel() {
this.setData({
show: false
})
var res = {};
res["confirm"] = true;
this.data.success && this.data.success(res);
},
// 确认函数
confirm() {
this.setData({
show: false
})
var res = {};
res["confirm"] = false;
this.data.success && this.data.success(res);
},
showModal({
title,
content,
showCancel, //是否显示取消按钮
cancelText, //取消按钮文本
cancelColor, //取消按钮颜色
confirmText, //确定按钮文本
confirmColor, //确定按钮颜色
success
}) {
this.setData({
show: true
});
if (title) {
this.setData({
title: title
})
}
if (content) {
this.setData({
content: content
})
}
if (showCancel) {
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;
}
}
})
以上是自定义组件的封装，因为CSS和html是随便百度复制的，太简单就不想改了，你们自己把样式改一下就OK
使用方法：
var toast = that.selectComponent('#toast');
toast.showModal({
title: '温馨提示',
content: '是否导入最近一次刷题记录？',
showCancel: true,
confirmText: "导入",
confirmColor: "#FECC34",
success: function(result) {
console.log(result)
}
});
如果想自己的这个自定义组件在自己的挨批中使用就把对应页面的this传递到对应的api方法中去，然后在api中调用
可以在公众号里使用吗
那么现在就可以改自定义组件的样式和功能，实现自己想实现的方式了，比如点击蒙版隐藏弹窗显示
效果：
点击导入后：成功跳转到自定义组件的success方法
那么我们就可以在这些自己的逻辑了
能补充上成品后的效果图，可能更好