一个 antd 的 dropdown 非 overlay 版本
antd 新片将 overlay 属性改成了 menu,这里是一个关于这个改造的代码
import { Dropdown, MenuProps } from 'antd';
import {
BarsOutlined,
LoginOutlined,
RocketOutlined,
ScheduleOutlined,
SettingOutlined,
TagsOutlined,
} from '@ant-design/icons';
const PROFILE_ITEMS = [
{ icon: <BarsOutlined />, key: '/modules/categories', label: '分类管理' },
{ icon: <TagsOutlined />, key: '/modules/tags', label: '标签管理' },
{ icon: <RocketOutlined />, key: '/modules/programming_langs', label: '编程语言管理' },
{ icon: <SettingOutlined />, key: '/modules/options', label: '配置管理' },
{ icon: <ScheduleOutlined />, key: '/modules/versions', label: '版本管理' },
{ key: '/', icon: <LoginOutlined />, label: '退出' },
] as MenuProps['items'];
export const Profile = () => {
const handleMenuClick = (e) => {
nx.$route.push(e.key);
};
return (
<Dropdown menu={{ items: PROFILE_ITEMS, onClick: handleMenuClick }}>
<img
src="https://tva1.js.work/large/007S8ZIlgy1gexw87htqhj305k05k74o.jpg"
width={24}
alt="user's avatar"
/>
</Dropdown>
);
};