如何根据屏幕尺寸条件性添加事件监听器？

好问题！在Vue里实现这种根据屏幕尺寸动态控制点击事件的需求，有几种简洁且实用的方案，我给你梳理一下：

方案一：点击时直接判断屏幕宽度（简单直接） #

这种方式不需要额外监听窗口变化，每次点击时实时判断当前屏幕尺寸，再决定是否执行逻辑和阻止默认行为：

<a href="#" @click="handleNavClick"> Link </a>

<script>
export default {
  data() {
    return {
      active: false
    }
  },
  methods: {
    handleNavClick(e) {
      // 这里以768px作为移动端/桌面端的分界，你可以根据需求调整
      if (window.innerWidth < 768) {
        e.preventDefault(); // 移动端阻止锚点默认行为
        this.active = !this.active; // 切换状态
      }
      // 桌面端啥也不做，直接依赖hover交互即可
    }
  }
}
</script>

方案二：响应式绑定点击事件（适配窗口 resize） #

如果需要窗口大小变化时实时切换交互逻辑，可以先维护一个isMobile的响应式状态，再通过动态指令绑定来控制点击事件：

<template>
  <a 
    href="#" 
    <!-- 动态绑定事件：移动端绑定带prevent的点击逻辑，桌面端绑定空对象（无事件） -->
    v-on="isMobile ? { 'click.prevent': () => active = !active } : {}"
  > 
    Link 
  </a>
</template>

<script>
export default {
  data() {
    return {
      active: false,
      isMobile: window.innerWidth < 768 // 初始化时判断一次
    }
  },
  mounted() {
    // 监听窗口resize事件，实时更新移动端状态
    window.addEventListener('resize', this.updateScreenSize);
  },
  beforeUnmount() {
    // 组件销毁前移除监听，避免内存泄漏
    window.removeEventListener('resize', this.updateScreenSize);
  },
  methods: {
    updateScreenSize() {
      this.isMobile = window.innerWidth < 768;
    }
  }
}
</script>

方案三：Vue 3 Composition API 写法 #

如果你的项目用的是Vue 3，可以用更简洁的组合式API实现：

<template>
  <a 
    href="#" 
    v-on="isMobile ? { 'click.prevent': toggleActive } : {}"
  > 
    Link 
  </a>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const active = ref(false);
const isMobile = ref(window.innerWidth < 768);

const toggleActive = () => {
  active.value = !active.value;
};

const updateScreenSize = () => {
  isMobile.value = window.innerWidth < 768;
};

onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
});

onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});
</script>

优化小技巧：防抖处理 resize 事件 #

窗口resize事件会频繁触发，给updateScreenSize加个防抖可以避免不必要的性能消耗：

// 简单的防抖函数
const debounce = (func, delay = 200) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// 在Vue 2中使用防抖
mounted() {
  const debouncedUpdate = debounce(this.updateScreenSize);
  window.addEventListener('resize', debouncedUpdate);
  this.debouncedUpdate = debouncedUpdate; // 存下来用于销毁时移除监听
},
beforeUnmount() {
  window.removeEventListener('resize', this.debouncedUpdate);
}

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