uniapp 弹出菜单 如何点击空白位置关闭

在Uniapp中，可以使用uni-popup组件来实现弹出菜单。如果想要在点击空白位置时关闭菜单，可以在popup组件上添加一个遮罩层，并监听该遮罩层的点击事件，在点击时关闭菜单。

具体实现方法如下：

1. 在popup组件上添加一个遮罩层，设置该遮罩层的样式为全屏，透明度为0.5或其他适当的值。

2. 监听遮罩层的点击事件，可以使用@click.native修饰符来监听原生的点击事件，然后在方法中关闭菜单。

示例代码如下：

<template>
  <view>
    <uni-popup ref="popup" :show="showPopup">
      <!-- popup内容 -->
    </uni-popup>
    <view v-if="showPopup" class="mask" @click.native="closePopup"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    }
  },
  methods: {
    openPopup() {
      this.showPopup = true
    },
    closePopup() {
      this.showPopup = false
    }
  }
}
</script>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

在上面的代码中，popup组件通过ref引用，然后在遮罩层上监听点击事件，调用closePopup方法关闭菜单。