uniapp 弹框遮挡底部固定盒子解决方案

在 uniapp 中，如果页面底部使用 position: fixed 固定一个盒子，然后用 upopup 写了一个底部弹出的弹框，可能会出现弹框没有遮住固定盒子的情况。

为了解决这个问题，可以在弹框弹出时，给 position: fixed 的盒子添加一个高度为 100% 的遮罩层，来遮住它。具体步骤如下：

在弹框组件的样式中，添加一个遮罩层的样式，例如：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层的颜色和透明度 */
}

在弹框组件的模板中，将遮罩层添加到 position: fixed 的盒子内部，例如：

<template>
  <div>
    <div class='fixed-box'>
      <!-- position:fixed 的盒子内容 -->
    </div>
    <div class='mask' v-show='showPopup' @click='hidePopup'></div>
    <upopup v-model='showPopup'></upopup>
  </div>
</template>

在弹框组件的逻辑代码中，添加控制遮罩层显示和隐藏的逻辑，例如：

export default {
  data() {
    return {
      showPopup: false // 控制弹框显示和隐藏的变量
    };
  },
  methods: {
    hidePopup() {
      this.showPopup = false;
    }
  }
};

这样，当弹框弹出时，遮罩层会覆盖在 position: fixed 的盒子上方，实现遮挡效果。当点击遮罩层或关闭按钮时，隐藏弹框和遮罩层。