vue滑动解锁组件使用方法详解

本文实例为大家分享了vue滑动解锁组件的使用，供大家参考，具体内容如下

这是一个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(你的图片);}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。