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

Question

我从边栏中获得了以下代码。单击任何 link 时，我还会向我的根组件发出一个事件，然后调用一个函数来隐藏边栏。这运行良好，但现在我希望仅在屏幕宽度小于 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>

Answer 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 也推荐使用 kebab-case for event names.

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

How to emit event in Vue.js depending on the width of the screen

vue.js