vue實(shí)現(xiàn)登錄時(shí)滑塊驗(yàn)證
本文實(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í)有所幫助,也希望大家多多支持腳本之家。
- Vue前端登錄token信息驗(yàn)證功能實(shí)現(xiàn)
- Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
- vue實(shí)現(xiàn)通過(guò)手機(jī)號(hào)發(fā)送短信驗(yàn)證碼登錄的示例代碼
- vue實(shí)現(xiàn)token登錄驗(yàn)證的完整實(shí)例
- vue登錄頁(yè)面設(shè)置驗(yàn)證碼input框的方法
- vue+Element實(shí)現(xiàn)登錄隨機(jī)驗(yàn)證碼
- vue實(shí)現(xiàn)登錄滑動(dòng)拼圖驗(yàn)證
- 如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能(代碼示例)
相關(guān)文章
Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細(xì)整理)
這篇文章給大家詳細(xì)的整理了Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式,使用vue-router,聲明式-router-link,編程式這三種方法,分別有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09vue-cli 默認(rèn)路由再子路由選中下的選中狀態(tài)問(wèn)題及解決代碼
這篇文章主要介紹了vue-cli 默認(rèn)路由再子路由選中下的選中狀態(tài)問(wèn)題及解決代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)
今天小編就為大家分享一篇vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10vue中Vue.set()的使用以及對(duì)其進(jìn)行深入解析
vue不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性,不過(guò)可以使用Vue.set()方法將響應(yīng)式屬性添加到嵌套的對(duì)象上,下面這篇文章主要給大家介紹了關(guān)于vue中Vue.set()的使用以及對(duì)其進(jìn)行深入解析的相關(guān)資料,需要的朋友可以參考下2023-01-01vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
這篇文章主要介紹了vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12