微信小程序弹框(组件)

由于微信小程序没有引入ui库，有弹框样式写起来比较麻烦，所以自己封装了一个弹框组件
wxml

<view wx:if="{{show}}">
  <view class='mask_layer' bindtap='modal_click_Hidden' />
  <view class='modal_box'>
    <!-- <view class="title">title</view> -->
    <view class='content'>
      <!-- <text class='modalMsg'></text> -->
      <slot></slot>
      <!-- <textarea class='input_show1' bindinput='changeCancelReason' auto-height value='{{modalMsg}}' bindfocus='bindfocus' bindblur='bindblur' placeholder='{{modalMsg_placeholder}}'></textarea> -->
    </view>
    <!-- <view class='btn1'>
      <view bindtap='modal_click_Hidden' class='cancel'>取消</view>
      <view bindtap='Sure' class='Sure'>确定</view>
    </view> -->
    <image class="closeRule" wx:if="{{showCloseBtn}}" bindtap="closeRule" data-type="help" src="https://bm-mini-program.oss-cn-hangzhou.aliyuncs.com/static/christmas/close.png"></image>
  </view>
</view>

js

// pages/BlankMEactivity/pages/component/van-poup/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
    },
    showCloseBtn:{
      type:Boolean
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    showCloseBtn:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    closeRule(){
      this.triggerEvent('closeRule')
    }
  }
})

json

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

wxss

.mask_layer {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}

.modal_box {
  max-height: 100%;
  overflow-y: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  /* background: #fafafa; */
  padding: 30rpx 50rpx;
  border-radius: 3px;
}

.title {
  padding: 15px;
  text-align: center;
  background-color: gazure;
}

.content {
  padding-bottom: 70px;
  /* overflow-y: scroll; */
  /*超出父盒子高度可滚动*/
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

.input_show1 {
  margin: 0 auto;
  width: 80%;
  margin-left: 10%;
  font-size: 32rpx;
  text-align: center;
}

.btn1 {
  width: 100%;
  margin-top: 65rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: white;
}

.cancel {
  width: 100%;
  padding: 10px;
  text-align: center;
  color: black;
}

.Sure {
  width: 100%;
  padding: 10px;
  color: #44b549;
  background-color: white;
  border-left: 1px solid #d0d0d0;
  text-align: center;
}

.modalMsg {
  text-align: center;
  margin-top: 45rpx;
  display: block;
}

.closeRule {
  width: 56rpx;
  height: 56rpx;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}