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;
    }
  }


}