webb2b/src/packages/pc/components/layouts/sidebar/index.vue

<template>
  <el-scrollbar :class="['app-sidebar', collapse && 'is-hide']" view-class="app-sidebar__view">
    <div :class="['app-sidebar__header', state.isMobile ? 'is-show' : collapse && 'is-hide']">
      <span class="logo">{{ $t('app.name') }}</span>
    </div>
    <div class="app-sidebar__menu">
      <app-sidemenu :collapse="state.isMobile ? false : collapse" @click="routerTo" />
    </div>
    <div :class="['app-sidebar__copyright', state.isMobile ? 'is-show' : collapse && 'is-hide']">
      <span>&copy;{{ year }} Muchinfo</span>
    </div>
    <div :class="['app-sidebar__mask', collapse && 'is-hide']" @click="hideSidebar()" v-if="state.isMobile"></div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { watch } from 'vue'
import { useMenu } from '@/hooks/menu'
import client from '@/utils/client'
import AppSidemenu from '../sidemenu/index.vue'

const emit = defineEmits(['update:collapse'])

defineProps({
  // 折叠收起菜单栏
  collapse: Boolean,
})

const { router, getChildrenMenus } = useMenu()
const { state } = client
const year = new Date().getFullYear()

const hideSidebar = () => {
  emit('update:collapse', state.isMobile)
}

// 路由跳转
const routerTo = (active: string) => {
  hideSidebar()
  const submenus = getChildrenMenus(active)
  // 判断是否存在子菜单
  if (submenus.length) {
    router.push({ name: submenus[0].code })
  } else {
    router.push({ name: active })
  }
}

// 监听设备变化
watch(() => state.isMobile, () => hideSidebar())
</script>

<style lang="less">
@import './index.less';
</style>