vue滑動解鎖組件使用方法詳解

更新時間：2022年03月03日 11:49:20 作者：qq_34096214

這篇文章主要為大家詳細介紹了vue滑動解鎖組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue滑動解鎖組件的使用，供大家參考，具體內(nèi)容如下

這是一個pc端的滑動解鎖組件

效果圖：

話不多說，直接上代碼

html部分

<template>
? ? <div class="dragVerify">
? ? ? ? <div class="spout" ref="spout">
? ? ? ? ? ? <div
? ? ? ? ? ? ? ? class="slidingBlock"
? ? ? ? ? ? ? ? ref="slidingBlock"
? ? ? ? ? ? ? ? :style="{ left: `${place}%` }"
? ? ? ? ? ? ? ? @mousedown="mousedown($event)"
? ? ? ? ? ? ? ? :class="place < distance ? 'unfinished' : 'complete'"
? ? ? ? ? ? ></div>
? ? ? ? ? ? <div class="succeedBox" :class="place >= distance ? 'succeedText' : ''" :style="{ width: `${place}%` }"></div>
? ? ? ? </div>
? ? </div>
</template>

js部分

export default {
? ? name: 'dragVerify',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? place: 0,
? ? ? ? ? ? sliding: {
? ? ? ? ? ? ? ? isDown: true,
? ? ? ? ? ? ? ? X: 0 // 初始X值
? ? ? ? ? ? },
? ? ? ? ? ? move: {
? ? ? ? ? ? ? ? X: 0 // 移動X值
? ? ? ? ? ? },
? ? ? ? ? ? spoutW: 0,
? ? ? ? ? ? slidingBlockW: 0,
? ? ? ? ? ? distance: 1 // 要移動的距離
? ? ? ? }
? ? },
? ? mounted() {},
? ? methods: {
? ? ? ? // 鼠標事件
? ? ? ? mousedown(e) {
? ? ? ? ? ? if (this.place < this.distance) {
? ? ? ? ? ? ? ? this.sliding.isDown = true
? ? ? ? ? ? ? ? // 計算百分比
? ? ? ? ? ? ? ? this.spoutW = this.$refs.spout.offsetWidth
? ? ? ? ? ? ? ? this.slidingBlockW = this.$refs.slidingBlock.offsetWidth
? ? ? ? ? ? ? ? this.distance = 100 - (this.slidingBlockW / this.spoutW) * 100
? ? ? ? ? ? }
? ? ? ? ? ? this.sliding.X = e.x
? ? ? ? ? ? // 添加鼠標的移動事件
? ? ? ? ? ? document.addEventListener('mousemove', e => {
? ? ? ? ? ? ? ? if (this.sliding.isDown) {
? ? ? ? ? ? ? ? ? ? this.move.X = e.x
? ? ? ? ? ? ? ? ? ? if (this.place >= this.distance) {
? ? ? ? ? ? ? ? ? ? ? ? this.place = this.distance
? ? ? ? ? ? ? ? ? ? } else if (this.place >= 0 && this.place < this.distance) {
? ? ? ? ? ? ? ? ? ? ? ? this.place = ((this.move.X - this.sliding.X) / this.spoutW) * 100
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if (this.place <= 0) {
? ? ? ? ? ? ? ? ? ? ? ? this.place = 0
? ? ? ? ? ? ? ? ? ? ? ? document.removeEventListener('mousemove', null, false)
? ? ? ? ? ? ? ? ? ? ? ? return
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? e.preventDefault()
? ? ? ? ? ? })
? ? ? ? ? ? // 松開鼠標
? ? ? ? ? ? document.onmouseup = e => {
? ? ? ? ? ? ? ? if (this.place == this.distance) {
? ? ? ? ? ? ? ? ? ? this.$emit('setVerify', true)
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? this.sliding.isDown = false
? ? ? ? ? ? ? ? ? ? this.place = 0
? ? ? ? ? ? ? ? ? ? this.$emit('setVerify', false)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

css部分

.dragVerify {
? ? border: 1px solid #e1e1e1;
? ? height: 40px;
? ? background: #eeeeee;
}
.spout {
? ? line-height: 40px;
? ? height: 40px;
? ? /* text-align: center; */
? ? position: relative;
? ? width: 293px;
}
.spout::before {
? ? content: '請按住滑塊，拖動到最右邊';
? ? width: 233px;
? ? top: 0;
? ? right: 0;
? ? bottom: 0;
? ? color: #919593;
? ? font-size: 16px;
? ? text-align: center;
? ? position: absolute;
}
.succeedText::before {
? ? content: '驗證通過';
? ? width: 233px;
? ? top: 0;
? ? right: 0;
? ? bottom: 0;
? ? color: #ffffff;
? ? font-size: 16px;
? ? text-align: center;
? ? position: absolute;
}
.succeedBox {
? ? color: #ffffff;
? ? font-size: 16px;
? ? text-align: center;
? ? line-height: 38px;
? ? height: 38px;
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? right: 0;
? ? bottom: 0;
? ? background: #23b14d;
? ? z-index: 8;
}
.slidingBlock {
? ? width: 60px;
? ? /* height: 38px; */
? ? height: calc(100% - 0.1rem);
? ? border: 1px solid #e1e1e1;
? ? border-top: none;
? ? /* border-bottom: none; */
? ? border-left: none;
? ? background: #ffffff;
? ? position: absolute;
? ? top: 0;
? ? bottom: 0;
? ? left: 0;
? ? /* margin-left: -1px; */
? ? cursor: move;
? ? z-index: 9;
}
.slidingBlock::after {
? ? content: '';
? ? position: absolute;
? ? background-size: 100% 100%;
? ? background-repeat: no-repeat;
? ? width: 20px;
? ? height: 20px;
? ? left: 50%;
? ? top: 50%;
? ? margin-left: -10px;
? ? margin-top: -10px;
}
.unfinished::after {
? ? background-image: url(你的圖片);
}
.complete::after {
? ? background-image: url(你的圖片);
}

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

您可能感興趣的文章: