效果展示:
代码实现:
import React, { PureComponent, Suspense } from 'react';
import router from 'umi/router';
import { Layout, Select } from 'antd';
import PinYinMatch from 'pinyin-match';
const { Sider } = Layout;
const { Option } = Select;
export default class SiderMenu extends PureComponent {
getMenuOption = (menusData) => {
if (!menusData) {
return [];
}
return menusData
.filter(item => item.menuName)
.map(item => this.getSubMenuOrItem(item))
.filter(item => item);
};
getSubMenuOrItem = item => {
if (item.children) {
return this.getMenuOption(item.children);
}
return <Option value={item.path} key={item.path} title={item.menuName}>{item.menuName}</Option>;
};
onMenuSelect = (val) => {
if (val) router.push(val);
}
render() {
const { menuData } = this.props;
return (
<Sider>
<Suspense fallback={<PageLoading />}>
<div>
<Select
showSearch
value={undefined}
style={
{ width: 200 }}
placeholder="使用字母或文字快捷搜索"
onChange={this.onMenuSelect}
filterOption={(inputValue, option) => {
const reg = new RegExp(inputValue, 'i');
const qs = option.props.title || '';
if (PinYinMatch.match(qs, inputValue)) {
return true;
}
if (qs && reg.test(qs)) return true;
return false;
}}
>
{this.getMenuOption(menuData)}
</Select>
</div>
</Suspense>
</Sider>
);
}
}