vue實(shí)現(xiàn)登錄時(shí)滑塊驗(yàn)證

更新時(shí)間：2022年03月04日 15:49:52 作者：別搞花里胡哨的

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)登錄時(shí)滑塊驗(yàn)證的具體代碼，供大家參考，具體內(nèi)容如下

1.效果圖

2. 新建 SliderCheck.vue組件

<template>
<!-- ?拖動(dòng)驗(yàn)證-->
? <div class="slider-check-box">
? ? <div class="slider-check" :class="rangeStatus ? 'success' : ''">
? ? ? <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
? ? ? {{ rangeStatus ? successText : startText }}
? ? </div>
? </div>
</template>
<script>
export default {
? props: {
? ? // 成功之后的函數(shù)
? ? successFun: {
? ? ? type: Function
? ? },
? ? //成功圖標(biāo)
? ? successIcon: {
? ? ? type: String,
? ? ? default: 'el-icon-success'
? ? },
? ? //成功文字
? ? successText: {
? ? ? type: String,
? ? ? default: '驗(yàn)證成功'
? ? },
? ? //開(kāi)始的圖標(biāo)
? ? startIcon: {
? ? ? type: String,
? ? ? default: 'el-icon-d-arrow-right'
? ? },
? ? //開(kāi)始的文字
? ? startText: {
? ? ? type: String,
? ? ? default: '請(qǐng)拖住滑塊，拖動(dòng)到最右邊'
? ? },
? ? //失敗之后的函數(shù)
? ? errorFun: {
? ? ? type: Function
? ? },
? ? //或者用值來(lái)進(jìn)行監(jiān)聽(tīng)
? ? status: {
? ? ? type: String
? ? }
? },
? data() {
? ? return {
? ? ? disX: 0,
? ? ? rangeStatus: false
? ? }
? },
? methods: {
? ? //滑塊移動(dòng)
? ? rangeMove(e) {
? ? ? let ele = e.target
? ? ? let startX = e.clientX
? ? ? let eleWidth = ele.offsetWidth
? ? ? let parentWidth = ele.parentElement.offsetWidth
? ? ? let MaxX = parentWidth - eleWidth
? ? ? if (this.rangeStatus) {
? ? ? ? //不運(yùn)行
? ? ? ? return false
? ? ? }
? ? ? document.onmousemove = e => {
? ? ? ? let endX = e.clientX
? ? ? ? this.disX = endX - startX
? ? ? ? if (this.disX <= 0) {
? ? ? ? ? this.disX = 0
? ? ? ? }
? ? ? ? if (this.disX >= MaxX - eleWidth) {
? ? ? ? ? //減去滑塊的寬度,體驗(yàn)效果更好
? ? ? ? ? this.disX = MaxX
? ? ? ? }
? ? ? ? ele.style.transition = '.1s all'
? ? ? ? ele.style.transform = 'translateX(' + this.disX + 'px)'
? ? ? ? e.preventDefault()
? ? ? }
? ? ? document.onmouseup = () => {
? ? ? ? if (this.disX !== MaxX) {
? ? ? ? ? ele.style.transition = '.5s all'
? ? ? ? ? ele.style.transform = 'translateX(0)'
? ? ? ? ? //執(zhí)行成功的函數(shù)
? ? ? ? ? this.errorFun && this.errorFun()
? ? ? ? } else {
? ? ? ? ? this.rangeStatus = true
? ? ? ? ? if (this.status) {
? ? ? ? ? ? this.$parent[this.status] = true
? ? ? ? ? }
? ? ? ? ? //執(zhí)行成功的函數(shù)
? ? ? ? ? this.successFun && this.successFun()
? ? ? ? }
? ? ? ? document.onmousemove = null
? ? ? ? document.onmouseup = null
? ? ? }
? ? }
? }
}
</script>
<style lang="scss" scoped>
$blue: #198eeb;
@mixin jc-flex {
? display: flex;
? justify-content: center;
? align-items: center;
}
.slider-check-box {
? .slider-check {
? ? background-color: #e9e9e9;
? ? position: relative;
? ? transition: 1s all;
? ? user-select: none;
? ? color: #585858;
? ? @include jc-flex;
? ? height: 40px;
? ? &.success {
? ? ? background-color: $blue;
? ? ? color: #fff;
? ? ? i {
? ? ? ? color: $blue;
? ? ? }
? ? }
? ? i {
? ? ? position: absolute;
? ? ? left: 0;
? ? ? width: 50px;
? ? ? height: 100%;
? ? ? color: $blue;
? ? ? background-color: #fff;
? ? ? border: 1px solid #d8d8d8;
? ? ? cursor: pointer;
? ? ? font-size: 24px;
? ? ? @include jc-flex;
? ? }
? }
}
</style>

3.在父組件index.vue注冊(cè)使用

<template>
?? ?<div>
? ? ?? ?<SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck>
? ? </div>
</template>

<script>
import SliderCheck from '@/components/test/SliderCheck'
export default {
? name: "index",
? components:{
? ? SliderCheck,
? },
? data(){
? ? return {},
? methods:{
? ? // 滑塊驗(yàn)證成功回調(diào)
? ? handleSuccessFun() {
? ? ? console.log('滑動(dòng)成功')
? ? },
? ? // 滑塊驗(yàn)證失敗回調(diào)
? ? handleErrorFun() {
? ? ? console.log('滑動(dòng)失敗')
? ? }
? }
?
}
</script>

<style lang="scss" scoped>

</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: