一、功能要求
页面左侧是菜单栏,菜单栏中有分类,分类下有子分类,鼠标移入子分类上需要显示三个点,显示下拉操作选项。点击子分类右侧需要展示对应的表单,是用的套用的组件方式。之后因为同事也需要使用左侧菜单,但是右侧展示的内容不一样,所以抽离了一些代码,有些地方可以自行优化。
- 全新的界面设计 ,将会带来全新的写作体验;
- 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
二、实现思路
首先引入antd的Menu组件,调接口渲染出数据,defaultSelectedKeys和defaultOpenKeys只在初始化的时候有效,建议直接使用selectedKeys避免不必要的错误。
在Menu.Item里,onMouseEnter设置了鼠标移入事件,保存移入id值。在Menu中设置了onMouseLeave移除事件。
因为Menu中如果点击编辑主题或删除按钮的话,Menu的onClick也会触发,所以直接在onClick事件中判断是edit还是del
//逻辑代码
const toggleCollapsed = useCallback(() => {
setCollapsed(!collapsed)
}, [collapsed])
useEffect(() => {
getMenuList()
}, [])
//获取menu列表 并且设置需要默认展开的menu.item
const getMenuList = useCallback(async (type, addName) => {
let { list } = await getMonitorPageList()
setGetPageList(list)
let keys = list.filter((r) => {
if (r.list.length !== 0) {
return r
}
})
if (keys.length !== 0) {
let item = keys[0].list[0]
if (type == "add") {
let newItem = different(list,addName)
setOpenKeys([newItem.categoryId])
setSelectedKeys([newItem.topicId])
setClickMenuId(newItem.topicId)
} else {
setOpenKeys([item.categoryId])
setSelectedKeys([item.topicId])
setClickMenuId(item.topicId)
}
}
}, [getPageList])
// 判断新增的哪一项
const different =(list, name) => {
for (let i = 0; i < list.length; i++) {
if (list[i]["list"].length!==0) {
let result= list[i]["list"].find(r=>r['topicName']==name)
if(result){
return result
}
}
}
}
const onClickChange = useCallback(
async ({ key, domEvent }) => {
setClickMenuId(key)
setSelectedKeys([key])
if (domEvent.target.dataset.id == "edit") {
let results = await menuDetail({ topicId: key })
setMenuDetails(results)
toggleCollapsed()
setAddMenu(true)
} else if (domEvent.target.dataset.id == "del") {
confirm({
title: `确定要删除吗?`,
onOk() {
delMenu({ topicId: key }).then((res) => {
if (res) {
getMenuList()
}
})
},
onCancel() { },
})
} else {
setArticle({})
setAddMenu(false)
}
},
[clickMenuId]
)
const onSearch = useCallback(async (value) => {
let { list } = await searchMenu({
search: value,
flag: 1,
})
let keys = list.filter((r) => {
if (r.list.length !== 0) {
return r
}
})
if (keys.length !== 0) {
let item = keys[0].list[0]
setOpenKeys([item.categoryId])
setSelectedKeys([item.topicId])
setClickMenuId(item.topicId)
setGetPageList(list)
if (value.trim()) {
success(`查询成功!`)
}
} else {
error(`没有搜索到${value}!`)
}
}, [])
const openMenu = useCallback((openKeys) => {
setOpenKeys(openKeys)
}, [])
<Menu
onOpenChange={openMenu} //选中SubMenu的回调
openKeys={collapsed ? [] : openKeys} //展开的SubMenu
selectedKeys={selectedKeys} //选中的menu_item
onMouseLeave={() => setMouseOverId(null)}
/* defaultSelectedKeys={[defaultKeys[1]]}
defaultOpenKeys={[defaultKeys[0]]} */
onClick={onClickChange}
mode="inline"
inlineCollapsed={collapsed}
>
{getPageList.map((item, index) => {
return (
<SubMenu
key={item.categoryId}
title={
<span >
<img src={iconList[index]} style={{ width: '18px', height: '18px', verticalAlign: 'middle', marginRight: '9px' }} />
{!collapsed && <b style={{ fontSize: '18px', color: '#333', verticalAlign: 'middle' }}>{item.categoryName}</b>}
</span>
}
>
{item.list
? item.list.map((child) => (
<Menu.Item
key={child.topicId}
onMouseEnter={() => setMouseOverId(child.topicId)}
>
<span style={{ fontSize: '16px' }}>{child.topicName}</span>
{mouseOverId == child.topicId ? (
<Tooltip
overlayClassName="jc-tooltip"
title={
<ul className={styles.tooltipUl}>
<li>
<Button data-id="edit">编辑主题</Button>
</li>
</ul>
}
placement="bottom"
>
<Icon
type="ellipsis"
style={{
fontSize: 20,
float: "right",
lineHeight: "40px",
}}
/>
</Tooltip>
) : (
""
)}
</Menu.Item>
))
: ""}
</SubMenu>
)
})}
</Menu>