小程序原生弹窗组件

小程序原生弹窗组件

JS代码 wly-popup.js

// Popup 组件的 JavaScript 代码
Component({
  properties: {
    showPopup: {
      type: Boolean,
      value: false,
      // 是否显示弹窗
      // 默认值：false
    },
    closeable: {
      type: Boolean,
      value: true,
      // 是否可以关闭弹窗
      // 默认值：true
    },
    closeEvent: {
      type: Function,
      value: null,
      // 关闭弹窗时触发的事件
      // 默认值：null
    },
    closeOnOverlayClick: {
      type: Boolean,
      value: true,
      // 是否在点击遮罩层时关闭弹窗
      // 默认值：true
    },
    contentBackgroundColor: {
      type: String,
      value: 'transparent',
      // 弹窗内容区域的背景颜色
      // 默认值：透明
    },
    overlayZIndex: {
      type: Number,
      value: 99,
      // 遮罩层的层级
      // 默认值：99
    }
  },
  methods: {
    closePopup() {
      if (this.data.closeable && this.data.closeEvent) {
        this.data.closeEvent();
      }
      if (this.data.closeOnOverlayClick) {
        this.setData({
          showPopup: false
        });
      }
    },
    preventClose() {
      // 阻止点击内容区域时关闭弹窗
    }
  }
});

标签 代码 wly-popup.wxml

<!-- Popup 组件的 HTML 代码 -->
<view class="popup-container {{showPopup ? 'show' : ''}}">
  <view class="popup-overlay" style="z-index:{{overlayZIndex}};" bindtap="closePopup"></view>
  <view class="popup-content {{closeable ? 'closeable' : ''}}"
    style="background-color: {{contentBackgroundColor}}; z-index: {{overlayZIndex+1}};" bindtap="preventClose"
    catchtap="preventClose">
    <slot></slot>
  </view>
</view>

css 代码 wly-popup.wxss

/* Popup 组件的 CSS 代码 */
.popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  overflow: hidden;
  /* 阻止页面滚动 */
}

.popup-container.show {
  opacity: 1;
  display: flex;
}

.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popup-content {
  position: relative;
  border-radius: 10px;
  padding: 20px;
}

.popup-content.closeable {
  cursor: pointer;
}