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

<template>
  <el-scrollbar :class="['app-sidebar', modelValue && 'is-hide']" view-class="app-sidebar__view">
    <div class="app-sidebar__menu">
      <el-menu :default-active="$route.name" :collapse="modelValue" @select="routerTo" unique-opened>
        <app-submenu :data-list="menus"></app-submenu>
      </el-menu>
    </div>
    <div :class="['app-sidebar__mask', modelValue && 'is-hide']" @click="hideSidebar(true)" v-if="isMobile"></div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMenu } from '@/hooks/menu'
import { globalState } from '@/store'
import AppSubmenu from '../submenu/index.vue'

const emit = defineEmits(["update:modelValue"]);

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

const { getAuthMenu } = useMenu();
const router = useRouter();
const menus = ref(getAuthMenu());

const hideSidebar = (value: boolean) => {
  emit('update:modelValue', value);
}

// 监听设备变化
const isMobile = computed(() => {
  const flag = globalState.getValue('isMobile');
  if (flag) {
    hideSidebar(true);
  } else {
    hideSidebar(false);
  }
  return flag;
})

// 菜单跳转
const routerTo = (routerName: string) => {
  isMobile.value && hideSidebar(true);
  router.replace({ name: routerName });
}
</script>

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