pc端/移动端菜单折叠，按钮点击展示

PC端代码：

?

?

//分辨率 > 768px

?<div class="header-right" v-if="showMenu">

?????????<router-link to="/home" class="header-list">

? ? ? ? ????????? <span class="nav" :class="$route.fullPath === '/home' ? 'active' : ''" ????????????????????????@mouseenter.native="activeNav = false">首页

? ? ? ? ????????? </span>

? ? ? ? </router-link>

? ? ? ? <router-link to="/companyProfile" class="header-list">

? ? ? ? ? <span class="nav" :class="$route.fullPath === '/companyProfile' ? 'active' : ''"

? ? ? ? ? ? @mouseenter.native="activeNav = false">公司介绍

? ? ? ? ? </span>

? ? ? ? </router-link>

?</div>

//分辨率? ?< 768px

? <!-- 折叠菜单按钮 -->

? ? ? <el-icon>

? ? ? ? <MoreFilled @click="toggleMenu" v-if="!showMenu" />

? ? ? </el-icon>

? ? ? <!-- 折叠菜单 -->

? ? ? <div v-if="foldMenu" class="drow-menu" >

? ? ? ?......

? ? ? </div>

?JS逻辑

<script setup lang="ts">

import { ref, onMounted, onUnmounted } from 'vue'

import { useRouter } from 'vue-router';

const showMenu = ref(false)

const foldMenu = ref(false) // 折叠菜单

const router = useRouter();

const activeNav = ref(false)

const windowWidth = ref(window.innerWidth)

//监听窗口大小变化

const handleResize = () => {

? windowWidth.value = window.innerWidth

? if (windowWidth.value > 768) {

? ? showMenu.value = true

? ? foldMenu.value = false

? } else {

? ? showMenu.value = false

? }

}

// 切换菜单的显示和隐藏状态

const toggleMenu = () => {

? foldMenu.value = !foldMenu.value

}

onMounted(() => {

? handleResize()

? window.addEventListener('resize', handleResize)

})



onUnmounted(() => {

? window.removeEventListener('resize', handleResize)

})







</script>

?CSS样式

/* 菜单折叠按钮样式 */
.icon-menu-fold {
  font-size: 20px;
  cursor: pointer;
  line-height: 80px;
}

.el-icon {
  height: 5em;
  padding-right: 20px;
}

@media screen and (max-width: 768px) {
  .app-header .header-title {
    .header-img {
      width: 200px;
      height: 100%;

      img {
        width: 60px;
        height: auto;
      }

      p {
        font-size: 16px;
      }
    }

    .drow-menu {
      display: block;
      right: 0;
      top: 80px;
      width: 100px;
      height: 200px;
      text-align: center;
      line-height: 50px;
      background-color: rgba(45, 43, 43, 0.5);
      border: 0px;

      a {
        text-decoration: none;
      }

      .nav {
        color: #fff;

        &:hover {
          color: #cd1e19;
        }
      }

    }

    .header-right {
      display: none;
    }

    .header-right.active {
      display: block;
    }
  }


}