微信小程序-自定义弹窗

1. 如何调用？ 

<modal showPopup="{{true}}">
    <view slot="content">
      <image class="page_logo" src='/image/hbgg0526.png' mode="widthFix" style="width: 100%;"></image>
    </view>
</modal>

​​​​​​​2. 组件封装

<!--components/modal/modal.wxml-->
<!-- 弹窗组件-start -->
<view class="popup-container" catchtouchmove="{{true}}" wx:if="{{showPopup}}">
    <!-- 背景遮罩层 -->
    <view class="popup-mask" catch:tap="hidePopup"></view>
    <!-- 弹窗内容 -->
    <view class="popup-content">
      <view class="popup-top-box">
        <slot name="title"></slot>
      </view>
      <view class="tag-box">
        <slot name="content"></slot>
      </view>
    </view>
  </view>
  <!-- 弹窗组件-end -->

Component({
  /**
   * 组件的属性列表 //传过来的参数
   */
  properties: {
    showPopup:{ 
      type:Boolean,
    }
  },
  data: {
    localArray:["西安","重庆","北京市","西安","重庆","北京", ],
    // showPopup: true,
  },
  options: {
    multipleSlots: true // 复数插槽: 是
  },
  methods: {
    showPopup() { // 显示弹窗
      this.setData({ showPopup: true});
    },
    hidePopup() { // 隐藏弹窗
      this.setData({showPopup: false});
    },
  }
})

/* 弹窗样式 */
  .popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .popup-content {
    position: relative;
    width: 85%;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
    margin-top: -200rpx;
  }
  .popup-top-box{
       padding:6rpx 20rpx;
       display: flex;
       justify-content:space-between;
       border-bottom: 2rpx solid #f5f5f5;
}