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
Labels
Comments
能够提供一下 版本号以及复现的代码吗? |
图上是v3的,代码来源 <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>
|
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
What problem does this feature solve?
正常情况下,禁用表示无法点击无法出发功能行为,现在设置的了属性disabled只是变灰,鼠标还是小手,点击行为会触发。
What does the proposed API look like?
期望disabled开启可以禁用点击行为,类似原先3x版本的鼠标禁止,行为禁止不触发
The text was updated successfully, but these errors were encountered: