Maison > Article > interface Web > Comment implémenter la fonction de vérification glissante dans Vue

Comment implémenter la fonction de vérification glissante dans Vue

王林original: 2023-11-07 09:19:43594parcourir

Comment implémenter la fonction de vérification coulissante dans Vue

La vérification coulissante est une méthode de vérification courante et est largement utilisée dans la connexion des utilisateurs, l'enregistrement, les commentaires et d'autres scénarios. Cet article expliquera comment utiliser le framework Vue pour implémenter une fonction de vérification glissante simple et fournira des exemples de code spécifiques.

Tout d'abord, nous devons installer le framework Vue. Vue peut être installé via la commande npm :

npm install vue

Ensuite, nous créons une instance Vue et définissons les données et méthodes requises. Dans cette fonction de vérification coulissante, nous avons besoin d'un indicateur pour déterminer si la vérification est terminée et d'une variable pour enregistrer la position du curseur.

new Vue({
  el: "#app",
  data: {
    isVerified: false,
    startX: 0,
    endX: 0
  },
  methods: {
    handleMouseDown(event) {
      this.startX = event.clientX;
    },
    handleMouseMove(event) {
      if (this.startX === 0) return;
      this.endX = event.clientX;
    },
    handleMouseUp() {
      if (this.startX === 0 || Math.abs(this.endX - this.startX) < 50) {
        this.reset();
        return;
      }
      this.isVerified = true;
    },
    reset() {
      this.startX = 0;
      this.endX = 0;
    }
  }
});

Dans le code ci-dessus, isVerified est utilisé pour déterminer si la vérification est terminée, et startX et endX sont utilisés pour enregistrer la position de départ du curseur respectivement et la position finale. La méthode handleMouseDown est utilisée pour enregistrer la position lorsque la souris est enfoncée, la méthode handleMouseMove est utilisée pour enregistrer la position lorsque la souris est déplacée et la méthode handleMouseUp La méthode est utilisée pour vérifier la diapositive. Vérifiez si la position du bloc répond aux exigences et mettez à jour la valeur isVerified. La méthode reset est utilisée pour réinitialiser la valeur. position du curseur. isVerified用于判断是否完成验证，startX和endX分别用于记录滑块的起始位置和结束位置。handleMouseDown方法用于记录鼠标按下时的位置，handleMouseMove方法用于记录鼠标移动时的位置，handleMouseUp方法用于验证滑块的位置是否满足要求并更新isVerified值，reset方法用于重置滑块位置。

接下来，我们在HTML中创建一个包含滑块和验证按钮的元素，并绑定相应的事件处理方法：

<div id="app">
  <div class="slider-container">
    <div class="slider" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"></div>
    <div class="verify-button" v-if="!isVerified">验证</div>
    <div class="success-message" v-else>验证成功</div>
  </div>
</div>

在CSS中，我们可以添加一些样式来定义滑动验证组件的外观：

.slider-container {
  width: 300px;
  height: 50px;
  background-color: #f0f0f0;
  position: relative;
}

.slider {
  width: 50px;
  height: 50px;
  background-color: #428bca;
  position: absolute;
  cursor: pointer;
}

.verify-button {
  width: 50px;
  height: 50px;
  background-color: #fff;
  line-height: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.success-message {
  width: 100%;
  height: 100%;
  background-color: #5cb85c;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

以上代码中，slider-container是滑块和验证按钮的容器，slider是滑块，verify-button是验证按钮，success-message

Ensuite, nous créons un élément contenant le slider et le bouton de validation en HTML et lions la méthode de gestion des événements correspondante :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滑动验证</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div class="slider-container">
      <div class="slider" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"></div>
      <div class="verify-button" v-if="!isVerified">验证</div>
      <div class="success-message" v-else>验证成功</div>
    </div>
  </div>
  <script src="main.js"></script>
</body>
</html>

En CSS, nous pouvons ajouter quelques styles pour définir l'apparence du composant de validation glissante :

rrreee

Dans le au-dessus du code, slider-container est le conteneur du curseur et du bouton de vérification, slider est le curseur et verify-button est le bouton de vérification , success-message est le message d'invite pour une vérification réussie.

Enfin, nous introduisons Vue et le fichier où se trouve le code ci-dessus dans index.html pour voir l'effet de la fonction de vérification glissante. 🎜rrreee🎜Lorsque la position du curseur dépasse un certain seuil (ici fixé à 50 pixels), la vérification coulissante réussira et un message de réussite de la vérification s'affichera. 🎜🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de vérification glissante dans Vue. Cette fonction peut être facilement appliquée à divers scénarios nécessitant une vérification pour protéger la sécurité des informations utilisateur. 🎜

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!

css html npm 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter l'effet de chargement global dans VueArticle suivant：Comment implémenter l'effet de chargement global dans Vue

Articles Liés

Voir plus