Vue菜单标题标记实现方法

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

实现效果图：

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需要注册一下，千万别忘记，不然无效。

注册方式：

3、在getters.js注册

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

引入以下代码：

<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>

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