Schreiben Sie den Titel neu: Vue.js-Ereignisse basierend auf der Bildschirmbreite ausgeben

Question

Ich habe den folgenden Code aus der Seitenleiste erhalten. Wenn auf einen Link geklickt wird, sende ich außerdem ein Ereignis an die Stammkomponente und rufe dann eine Funktion auf, um die Seitenleiste auszublenden. Das funktioniert einwandfrei, aber jetzt möchte ich, dass das Ereignis nur ausgegeben wird, wenn die Bildschirmbreite weniger als 768 Pixel beträgt, sodass das Ereignis nur ausgegeben werden kann, wenn die Funktion aufgerufen werden soll.

<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来检查当前视口的宽度。然而，全局范围变量在模板中不可用，因为它的范围仅限于您的组件。您可以创建一个处理程序方法：

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

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

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