vue 滑块验证 移动端

上篇是pc端的滑块验证，这篇是我自己写的移动端的，亲测在ipad上可以，跟上篇差不多，但是在这篇里多了判断是pc端还是移动端的代码，相应的事件也会不一样。

//这是判断是啥pc还是移动端的方法
os(){
    
    
  	var ua = navigator.userAgent,
    isWindowsPhone = /(?:Windows Phone)/.test(ua),
    isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
    isAndroid = /(?:Android)/.test(ua),
    isFireFox = /(?:Firefox)/.test(ua),
    isChrome = /(?:Chrome|CriOS)/.test(ua),
    isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
    isPhone = /(?:iPhone)/.test(ua) && !isTablet,
    isPc = !isPhone && !isAndroid && !isSymbian;
	if(isTablet){
    
    
		return 'Tablet'
	}else if(isPc){
    
    
		return 'pc'
	}
},
created(){
    
    
		if(this.os()=='Tablet'){
    
    
			this.isPC = false
		}else if(this.os()=='pc'){
    
    
			this.isPC = true
		}
	},

接下来是vue代码

<template>
  <div class="jc-component__range">
    <div class="jc-range" :class="rangeStatus?'success':''" >
    	<i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon" v-if="isPC"></i>
    	<i @touchstart="rangeMoveIpad" :class="rangeStatus?successIcon:startIcon" v-else></i>
    	{
    
    {
    
    rangeStatus?successText:startText}}
    </div>
  </div>
</template>

鞋面是移动端滑动的代码

rangeMoveIpad(e){
    
    
			let ele = e.target;
			let startX = e.changedTouches[0].clientX;
			let eleWidth = ele.offsetWidth;
			let parentWidth =  ele.parentElement.offsetWidth;
			let MaxX = parentWidth - eleWidth;
			if(this.rangeStatus){
    
    //不运行
				return false;
			}
			document.ontouchmove = (e) => {
    
    
				let endX = e.changedTouches[0].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.ontouchend = ()=> {
    
    
				if(this.disX !== MaxX){
    
    
					ele.style.transition = '.1s 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.ontouchmove = null;
				document.ontouchend = null;
			}
        },

又发现好方法的小伙伴可以一起讨论哦！！！