前言：在项目需求中，有时会有需要菜单标题标记的需求，用以提醒作用，下面介绍一款常见的vue中layout实现方式。

实现效果图：

Vue菜单标题标记实现方法_获取数据

Vue前端：


1、向后端获取数据js,返回都是int类型，命名为seal.js

import request from '@/utils/request'


// 查询快到期数量

export function searchSealApply(query) {

 return request({

   url: '/system/wai/searchSealApply',

   method: 'get',

   params: query

 })

}


export function searchNumAdduser(query) {

 return request({

   url: '/system/wai/searchNumAdduser',

   method: 'get',

   params: query

 })

}

2、写一个全局数据存储js,命名为apply.js

import { searchSealApply ,searchNumAdduser} from '@/api/seal'


const state = {

 applyTotal: undefined,

 applyUserTotal:undefined

}


const mutations = {

 SET_APPLY_TOTAL: (state, applyTotal) => {

   state.applyTotal = applyTotal

 },

 SET_USER_TOTAL: (state, applyUserTotal) => {

   state.applyUserTotal = applyUserTotal

 }

}


const actions = {

 // 根据自己实际情况获取后台数据

 getApply({ commit, state }) {

   return new Promise((resolve, reject) => {

     searchSealApply().then(response => {

       const data = response

       // 将获取的数据存储

       commit('SET_APPLY_TOTAL', data)

       resolve()

     }).catch(error => {

       reject(error)

     });

     searchNumAdduser().then(response => {

       const data = response

       // 将获取的数据存储

       commit('SET_USER_TOTAL', data)

       resolve()

     }).catch(error => {

       reject(error)

     });

   })

 }

}


export default {

 namespaced: true,

 state,

 mutations,

 actions

}

注意：apply.js需要注册一下，千万别忘记，不然无效。


注册方式：

Vue菜单标题标记实现方法_数据存储_02

3、在getters.js注册

Vue菜单标题标记实现方法_数据存储_03

4、找到layout-components-Sidebar-Item.vue

Vue菜单标题标记实现方法_数据存储_04

引入以下代码：


<script>

import store from "@/store";


export default {

 name: 'MenuItem',

 functional: true,

 props: {

   icon: {

     type: String,

     default: ''

   },

   title: {

     type: String,

     default: ''

   }

 },

 render(h, context) {

   const { icon, title } = context.props

   const vnodes = []


   if (icon) {

     if (icon === 'date'||icon=='color') {

     }else {

       vnodes.push(<svg-icon icon-class={icon}/>)

     }


   }


   if (title) {

     // 要加计数器的侧边栏名称

     if (title === '驻场申请变更') {

       // 判断计数器的数如果不存在或者为0则不显示

       if (store.getters.applyTotal !== undefined && store.getters.applyTotal !== 0) {

         const num = store.getters.applyTotal

         vnodes.push(

           <span slot='title'>

             {(title)}

             <sup class='el-badge__content el-badge__content--warning'>{(num)}</sup>

           </span>

         )

       } else {

         vnodes.push(<span slot='title'>{(title)}</span>)

       }

     }else if(title === '部门驻场人员'){

          // 判断计数器的数如果不存在或者为0则不显示

       if (store.getters.applyUserTotal !== undefined && store.getters.applyUserTotal !== 0) {

         const num = store.getters.applyUserTotal

         vnodes.push(

           <span slot='title'>

             {(title)}

             <sup class='el-badge__content el-badge__content--warning'>{(num)}</sup>

           </span>

         )

       } else {

         vnodes.push(<span slot='title'>{(title)}</span>)

       }

     }else if (title.length > 5) {

       vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)

     } else {

       vnodes.push(<span slot='title'>{(title)}</span>)

     }

   }

   return vnodes

 }

}

</script>

注意：以上标红为实现标记代码，当进行页面刷新的时候，标记动态获取发生变化。