1、wxml

<!--pages/components/confirmBox/confirmBox.wxml-->
<wxs src="../../../filter/urlFilter.wxs" module="filter" />
<view class="confirmBox_warp" style="{{opt.wrapStyle}}" wx:if="{{isShow}}"><view class="count" style="width:{{opt.widths?opt.widths:'600'}}rpx"><view style="" class="paddClass {{opt.showCancel || opt.showConfirm? 'paddingNo': ''}}"><!-- 关闭按钮 --><view class="confirm_close_cont" bindtap="closeConfirm" wx:if="{{!opt.close}}"><image  class="confirm_close" mode="widthFix" bindtap="hide" src="{{filter.imgFullPath('/images/icon-close.png')}}"></image></view><!-- header --><view class="headers" style="{{opt.headerStyle}}" wx:if="{{opt.header}}">{{opt.header}}</view><view class="body"><slot name="top"></slot><slot name="center"></slot><slot name="bottom"></slot></view></view><view class="footer" style="{{opt.footerStyle}}" wx:if="{{opt.showCancel || opt.showConfirm}}"><view class="li" wx:if="{{opt.showCancel && !opt.showCancelContact}}" bindtap="cancelCb" style="{{opt.cancelStyle}}">{{opt.cancelText}}</view><view class="li" wx:if="{{opt.showCancelContact}}"  style="{{opt.cancelStyle}}"><button class="contactBtn" open-type="contact">{{opt.cancelText}}</button></view><view class="li" wx:if="{{opt.showConfirm && !opt.showConfirmContact}}" bindtap="confirmCb" style="{{opt.confirmStyle}}">{{opt.confirmText}}</view><view class="li" wx:if="{{opt.showConfirmContact}}"  style="{{opt.confirmStyle}}"><button class="contactBtn" open-type="contact">{{opt.confirmText}}</button></view></view></view>
</view>

2、js

// pages/components/confirmBox/confirmBox.js
Component({options: {multipleSlots: true // 允许使用插槽},/*** 组件的属性列表*/properties: {isShow:{type:Boolean,value:false},opt:{type:Object,value:{wrapStyle: '',widths:'',close:false, //默认显示关闭按钮header:'',showCancel: false,showCancelContact: false,showConfirmContact: false, showConfirm: false,cancelText: '取消',confirmText: '确定',confirmStyle: '',cancelStyle: ''},observer:function(newVal,oldVal){this.data.opt = {...oldVal,...newVal}this.setData({opt:this.data.opt})}}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {closeConfirm:function (){this.setData({isShow:false})},cancelCb: function(){this.triggerEvent('cancelCb');},confirmCb:function(){this.triggerEvent('confirmCb');}}
})

3、wxss

/* pages/components/confirmBox/confirmBox.wxss */
.confirmBox_warp{position: fixed;top: 0rpx;left: 0rpx;height: 100%;width: 100%;background-color: rgba(0, 0, 0, 0.3);z-index: 11111111111199;
}
.confirmBox_warp .count{width: 600rpx;position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);background-color: #ffffff;border-radius: 16rpx;}
.confirmBox_warp .count .paddClass{padding: 60rpx 40rpx;
}
.confirmBox_warp .count .paddingNo {padding-bottom: 0;
}
.confirmBox_warp .count .confirm_close_cont{padding: 20rpx;position: absolute;top: 0rpx;right: 0rpx;
}
.confirmBox_warp .count .confirm_close{width: 21rpx;height: 21rpx;
}
.confirmBox_warp .count .headers{text-align: center;color: #333333;font-size: 32rpx;line-height: 44rpx;
}
.confirmBox_warp .footer {display: flex;justify-content: space-between;height: 100rpx;border-top: 0.5px solid #E3E3E3;margin-top: 20rpx;/* margin-bottom: 10rpx; */
}
.confirmBox_warp .footer .li {flex: 1;border-right: 0.5px solid #E3E3E3;text-align: center;line-height: 100rpx;color: #333333;font-size: 32rpx;
}
.confirmBox_warp .footer .li .contactBtn{background-color: #ffffff;text-align: center;line-height: 80rpx;padding: 0rpx;/* color: #FE4561; */font-size: 32rpx;font-weight: normal;    width: 100%;
}
.confirmBox_warp .footer .li:last-child {border: none;
}

4、json

{"component": true,"usingComponents": {}
}

5、效果展示（具体内容可以自定义）

可以参考--文章：微信小程序获取定位、通过地点文本获取经纬度进行导航

微信小程序自定义弹框组件相关推荐

微信小程序自定义弹框+生成二维码功能
最近在做小程序的功能,需求是弹框生成二维码功能,所以根据需求自定义了一个弹框组件,后续其他地方也可以用到. 最后效果图如下 dialog部分 <!--components/dialog/dial ...
微信小程序日历弹框组件
参考文章:https://blogai.cn/posts/46 calendar.json {"usingComponents": {},"disableScroll&q ...
微信小程序自定义模态框，官方版本与自定义可扩展版本
微信小程序自定义模态框,官方版本与自定义可扩展版本提示:文章最后有源码,可自取文章主要通过模仿官方的模态框进行自定义模态框的设计,我将会先讲述原理,然后给出源码,最后指出一些需要注意的地方提示: ...
微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义提示框制作的简单方法
微信小程序自定义提示框制作的简单方法下面的时候提示框的结构 wxml部分  <view class="showToast" wx:if= ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...

微信小程序自定义弹框组件

1、wxml

2、js

3、wxss

4、json

5、效果展示（具体内容可以自定义）

微信小程序自定义弹框组件相关推荐

最新文章

热门文章

微信小程序 自定义弹框组件

1、wxml

2、js

3、wxss

4、json

5、效果展示（具体内容可以自定义）

微信小程序 自定义弹框组件相关推荐

最新文章

热门文章

微信小程序自定义弹框组件

微信小程序自定义弹框组件相关推荐