SaaS-lib/lib/paas/view/system/layout/sider.vue

<!-- @format -->
<template>
  <nav>
    <ul>
      <li>
        <a
          class="nav-item h0"
          :class="{ 'nav-item-current': isRouteLinkActive('/login') }"
          href="/nervui-main/dashboard">
          <span class="flag"></span>
          <i class="iconfont">&#xe6f6;</i>
          <span class="nav-title h5">总览</span>
        </a>
      </li>
      <li v-for="item in appRecords" :key="item.index">
        <a class="nav-item h0" :href="item.url" v-if="item.isRedirect">
          <span class="flag"></span>
          <i class="iconfont" v-html="item.icon"></i>
          <span class="nav-title h5">{{ item.label }}</span>
        </a>

        <a
          class="nav-item h0"
          v-if="!item.isRedirect"
          :class="{ 'nav-item-current': isRouteLinkActive(item.url) }">
          <span class="flag"></span>
          <i class="iconfont" v-html="item.icon"></i>
          <span class="nav-title h5">{{ item.label }}</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'NsSider',
    components: {},
    props: {
      appRecords: {
        type: Array,
        default: () => [],
      },
    },
    methods: {
      isRouteLinkActive(routerLink: string) {
        let module = routerLink.split('/')[1];
        let uri = window.location.pathname;
        return uri.indexOf(module) != -1;
      },
    },
  });
</script>

<style lang="less">
  nav {
    background: @layout-nav-background;
    position: fixed;
    left: 0;
    top: 48px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    width: @nav-width;
    z-index: 99;
    transition: width 0.2s;
    ul {
      padding: 0;
      li {
        list-style: none;
        .nav-item {
          display: inline-block;
          width: 200px;
          position: relative;
          height: 48px;
          line-height: 48px;
          color: @layout-nav-color;
          .iconfont {
            display: inline-block;
            // vertical-align: middle;
            width: 48px;
            text-align: center;
            font-family: iconfont !important;
            font-size: 16px;
            font-style: normal;
            line-height: 48px;
            // color: #52616f;
          }
          &:hover {
            background: @layout-nav-hover;
          }
        }
        .nav-item-current {
          background: @layout-nav-hover;
          color: @layout-nav-check-color !important;
          .iconfont {
            color: #00acff !important;
          }
          .flag {
            display: block;
            position: absolute;
            left: 0;
            border-left: 2px solid #00acff;
            width: 2px;
            height: 48px;
          }
        }
      }
    }
  }
  nav:hover {
    width: @nav-open-width;
  }
</style>