Réécrire le titre : émettre des événements Vue.js en fonction de la largeur de l'écran

Question

J'ai obtenu le code suivant dans la barre latérale. Lorsqu'un lien est cliqué, j'émets également un événement vers le composant racine, puis j'appelle une fonction pour masquer la barre latérale. Cela fonctionne bien, mais maintenant je veux que l'événement soit émis uniquement lorsque la largeur de l'écran est inférieure à 768 pixels afin que l'événement ne puisse être émis que lorsque je souhaite que la fonction soit appelée.

<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

Vous pouvez utiliser window.innerWidth pour vérifier la largeur de la fenêtre actuelle. Cependant, une variable de portée globale n'est pas disponible dans les modèles car sa portée est limitée à votre composant. Vous pouvez créer une méthode de gestionnaire :

sssccc

Ou créez une variable calculée pour définir si la largeur est en dessous du seuil :

sssccc

Personnellement, je choisirais la première option afin que vous n'ayez à la vérifier qu'une seule fois.

Dans Vue 2, il est également recommandé d'utiliser le kebab-case event name.