<p>可以在 uni-app 中使用 v-if 指令来控制菜单的显示和隐藏，然后在点击空白位置时，设置 v-if 的值为 false，从而实现关闭菜单的效果。</p>
<p>具体实现方式如下：</p>
<ol>
<li>在模板中使用 v-if 指令控制菜单的显示和隐藏，如下所示：</li>
</ol>
<pre><code>&lt;template&gt;
  &lt;view class=&quot;page&quot;&gt;
    &lt;!-- 菜单 --&gt;
    &lt;view class=&quot;menu&quot; v-if=&quot;showMenu&quot;&gt;
      &lt;!-- 菜单内容 --&gt;
    &lt;/view&gt;
  &lt;/view&gt;
&lt;/template&gt;
</code></pre>
<ol start="2">
<li>在视图组件的 data 函数中声明 showMenu 属性，用于控制菜单的显示和隐藏，如下所示：</li>
</ol>
<pre><code>&lt;script&gt;
export default {
  data() {
    return {
      showMenu: false,
    }
  },
  // 其他选项
}
&lt;/script&gt;
</code></pre>
<ol start="3">
<li>在视图组件的 methods 函数中声明 toggleMenu 方法，用于切换 showMenu 的值，如下所示：</li>
</ol>
<pre><code>&lt;script&gt;
export default {
  data() {
    return {
      showMenu: false,
    }
  },
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu
    },
  },
  // 其他选项
}
&lt;/script&gt;
</code></pre>
<ol start="4">
<li>为点击空白位置绑定事件，在事件处理函数中调用 toggleMenu 方法，如下所示：</li>
</ol>
<p>```
<template>
  &lt;view class=&quot;page&quot; @click=&quot;toggleMenu&quot;&gt;
    <!-- 菜单 -->
    <view class="menu" v-if="showMenu">
      <!-- 菜单内容 -->
    </view>
  </view>
</template></p>
<script>
export default {
  data() {
    return {
      showMenu: false,
    }
  },
  methods: {
    toggleMenu() {
      this.