如何根据屏幕宽度在 Vue.js 中发出事件答案

【问题标题】：How to emit event in Vue.js depending on the width of the screen如何根据屏幕宽度在 Vue.js 中发出事件
【发布时间】：2022-07-06 19:23:53
【问题描述】：

我从侧边栏中获得了以下代码。单击任何链接时，我还会向我的根组件发出一个事件，然后调用一个函数来隐藏侧边栏。这运行良好，但现在我希望仅在屏幕宽度小于 768px 时才发出事件，以便仅在我想调用该函数时才发出事件。

 <div class="side-links">
      <ul>
        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'Home' }"
            >Home</router-link
          >
        </li>
        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'Blog' }"
            >Blog</router-link
          >
        </li>

        <li>
          <router-link @click="$emit('navLinkClicked')" :to="{ name: 'About' }"
            >About</router-link
          >
        </li>
      </ul>
    </div>

【问题讨论】：

标签： vue.js

【解决方案1】：

您可以使用window.innerWidth 来检查当前视口的宽度。但是，全局范围变量在模板中不可用，因为它的范围仅限于您的组件。您可以创建一个处理程序方法：

<script>
  methods: {
    onNavLinkClicked() {
      if (window.innerWidth < 768) {
        this.$emit('navLinkClicked')
      }
    }
  }
</script>
<template>
  <div class="side-links">
    <ul>
      <li>
        <router-link
          @click="onNavLinkClicked"
          :to="{ name: 'Home' }"
        >
          Home
        </router-link
      </li>
    </ul>
  </div>
</template>

或创建一个计算变量来定义宽度是否低于阈值：

<script>
  computed: {
    isMobile() {
      return window.innerWidth < 768;
    }
  }
</script>
<template>
  <div class="side-links">
    <ul>
      <li>
        <router-link
          @click="isMobile ? $emit('navLinkClicked') : null"
          :to="{ name: 'Home' }"
        >
          Home
        </router-link
      </li>
    </ul>
  </div>
</template>

我个人会选择第一个选项，因此您只需检查一次。

在 Vue 2 中也推荐使用kebab-case for event names。

【讨论】：