本文实例为大家分享了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(你的图片); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。