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

本文实例为大家分享了vue滑动解锁组件的使用，供大家参考，具体内容如下
这是一个pc端的滑动解锁组件
效果图：

文章图片

话不多说，直接上代码
html部分

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.offsetWidththis.slidingBlockW = this.$refs.slidingBlock.offsetWidththis.distance = 100 - (this.slidingBlockW / this.spoutW) * 100}this.sliding.X = e.x// 添加鼠标的移动事件document.addEventListener('mousemove', e => {if (this.sliding.isDown) {this.move.X = e.xif (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 = 0document.removeEventListener('mousemove', null, false)return}}e.preventDefault()})// 松开鼠标document.onmouseup = e => {if (this.place == this.distance) {this.$emit('setVerify', true)} else {this.sliding.isDown = falsethis.place = 0this.$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(你的图片); }

【vue滑动解锁组件使用方法详解】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。