Menu 导航菜单 Menu.Item组件disabled禁用还可点击

[TsMask]

trafficstars

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

正常情况下，禁用表示无法点击无法出发功能行为，现在设置的了属性disabled只是变灰，鼠标还是小手，点击行为会触发。

What does the proposed API look like?

期望disabled开启可以禁用点击行为，类似原先3x版本的鼠标禁止，行为禁止不触发

[cc-hearts]

能够提供一下 版本号以及复现的代码吗？

[TsMask]

图上是v3的，代码来源

图上是v4的，代码变为a链接

<template>
  <div>
    <a-switch
      :checked="theme === 'dark'"
      checked-children="Dark"
      un-checked-children="Light"
      @change="changeTheme"
    />
    <br />
    <br />
    <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      style="width: 256px"
      mode="inline"
      :theme="theme"
    > 
      <a-menu-item key="1" :disabled="true">
        <template #icon>
          <MailOutlined />
        </template>
        <a title="Github-打开新窗" icon="icon-github" target="_blank" href="https://github.com/">
          Navigation One
        </a> 
      </a-menu-item>
      <a-menu-item key="2" :danger="true">
        <template #icon>
          <CalendarOutlined />
        </template>
        Navigation Two
      </a-menu-item>
      <a-sub-menu key="sub1">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <template #title>Navigation Three</template>
        <a-menu-item key="3">Option 3</a-menu-item>
        <a-menu-item key="4">Option 4</a-menu-item>
        <a-sub-menu key="sub1-2" title="Submenu">
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option 6</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <template #icon>
          <SettingOutlined />
        </template>
        <template #title>Navigation Four</template>
        <a-menu-item key="7">Option 7</a-menu-item>
        <a-menu-item key="8">Option 8</a-menu-item>
        <a-menu-item key="9">Option 9</a-menu-item>
        <a-menu-item key="10">Option 10</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import type { MenuTheme } from "ant-design-vue";
export default defineComponent({
  components: {
    MailOutlined,
    CalendarOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },
  setup() {
    const state = reactive({
      theme: "dark" as MenuTheme,
      selectedKeys: ["1"],
      openKeys: ["sub1"],
    });
    const changeTheme = (checked: boolean) => {
      state.theme = checked ? "dark" : "light";
    };

    return {
      ...toRefs(state),
      changeTheme,
    };
  },
});
</script>

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days