Project_yhfu/src/components/v-fastmenu.vue

<template>
  <div class="fast-menu">
    <div class="menu-list">
      <!--			<router-link v-for="(fastMenu,index) in fastMenu" :to="fastMenu.path" :key="index" class="header-right" exact>-->
      <!--        <span><i class="iconfont" :class="fastMenu.icon"></i>{{fastMenu.name}}</span>-->
      <!--      </router-link>-->
      <router-link v-for="(fastMenu,index) in fastMenu" :to="fastMenu.path" :key="index" class="header-right"
                   v-slot="{ navigate, href, route }" exact>
        <span><i class="iconfont" :class="fastMenu.icon"></i><el-badge :value="fastMenu.msValue" :max="99" class="item">{{fastMenu.name}}</el-badge></span>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        fastMenu: [
          {
            name: '通知',
            path: '/',
            icon: 'sj-icon-shujzx',
            msValue: 1
          },
          {
            name: '任务',
            path: '/',
            icon: 'sj-icon-rwzx',
            msValue: 2
          },

        ],

      }
    },
    computed: {},

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import '@/assets/styles/base.scss';


    .fast-menu {
      right: 0.5rem;
      position: absolute;
      display: flex;

      .menu-list {
        margin-left: 20px;
        display: flex;
        align-items: center;

        span {
          // min-width: 4.625rem;
          font-size: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10px 15px;
          color: $fBlue;
          height: 100%;
          cursor: pointer;
          text-align: center;

          i {
            padding-right: 3px;
          }
        }

        span:hover {
          color: $fBlueHover;
          background-color: #032530;
        }
      }

      .el-badge__content.is-fixed {
        right: 3px;
      }

      .el-badge__content {
        border: 0;
      }

    }
  
</style>