Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task
TsMask opened this issue Mar 4, 2024 · 3 comments
Closed
1 task

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

TsMask opened this issue Mar 4, 2024 · 3 comments
Labels

Comments

@TsMask
Copy link

TsMask commented Mar 4, 2024

  • 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
Copy link
Contributor

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

@TsMask
Copy link
Author

TsMask commented Mar 4, 2024

image

图上是v3的,代码来源

image
图上是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>

Copy link

github-actions bot commented May 4, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants