Bagaimana untuk melaksanakan fungsi pengesahan gelongsor dalam Vue-View.js-php.cn

Bagaimana untuk melaksanakan fungsi pengesahan gelongsor dalam Vue

王林

Lepaskan： 2023-11-07 09:19:43

asal

648 orang telah melayarinya

Bagaimana untuk melaksanakan fungsi pengesahan gelongsor dalam Vue

Cara melaksanakan fungsi pengesahan gelongsor dalam Vue

Pengesahan gelongsor ialah kaedah pengesahan biasa dan digunakan secara meluas dalam log masuk pengguna, pendaftaran, ulasan dan senario lain. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk melaksanakan fungsi pengesahan gelongsor mudah dan menyediakan contoh kod khusus.

Pertama, kita perlu memasang rangka kerja Vue. Vue boleh dipasang melalui arahan npm:

npm install vue

Salin selepas log masuk

Seterusnya, kami mencipta contoh Vue dan mentakrifkan data dan kaedah yang diperlukan. Dalam fungsi pengesahan gelongsor ini, kita memerlukan bendera untuk menentukan sama ada pengesahan telah selesai dan pembolehubah untuk merekodkan kedudukan peluncur.

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;
    }
  }
});

Salin selepas log masuk

Dalam kod di atas, isVerified digunakan untuk menentukan sama ada pengesahan telah selesai dan startX dan endX digunakan untuk merekodkan kedudukan permulaan daripada peluncur masing-masing. Kaedah handleMouseDown digunakan untuk merekodkan kedudukan apabila tetikus ditekan, kaedah handleMouseMove digunakan untuk merekodkan kedudukan apabila tetikus dialihkan dan handleMouseUp Kaedah digunakan untuk mengesahkan gelongsor Periksa sama ada kedudukan blok memenuhi keperluan dan kemas kini nilai isVerified Kaedah reset digunakan untuk menetapkan semula peluncur kedudukan. 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>

Salin selepas log masuk

在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;
}

Salin selepas log masuk

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

Seterusnya, kami mencipta elemen yang mengandungi butang gelangsar dan pengesahan dalam HTML dan mengikat kaedah pengendalian acara yang sepadan:

<!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>

Salin selepas log masuk

Dalam CSS, kami boleh menambah beberapa gaya untuk menentukan penampilan komponen pengesahan gelongsor:

rrreee

Dalam kod di atas, gelangsar-bekas ialah bekas untuk peluncur dan butang pengesahan, gelangsar ialah peluncur dan butang-sahkan ialah butang pengesahan , mesej-kejayaan ialah mesej gesaan untuk pengesahan yang berjaya.

Akhir sekali, kami memperkenalkan Vue dan fail di mana kod di atas terletak dalam index.html untuk melihat kesan fungsi pengesahan gelongsor. 🎜rrreee🎜Apabila kedudukan peluncur melebihi ambang tertentu (di sini ditetapkan kepada 50 piksel), pengesahan gelongsor akan berjaya dan mesej kejayaan pengesahan akan dipaparkan. 🎜🎜Melalui langkah di atas, kami telah berjaya melaksanakan fungsi pengesahan gelongsor dalam Vue. Fungsi ini boleh digunakan dengan mudah pada pelbagai senario yang memerlukan pengesahan untuk melindungi keselamatan maklumat pengguna. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pengesahan gelongsor dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!