改写标题：根据屏幕宽度发出 Vue.js 事件

Question

我从侧边栏中获得了以下代码。单击任何链接时，我还会向根组件发出一个事件，然后调用一个函数来隐藏侧边栏。这运行良好，但现在我希望仅当屏幕宽度小于 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来检查当前视口的宽度。然而，全局范围变量在模板中不可用，因为它的范围仅限于您的组件。您可以创建一个处理程序方法：

sssccc

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

sssccc

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

在 Vue 2 中，还建议使用 kebab-case事件名称。