前端升級(jí)到AntD Pro V4后，官方文檔上說(shuō)支持了動(dòng)態(tài)Menu的能力，并且還給出了實(shí)現(xiàn)方案。本以為可以按照官方文檔開(kāi)啟一下這個(gè)動(dòng)態(tài)Menu的功能。不曾想，不試不知道，一試嚇一跳，完全走不通么。
還是需要投入到萬(wàn)能的谷歌的懷抱，經(jīng)過(guò)好一陣子谷歌，好一陣子驗(yàn)證，最終搞定。這篇文章就來(lái)給大家介紹一下AntD Pro V4支持動(dòng)態(tài)Menu的完整實(shí)現(xiàn)。
這個(gè)實(shí)現(xiàn)參考了網(wǎng)上多位大俠的方案，最終融合而成。大致分為如下六步。
在src/models/中添加menu.ts文件，文件內(nèi)容：
import { getMenuData } from '@/services/menu'; // 通過(guò)后臺(tái)返回特定的數(shù)組json或者mock模擬數(shù)據(jù)
import { Reducer } from 'redux';
import { Effect } from './connect';
export interface MenuModelState {
? menuData: any[];
}
export interface MenuModelType {
? namespace: 'menu';
? state: MenuModelState;
? effects: {
? ? getMenuData: Effect;
? };
? reducers: {
? ? save: Reducer<MenuModelState>;
? };
}
const MenuModel: MenuModelType = {
? namespace: 'menu',
? state: {
? ? menuData: [],
? },
? effects: {
? ? *getMenuData({ payload, callback }, { call, put }) {
? ? ? const response = yield call(getMenuData);
? ? ? yield put({
? ? ? ? type: 'save',
? ? ? ? payload: response,
? ? ? });
? ? ? if (callback) callback(response);
? ? },
? },
? reducers: {
? ? save(state, action) {
? ? ? return {
? ? ? ? ...state,
? ? ? ? menuData: action.payload || [],
? ? ? };
? ? },
? },
};
export default MenuModel;
在src/services/中添加menu.ts文件，文件內(nèi)容：
import request from 'umi-request';
const BASE_URL = '/v1';
export async function getMenuData(params:any) {
? console.log('===========in getMenuData');
? console.log(params);
? return request(BASE_URL + '/menu/getMenuData', {
? ? method: 'GET',
? ? params: params,
? });
}
第三步，修改connect.d.ts的ConnectState來(lái)添加menu
修改文件src/models/connect.d.ts：
第四步，修改BasicLayout.tsx文件來(lái)關(guān)聯(lián)menu
修改文件src/layouts/BasicLayout.tsx：
在src/mock/中添加menu.ts文件，文件內(nèi)容：
export default {
? ? 'Get /v1/menu/getMenuData': [
? ? ? ? {
? ? ? ? ? path: '/dashboard',
? ? ? ? ? name: 'dashboard',
? ? ? ? ? icon: 'dashboard',
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? path: '/dashboard/analysis',
? ? ? ? ? ? ? name: 'analysis',
? ? ? ? ? ? ? exact: true,
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? path: '/dashboard/monitor',
? ? ? ? ? ? ? name: 'monitor',
? ? ? ? ? ? ? exact: true,
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? path: '/dashboard/workplace',
? ? ? ? ? ? ? name: 'workplace',
? ? ? ? ? ? ? exact: true,
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? }
? ? ? ],
};
為了menu支持國(guó)際化，只需要在menu數(shù)據(jù)中添加locale屬性。
修改src/mock/menu.ts：
export default {
? ? 'Get /v1/menu/getMenuData': [
? ? ? ? {
? ? ? ? ? path: '/dashboard',
? ? ? ? ? name: 'dashboard',
? ? ? ? ? locale: 'menu.dashboard',//國(guó)際化
? ? ? ? ? icon: 'dashboard',
? ? ? ? ? children: [
? ? ? ? ? ? {
? ? ? ? ? ? ? path: '/dashboard/analysis',
? ? ? ? ? ? ? name: 'analysis',
? ? ? ? ? ? ? exact: true,
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? path: '/dashboard/monitor',
? ? ? ? ? ? ? name: 'monitor',
? ? ? ? ? ? ? exact: true,
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? path: '/dashboard/workplace',
? ? ? ? ? ? ? name: 'workplace',
? ? ? ? ? ? ? exact: true,
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? }
? ? ? ],
};
同時(shí)在src/locales/xxx/menu.ts中添加相應(yīng)的國(guó)際化配置。比如：
src/locales/zh-CN/menu.ts中配置menu.dashboard：
export default {
? ...
? 'menu.dashboard': '桌面'
? }
到此為止，你的前端已經(jīng)支持了動(dòng)態(tài)Menu了，并且實(shí)現(xiàn)了通過(guò)mock的方式來(lái)調(diào)試了。后面，你需要在服務(wù)端實(shí)現(xiàn)接口Get /v1/menu/getMenuData就可以了。
經(jīng)過(guò)這六個(gè)步驟，你現(xiàn)在已經(jīng)開(kāi)啟了AntD Pro V4的動(dòng)態(tài)Menu時(shí)代。
