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

话不多说直接上代码

目录

1、wxml

2、js

3、wxss

4、json

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

---

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、效果展示（具体内容可以自定义）

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