欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn)

 更新時(shí)間：2024年06月14日 15:59:10   作者：生活真難  
在登錄頁(yè)面需要啟動(dòng)向右滑塊驗(yàn)證功能,遇到這樣的需求怎么實(shí)現(xiàn)呢,下面小編通過(guò)示例代碼給大家分享Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn),感興趣的朋友一起看看吧

1、思路

1、在登錄頁(yè)面需要啟動(dòng)向右滑塊驗(yàn)證

2、效果圖

3、文章地址：滑動(dòng)驗(yàn)證碼的實(shí)現(xiàn)-vue-simple-verify

2、成分分析

1、由三塊構(gòu)成，分別是底部條、拖動(dòng)條、拖動(dòng)移動(dòng)部分

2、底部條：整體容器，包括背景、邊框和文字（請(qǐng)按住滑塊，拖動(dòng)到最右邊）

3、拖動(dòng)條：圖片+邊框+背景色即可

4、完成部分：背景、邊框和文字（驗(yàn)證完成）

3、事件分析

1、鼠標(biāo)按下事件：記錄鼠標(biāo)位置以及狀態(tài)

2、鼠標(biāo)移動(dòng)事件：計(jì)算滑塊位置

3、鼠標(biāo)離開(kāi)事件：更新?tīng)顟B(tài)至初始狀態(tài)

4、鼠標(biāo)抬起事件：更新?tīng)顟B(tài)至初始狀態(tài)

4、效果圖

5、代碼

1、SlideVerify.vue文件

<template>
  <div
    ref="sliderContainer"
    @mousemove="onMouseMove"
    @mouseup="onMouseUp"
    class="slider-verify-container"
    @mouseleave="onMouseLeave"
  >
    <span v-if="blockState === 0">請(qǐng)按住滑塊，拖動(dòng)到最右邊</span>
    <div
      @mousedown="onMouseDown"
      :style="{ left: leftP }"
      class="slider-verify-block"
    />
    <div :style="{ width: leftP }" class="slider-verify-complete">
      <span v-if="blockState === 2">驗(yàn)證成功</span>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from "vue";
const emit = defineEmits(["success", "failed"]);
const leftP = ref("0");
const blockState = ref(0);
const startP = ref(undefined);
const sliderContainer = ref(undefined);
const onMouseDown = (e) => {
  if (blockState.value !== 2) {
    leftP.value = "0";
    blockState.value = 1;
    startP.value = {
      clientX: e.clientX,
    };
  } else {
    leftP.value = "0";
    blockState.value = 0;
  }
};
const onMouseMove = (e) => {
  if (blockState.value === 1) {
    let width = e.clientX - startP.value.clientX;
    if (width + 56 > 400) {
      leftP.value = 400 - 56 + "px";
      blockState.value = 2;
      emit("success");
    } else {
      leftP.value = width + "px";
    }
  }
};
const onMouseUp = (e) => {
  if (blockState.value !== 2) {
    leftP.value = "0";
    blockState.value = 0;
    emit("failed");
  }
};
const onMouseLeave = (e) => {
  if (blockState.value !== 2) {
    leftP.value = "0";
    blockState.value = 0;
    emit("failed");
  }
};
</script>
<style lang="scss" scoped>
.slider-verify-container {
  width: 100%;
  height: 56px;
  background-color: transparent;
  position: relative;
  border: solid 1px #20cccf;
  text-align: center;
  color: #20cccf;
  line-height: 56px;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.slider-verify-complete {
  width: 0;
  height: 56px;
  position: absolute;
  background-color: #00e6f14f;
  left: 0;
  top: 0;
}
.slider-verify-block {
  width: 56px;
  height: 56px;
  background-image: url("@/assets/images/login6/arrow.png");
  background-color: white;
  position: absolute;
  left: 0;
  top: -1px;
  border: solid 1px #20cccf;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
}
</style>

2、調(diào)用代碼

<slide-verify @success="onVerifySuccess" @failed="onVerifyFailed" />

到此這篇關(guān)于Vue3滑動(dòng)到最右驗(yàn)證功能的文章就介紹到這了,更多相關(guān)Vue3滑動(dòng)到最右驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論