222

schangxiang@126.com

2025-05-06 38b161e4d52362081bfe78fb5b51fbf384db7ce2

 HIAWms/web/src/components/Menu/index.vue

对比新文件
@@ -0,0 +1,100 @@
<template>
  <el-menu
    :default-active="defaultActive"
    class="cs-menu-vertical-demo"
    :collapse="isCollapse"
    active-text-color="#fff"
    background-color="#545c64"
    text-color="#fff"
    @select="handleSelected"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-menu-item v-for="item in routes" :index="item.path">
      <div class="menu-li">
        <div class="icon">
          <img
            width="16"
            v-if="!item.icon.includes('icon-')"
            :src="
              item.icon.includes('icon-')
                ? item.icon
                : `../../../src/assets/svg/${item.icon}.svg`
            "
          />
          <i
            v-else-if="item.icon"
            :class="{
              iconfont: true,
              [item.icon]: true,
            }"
          ></i>
          <el-icon v-else><document /></el-icon>
        </div>
        {{ item.name }}
      </div>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Document, Menu as IconMenu } from '@element-plus/icons-vue'
import { routeInfo } from '@/router'
import { useRouter } from 'vue-router'

const router = useRouter()

const routes = computed(() => {
  return routeInfo.routes || []
})
const isCollapse = ref(true)

const defaultActive = computed(() => {
  return location.hash.split('#')[1]
})

const handleSelected = (index: string) => {
  router.push(index)
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.cs-menu-vertical-demo {
  position: relative;
  width: 201px;
  height: 100%;
  background-color: #000000 !important;
  overflow-y: auto;
  // overflow-x: inherit;

  :deep(.is-active) {
    background-color: #292929;
    border-right: 5px solid #5a84ff;
  }
  :deep(.cs-menu-item) {
    &:hover {
      background-color: #292929;
    }
  }
}

.menu-li {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .icon {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>