评论

怎么在api中调用自定义组件showModal,让自定义组件想wx.showModal一样使用

让自定义组件想wx.showModal一样使用

 环境:我们为什么要在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中调用

最后一次编辑于  2020-03-30  
点赞 1
收藏
评论

5 个评论

  • 。
    2020-09-07

    可以在公众号里使用吗

    2020-09-07
    赞同
    回复 1
    • Don't give up
      Don't give up
      2020-12-01
      没试过 都差不多的
      2020-12-01
      回复
  • 小肥羊🐏
    小肥羊🐏
    2020-03-31
    来个代码片段就完满了
    2020-03-31
    赞同
    回复 1
  • Don't give up
    Don't give up
    2020-03-30

    那么现在就可以改自定义组件的样式和功能,实现自己想实现的方式了,比如点击蒙版隐藏弹窗显示

    2020-03-30
    赞同
    回复
  • Don't give up
    Don't give up
    2020-03-30

    效果:

    点击导入后:成功跳转到自定义组件的success方法

    那么我们就可以在这些自己的逻辑了

    2020-03-30
    赞同
    回复
  • Admin²⁰²¹
    Admin²⁰²¹
    2020-03-30

    能补充上成品后的效果图,可能更好

    2020-03-30
    赞同
    回复 3
    • Don't give up
      Don't give up
      2020-03-30
      好的
      2020-03-30
      回复
    • Don't give up
      Don't give up
      2020-03-30
      加上效果了
      2020-03-30
      回复
    • 曹家贰少
      曹家贰少
      2020-06-01回复Don't give up
      这个效果跟原生效果差了全屏显示
      2020-06-01
      回复
登录 后发表内容