长沙网站开发的网站,重庆网站建设服务公司,响应网站,wordpress加授权el-menu el-badge 菜单加红点标识el-badge 一、el-menu组件menu/index.vuemenu/submenu.vue 二、获取/更新菜单红点标识 main.js引入全局组件/mixins全局混入 el-menu封装
一、el-menu组件
menu/index.vue
重点#xff1a;定义 refmenu#xff0c;切换路由时… el-menu el-badge 菜单加红点标识el-badge 一、el-menu组件menu/index.vuemenu/submenu.vue 二、获取/更新菜单红点标识 main.js引入全局组件/mixins全局混入 el-menu封装
一、el-menu组件
menu/index.vue
重点定义 refmenu切换路由时调用 refreshs() 更新组件
templateel-menu :unique-openedtrue :default-activethis.$store.state.menuData.menuActive classel-menu-vertical-demo :background-colorbackgroundColor :text-colortextColor :active-text-coloractiveTextColorsubMenu refmenu :menuListsideNavMenu :keyMath.random()/subMenu/el-menu
/templatescript
export default {name: index,data() {return {backgroundColor: #EAEEF6,textColor: #3F434E,activeTextColor: #2A60CC,// 菜单列表sideNavMenu: []}},mounted() { },methods: {async refreshs() {await this.getMenuBadge()this.$refs.menu.refreshs();}},watch: {$route(to, from) {this.refreshs()},},created() { },
}
/script
menu/submenu.vue
重点定义refsubMenu调用 refreshs() 更新组件el-badge 展示标识未处理数据数量 el-badge v-if!!list.badgeNum :valuelist.badgeNum :max99 /el-badge
templatedivdiv v-for(list,index) in this.menuList :keyindexel-submenu v-if!!list.children :keylist.id :indexString(list.id)template slottitlei classmenu_icon :classlist.icon/ispan slottitle{{ list.name}}/spanel-badge v-if!!list.badgeNum :valuelist.badgeNum :max99 /el-badge!-- el-badge v-iflist.showBadge valuenew /el-badge --/templatesubMenu refsubMenu :menuListlist.children/subMenu/el-submenuel-menu-item v-else :indexlist.pathrouter-link :targettargeLink(list.path)?_blank: :tolist.pathi classmenu_icon :classlist.icon/ispan{{list.name}}/spanel-badge v-if!!list.badgeNum :valuelist.badgeNum :max99 /el-badge/router-link/el-menu-item/div/div
/templatescript
export default {name: submenu,data() {return {}},props: {menuList: Array},mounted() { },methods: {targeLink(path) {if (path /aboutUs) {return true} else {return false}},refreshs() {this.$forceUpdate()if (this.$refs.subMenu) {this.$refs.subMenu.forEach(item {item.refreshs()})}},},watch: {},created() { },
}
/script二、获取/更新菜单红点标识
调用 getMenuBadge() 获取/更新待办数据红点显示数据 api.js
import { getOneOrAllData } from /common/js/http
// 菜单接口
export const getMenuListApi p getOneOrAllData(/getMenuListApi, p)
// 菜单角标数据接口
export const getMenuBadgeApi {getMenuHomeBadgeApi: p getOneOrAllData(/getMenuHomeBadgeApi , p),//首页待办数量getMenuAboutBadgeApi: p getOneOrAllData(/globalApi/home/examineConsumptionCount, p),//关于页核待办数量
};
mixins引入全局 public.js 文件
data() {return {// 登录人筛选后的菜单红点标识hasBadgeMenu: null,// 菜单红点标识定义badgeItem: {// 第一个参数是 hasBadgeMenu 下 obj 下标pObjOrder// 第二个参数是 obj 中 child 中的 obj 下标cObjOrder// 第三个参数是调用的接口/basicDataReview: [0, 0, getMenuHomeBadgeApi], // 首页待办数量/publicDataReview: [0, 1, getMenuAboutBadgeApi], // 关于页核待办数量},}
},
// 有权限的菜单
getMenuList() {// 调接口getMenuListApi().then(async res {// 保存菜单数据到vuexthis.$store.commit(menuData/change_sideNavMenu, res.data);// 菜单红点标识await this.getMenuBadge()// 跳转路由this.jumpRouter(this.$store.state.menuData.sideNavMenu)})
},// 更新菜单红点标识
async getMenuBadge() {// 获取vuex中的菜单let sideMenu this.$store.state.menuData.sideNavMenu// hasBadgeMenu 数据格式// hasBadgeMenu [// {// item:{ },// child:[// { item: {}, api: getMenuHomeBadgeApi },// { item: {}, api: getMenuAboutBadgeApi },// ]// }// ]// 过滤登录人所需菜单红点标识if (!this.hasBadgeMenu) {this.hasBadgeMenu []sideMenu.forEach(item {if (!!item.children) {item.children.forEach(cItem {for (var key of Object.keys(this.badgeItem)) {if (cItem.path key) {let pObjOrder this.badgeItem[key][0]if (!this.hasBadgeMenu[pObjOrder]) {this.hasBadgeMenu[pObjOrder] {}}if (!this.hasBadgeMenu[pObjOrder].child) {this.hasBadgeMenu[pObjOrder].child []}let cObjOrder this.badgeItem[key][1]if (!this.hasBadgeMenu[pObjOrder].child[cObjOrder]) {this.hasBadgeMenu[pObjOrder].child[cObjOrder] {}}this.hasBadgeMenu[pObjOrder].child[cObjOrder].item cItemthis.hasBadgeMenu[pObjOrder].child[cObjOrder].api this.badgeItem[key][2]this.hasBadgeMenu[pObjOrder].item item}}})}else { }})}// 调用红点信息接口for (let i in this.hasBadgeMenu) {if (this.hasBadgeMenu[i]) {for (let j in this.hasBadgeMenu[i].child)if (this.hasBadgeMenu[i].child[j]) {if (getMenuBadgeApi[this.hasBadgeMenu[i].child[j].api]) {await getMenuBadgeApi[this.hasBadgeMenu[i].child[j].api]().then(res {this.hasBadgeMenu[i].child[j].item.badgeNum res.data})} else {console.error(接口未定义);}}}}// 判断父级标识for (let j in this.hasBadgeMenu) {// this.hasBadgeMenu[j].item.showBadge false;this.hasBadgeMenu[j].item.badgeNum 0;for (let i in this.hasBadgeMenu[j].child) {if (!!this.hasBadgeMenu[j].child[i].item.badgeNum) {// this.hasBadgeMenu[j].item.showBadge true;this.hasBadgeMenu[j].item.badgeNum this.hasBadgeMenu[j].child[i].item.badgeNumbreak}}}this.$store.commit(menuData/change_sideNavMenu, sideMenu);
},
// 跳转路由
jumpRouter(menuList) {// 默认登录home页for (let i in menuList) {if (menuList[i].path /home) {this.$router.push({ path: menuList[i].path })break} else {this.$router.push({ path: menuList[0].path })}}
},
