vue3菜单状态停用时菜单目录不可点击怎么做

在 Vue3 中，如果你想实现当菜单状态（比如 `menuDisabled`）为 `true` 时，菜单目录不再响应点击操作，你可以结合模板语法和 `ref` 来实现这个功能。这里是一个简单的例子：

首先，在你的组件中定义一个 `ref` 对象来追踪按钮或者链接元素，并设置初始的点击禁用状态：

<template>
  <ul ref="menuList">
    <li v-for="(item, index) in items" :key="index" :class="{ disabled: menuDisabled }" @click.prevent="handleItemClick(index)">
      {{ item.text }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const menuDisabled = ref(false); // 菜单是否禁用
const items = ...; // 菜单项数据

function handleItemClick(index) {
  if (menuDisabled.value) {
    event.preventDefault(); // 阻止默认的点击行为
    console.log('Click prevented on disabled menu');
    return;
  }
  // 正常处理点击逻辑...
}
</script>

这样，当 `menuDisabled` 为 `true` 时，点击事件会被阻止并且不会触发 `handleItemClick` 函数，从而达到禁用的效果。