vue實現登錄時滑塊驗證
本文實例為大傢分享瞭vue實現登錄時滑塊驗證的具體代碼,供大傢參考,具體內容如下
1.效果圖
2. 新建 SliderCheck.vue組件
<template> <!-- 拖動驗證--> <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: { // 成功之後的函數 successFun: { type: Function }, //成功圖標 successIcon: { type: String, default: 'el-icon-success' }, //成功文字 successText: { type: String, default: '驗證成功' }, //開始的圖標 startIcon: { type: String, default: 'el-icon-d-arrow-right' }, //開始的文字 startText: { type: String, default: '請拖住滑塊,拖動到最右邊' }, //失敗之後的函數 errorFun: { type: Function }, //或者用值來進行監聽 status: { type: String } }, data() { return { disX: 0, rangeStatus: false } }, methods: { //滑塊移動 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) { //不運行 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) { //減去滑塊的寬度,體驗效果更好 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)' //執行成功的函數 this.errorFun && this.errorFun() } else { this.rangeStatus = true if (this.status) { this.$parent[this.status] = true } //執行成功的函數 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註冊使用
<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:{ // 滑塊驗證成功回調 handleSuccessFun() { console.log('滑動成功') }, // 滑塊驗證失敗回調 handleErrorFun() { console.log('滑動失敗') } } } </script> <style lang="scss" scoped> </style>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。