Comment implémenter la fonction de vérification glissante dans Vue-Voir.js-php.cn

Maison

interface Web

Voir.js

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

王林

Nov 07, 2023 am 09:19 AM

vue滑动验证实现

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

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!

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 connexe

Vue.js vs React: Courbe de facilité d'utilisation et d'apprentissageMay 02, 2025 am 12:13 AM

Vue.js est plus facile à utiliser et a une courbe d'apprentissage en douceur, qui convient aux débutants; React a une courbe d'apprentissage plus abrupte, mais a une forte flexibilité, ce qui convient aux développeurs expérimentés. 1.Vue.js est facile à démarrer avec une simple liaison de données et une conception progressive. 2. Le réact nécessite la compréhension du DOM virtuel et du JSX, mais offre des avantages de flexibilité et de performance plus élevés.

Vue.js vs React: Quel cadre vous convient le mieux?May 01, 2025 am 12:21 AM

Vue.js convient au développement rapide et aux petits projets, tandis que React convient plus à des projets importants et complexes. 1.Vue.js est simple et facile à apprendre, adapté au développement rapide et aux petits projets. 2.React est puissant et adapté à des projets importants et complexes. 3. Les caractéristiques progressives de Vue.js conviennent à l'introduction progressivement des fonctions. 4. Dom composant et virtuel de React de React fonctionnent bien lorsqu'ils traitent des applications complexes de l'interface utilisateur et des données.

Vue.js vs React: une analyse comparative des cadres JavaScriptApr 30, 2025 am 12:10 AM

Vue.js et réagir ont chacun leurs propres avantages et inconvénients. Lors du choix, vous devez considérer de manière approfondie les compétences de l'équipe, la taille du projet et les exigences de performance. 1) Vue.js convient au développement rapide et aux petits projets, avec une faible courbe d'apprentissage, mais les objets imbriqués profonds peuvent causer des problèmes de performance. 2) React convient aux applications grandes et complexes, avec un écosystème riche, mais les mises à jour fréquentes peuvent conduire à des goulots d'étranglement de performance.

Vue.js vs réact: cas d'utilisation et applicationsApr 29, 2025 am 12:36 AM

Vue.js convient aux projets de petite et moyenne taille, tandis que React convient aux grands projets et aux scénarios d'application complexes. 1) Vue.js est facile à utiliser et convient au prototypage rapide et à de petites applications. 2) React a plus d'avantages dans la gestion de la gestion complexe des états et de l'optimisation des performances, et convient aux grands projets.

Vue.js vs React: Comparaison des performances et de l'efficacitéApr 28, 2025 am 12:12 AM

Vue.js et réagir ont chacun leurs propres avantages: Vue.js convient aux petites applications et à un développement rapide, tandis que React convient aux grandes applications et à la gestion complexe de l'État. 1.vue.js réalise la mise à jour automatique via un système réactif, adapté aux petites applications. 2.React utilise des algorithmes Virtual DOM et Diff, qui conviennent aux applications grandes et complexes. Lors de la sélection d'un cadre, vous devez considérer les exigences du projet et la pile de technologie d'équipe.

Vue.js vs React: Communauté, écosystème et soutienApr 27, 2025 am 12:24 AM

Vue.js et réagir ont chacun leurs propres avantages, et le choix doit être basé sur les exigences du projet et la pile de technologie d'équipe. 1. Vue.js est adapté à la communauté, fournissant des ressources d'apprentissage riches, et l'écosystème comprend des outils officiels tels que VueroUter, qui sont soutenus par l'équipe officielle et la communauté. 2. La communauté React est biaisée vers les applications d'entreprise, avec un écosystème solide, et les soutiens fournis par Facebook et sa communauté, et a des mises à jour fréquentes.

React et Netflix: Explorer la relationApr 26, 2025 am 12:11 AM

Netflix utilise React pour améliorer l'expérience utilisateur. 1) Les fonctionnalités composantes de React aident Netflix à diviser l'interface utilisateur complexe en modules gérables. 2) Virtual DOM optimise les mises à jour de l'interface utilisateur et améliore les performances. 3) La combinaison de Redux et GraphQL, Netflix gère efficacement l'état de l'application et le flux de données.

Vue.js vs frameworks backend: clarifier la distinctionApr 25, 2025 am 12:05 AM

Vue.js est un cadre frontal, et le cadre back-end est utilisé pour gérer la logique côté serveur. 1) Vue.js se concentre sur la création d'interfaces utilisateur et simplifie le développement par la liaison des données composante et réactive. 2) Les cadres arrière tels que Express et Django gèrent les demandes HTTP, les opérations de base de données et la logique métier, et exécutent sur le serveur.

See all articles