Vue根据屏幕宽度动态控制Header类名问题求助

需求说明 #

开发Vue项目时需实现以下导航类控制逻辑：

• 当Header使用mode-side布局类（对应需求中的vertical-navigation-mode-side）时，需为Header添加open类，且该类的显示受mobileMode状态控制；
• 当布局类切换为mode-over（对应需求中的vertical-navigation-mode-over）时，必须强制移除Header的open类，适配响应式场景。

现有组件代码 #

App.vue #

<template>
  <header class="dark" :class="type">Menu</header>
  <section class="flex">
    <TopHeader/>
    <div class="flex">
      <RouterView/>
    </div>
    <Footer/>
  </section>
</template>
<script setup>
import TopHeader from "./layouts/TopHeader.vue";
import Footer from "./layouts/Footer.vue";
import {computed, onMounted, onUnmounted, provide, ref} from "vue";

const mobileMode = ref(false)
provide('mobileMode', mobileMode)

function useBreakpoints() {
  let windowWidth = ref(window.innerWidth)

  const onWidthChange = () => windowWidth.value = window.innerWidth
  onMounted(() => window.addEventListener('resize', onWidthChange))
  onUnmounted(() => window.removeEventListener('resize', onWidthChange))

  const type = computed(() => {
    if (windowWidth.value < 550) return 'mode-over'
    if (windowWidth.value >= 550 && windowWidth.value < 1200) return 'mode-over'
    if (windowWidth.value >= 1200) return 'mode-side'
    return null; 
  })
  const width = computed(() => windowWidth.value)
  return {width, type}
}

const {width, type} = useBreakpoints()
</script>

TopHeader.vue #

<template>
  <div class="relative">
    <button @click="handleStatus">MODE</button>
  </div>
</template>

<script setup>
import {inject} from "vue";
const mobileMode = inject('mobileMode');
const handleStatus = () => mobileMode.value = !mobileMode.value
</script>

Footer.vue #

<template>
  <div class="relative">
    <span class="font-medium text-secondary">FOOTER</span>
  </div>
  <div class="navigation-overlay" v-if="showMenu===true" @click="handleStatus"></div>
</template>

<script setup>
import {inject} from "vue";

const showMenu = inject('showMenu');
const handleStatus = () => showMenu.value = false
</script>

<style scoped>

</style>

解决方案 #

1. 重构App.vue的状态与类绑定逻辑 #

修改App.vue，新增状态管理和类计算逻辑，实现需求中的类控制规则：

<template>
  <!-- 用计算属性绑定所有Header类 -->
  <header :class="headerClasses">Menu</header>
  <section class="flex">
    <TopHeader/>
    <div class="flex">
      <RouterView/>
    </div>
    <Footer/>
  </section>
</template>
<script setup>
import TopHeader from "./layouts/TopHeader.vue";
import Footer from "./layouts/Footer.vue";
import {computed, onMounted, onUnmounted, provide, ref, watch} from "vue";

const mobileMode = ref(false)
// 补充Footer依赖的showMenu状态
const showMenu = ref(false)
provide('mobileMode', mobileMode)
provide('showMenu', showMenu)

function useBreakpoints() {
  let windowWidth = ref(window.innerWidth)

  const onWidthChange = () => windowWidth.value = window.innerWidth
  onMounted(() => window.addEventListener('resize', onWidthChange))
  onUnmounted(() => window.removeEventListener('resize', onWidthChange))

  // 简化响应式判断逻辑
  const type = computed(() => windowWidth.value >= 1200 ? 'mode-side' : 'mode-over')
  const width = computed(() => windowWidth.value)
  return {width, type}
}

const {width, type} = useBreakpoints()

// 计算Header的完整类列表
const headerClasses = computed(() => {
  const baseClasses = ['dark', type.value]
  // 仅在mode-side模式下，根据mobileMode添加open类
  if (type.value === 'mode-side' && mobileMode.value) {
    baseClasses.push('open')
  }
  return baseClasses.join(' ')
})

// 监听布局类型变化，切换到mode-over时重置状态
watch(type, (newType) => {
  if (newType === 'mode-over') {
    mobileMode.value = false
    showMenu.value = false
  }
})

// 同步mobileMode与showMenu状态，保证交互一致性
watch(mobileMode, (val) => {
  showMenu.value = val
})
</script>

2. 关键逻辑说明 #

• 类绑定控制：通过headerClasses计算属性统一管理Header的所有类，避免多绑定冲突，逻辑更清晰；
• 响应式适配：监听type变化，一旦切换到mode-over模式，立即重置mobileMode和showMenu，强制移除open类；
• 状态同步：关联mobileMode与showMenu状态，确保点击Header按钮时，Footer遮罩的显示/隐藏行为一致。

内容的提问来源于stack exchange，提问作者kralyolda