2023.11.13今天我学习了如何对若依的侧边栏添加技术标记的效果，如图：

我们需要用到两个页面：

先说子组件实现计数标记效果

1.item.vue

<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    num: {
      type: Number,
      default: 0
    }//用来传入小红点个数
  },

  render(h, context) {
    const { icon, title, num } = context.props
    const vnodes = []
    if (icon) {
      vnodes.push(<svg-icon icon-class={icon}/>)
    }

    if (title) {
      if (title == '通知中心') {//判断自己需要展示标题的小红点
        if (title.length > 5) {
          vnodes.push(<span slot="title" title={(title)}>{(title)}</span>)
        } else {
          if (num == 0) {//没有数据不显示小红点
            vnodes.push(<span slot="title">{(title)}</span>)
          } else {
            vnodes.push(<span slot="title">{(title)}
              <el-badge value={(num)} class="item" id="elBadge"/></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>

<style>
.item {
  margin-top: -20px;
  margin-right: 10px;
}
</style>

2.sidebarItem.vue

因为是函数式组件，没有任何的生命周期，所以只能在这个父组件中调用接口然后传入给子组件。

<template>
  <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <item :num="message_num(onlyOneChild.meta)" :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
                :title="onlyOneChild.meta.title"
          />
        </el-menu-item>
</template>

<script>
export default{
     methods:{
     message_num(data) {
      if (data.title == '通知中心') {//判断自己需要传入的标题，不然你标题多的时候会请求很多次
        let num = 555//到时候这边可以换成接口赋值
        return num
      }
    }
  }
 }
</script>