Vue에서 슬라이딩 검증 기능을 구현하는 방법-View.js-php.cn

집

웹 프론트엔드

View.js

Vue에서 슬라이딩 검증 기능을 구현하는 방법

王林

Nov 07, 2023 am 09:19 AM

vue 스와이프 인증 성취하다

Vue에서 슬라이딩 검증 기능을 구현하는 방법

슬라이딩 검증은 일반적인 검증 방법이며 사용자 로그인, 등록, 댓글 및 기타 시나리오에서 널리 사용됩니다. 이 글에서는 Vue 프레임워크를 사용하여 간단한 슬라이딩 검증 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 Vue 프레임워크를 설치해야 합니다. Vue는 npm 명령을 통해 설치할 수 있습니다:

npm install vue

로그인 후 복사

다음으로 Vue 인스턴스를 생성하고 필요한 데이터와 메서드를 정의합니다. 이 슬라이딩 검증 함수에는 검증 완료 여부를 판별하는 플래그와 슬라이더의 위치를 기록하는 변수가 필요합니다.

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

로그인 후 복사

위 코드에서는 isVerified를 사용하여 인증 완료 여부를 확인하고, startX, endX를 사용하여 시작 위치를 기록합니다. 슬라이더의 각각과 끝 위치. handleMouseDown 메서드는 마우스를 눌렀을 때의 위치를 기록하는 데 사용되고 handleMouseMove 메서드는 마우스가 움직일 때의 위치를 기록하는 데 사용되며 handleMouseUp 메소드는 블록의 위치가 요구 사항을 충족하는지 확인하고 isVerified 값을 업데이트하는 데 사용됩니다. 슬라이더 위치. 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

다음으로 HTML에서 슬라이더와 유효성 검사 버튼이 포함된 요소를 만들고 해당 이벤트 처리 방법을 바인딩합니다.

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

로그인 후 복사

CSS에서는 슬라이딩 유효성 검사 구성 요소의 모양을 정의하는 몇 가지 스타일을 추가할 수 있습니다.

rrreee

위 코드에서 slider-container는 슬라이더와 확인 버튼의 컨테이너이고, slider는 슬라이더이고 verify-button은 확인 버튼입니다. , success-message는 성공적인 확인을 위한 프롬프트 메시지입니다.

마지막으로 슬라이딩 검증 기능의 효과를 보기 위해 Vue와 index.html에 위 코드가 위치한 파일을 소개합니다. 🎜rrreee🎜슬라이더의 위치가 특정 임계값(여기서는 50픽셀로 설정)을 초과하면 슬라이딩 인증이 성공하고 인증 성공 메시지가 표시됩니다. 🎜🎜위의 단계를 통해 Vue에서 슬라이딩 검증 기능을 성공적으로 구현했습니다. 이 기능은 사용자 정보의 보안을 보호하기 위해 검증이 필요한 다양한 시나리오에 쉽게 적용할 수 있습니다. 🎜

위 내용은 Vue에서 슬라이딩 검증 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1664

Cakephp 튜토리얼

1423

라라벨 튜토리얼

1317

PHP 튜토리얼

1268

C# 튜토리얼

1248

Related knowledge

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

Vue 용 버튼에 기능을 추가하는 방법 Apr 08, 2025 am 08:51 AM

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

Vue에서 시계를 사용하는 방법 Apr 07, 2025 pm 11:36 PM

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

Vue가 이전 페이지로 돌아 오는 방법 Apr 07, 2025 pm 11:30 PM

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

Vue 다중 페이지 개발은 무엇을 의미합니까? Apr 07, 2025 pm 11:57 PM

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

React vs. Vue : Netflix는 어떤 프레임 워크를 사용합니까? Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)