Comment implémenter l'effet d'appui long de la souris dans Vue ?

Vue est un framework frontal très populaire, et pendant le processus de développement, certains effets d'interaction utilisateur courants sont souvent impliqués, tels que l'effet d'appui long de la souris. Dans Vue, nous pouvons obtenir l'effet d'appui long de la souris grâce à quelques méthodes simples. Permettez-moi de parler des opérations spécifiques ci-dessous.

La première étape consiste à ajouter un événement mousedown dans le composant Vue et à y définir une minuterie variable pour enregistrer l'heure à laquelle la souris est enfoncée :

<template>
  <div @mousedown="startTimer" @mouseup="clearTimer">按住我</div>
</template>

<script>
  export default {
    data() {
      return {
        timer: null
      }
    },
    methods: {
      startTimer() {
        this.timer = setTimeout(() => {
          console.log('长按事件触发')
        }, 1000)
      },
      clearTimer() {
        clearTimeout(this.timer)
      }
    }
  }
</script>

Dans le code ci-dessus, nous avons défini une méthode startTimer pour répondre à l'événement Mouse press. . Dans cette méthode, nous utilisons la méthode setTimeout pour définir une minuterie et l'attribuer à la variable timer. Une fois la minuterie exécutée, la fonction de rappel de l'événement d'appui long sera déclenchée, réalisant ainsi l'effet d'appui long de la souris.

Cependant, nous devons également effacer le minuteur dans l'événement mouseup, sinon l'événement d'appui long continuera à s'exécuter après le relâchement de la souris. Cela nous oblige à définir une méthode clearTimer pour effacer le minuteur.

Si nous souhaitons effectuer certaines opérations spécifiques lors d'un événement d'appui long, comme l'affichage d'un menu ou l'apparition d'une boîte de dialogue, il nous suffit d'ajouter le code correspondant dans la fonction de rappel. Par exemple :

startTimer() {
  this.timer = setTimeout(() => {
    console.log('长按事件触发')
    alert('您按下了鼠标超过 1 秒钟')
  }, 1000)
}

Le code ci-dessus fera apparaître une boîte de dialogue lorsque l'événement d'appui long est déclenché, indiquant à l'utilisateur que la souris a été enfoncée pendant plus d'une seconde.

Enfin, ce que nous devons noter est que si nous utilisons l'événement de pression longue sur le terminal mobile, nous devons remplacer l'événement mousedown par l'événement touchstart et l'événement mouseup par l'événement touchend pour garantir que l'événement de pression longue peut se déclencher normalement sur l’appareil mobile.

Pour résumer, la méthode d'implémentation d'un événement d'appui long sur la souris dans Vue est très simple. Il vous suffit de définir une minuterie, de déterminer si l'événement d'appui long est déclenché dans un certain laps de temps et d'effacer la minuterie à la fin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!