纯前端，滑块验证

工作需要前端做验证，

就在网上找了一款插件 vue-drag-verify

样式蛮好看的，所以就选择了这个插件

安装依赖：

npm install vue-drag-verify --save

代码部分：

<template>
  <div>
    <el-button></el-button>
    <p>
      
      dksal;
      <i class="el-icon-arrow-right"></i>
    </p>
    <dragVeriyf
       :height="height"
       :width="width" 
			 :text="text" 
			 :success-text="successText" 
			 :background="background" 
			 :progress-bar-bg="progressBarBg" 
			 :completed-bg="completedBg" 
			 :handler-bg="handlerBg" 
			 :handler-icon="handlerIcon" 
			 :text-size="textSize" 
			 :success-icon="successIcon" 
			 :circle="getShape"
       @passcallback='backclick'
    >
    </dragVeriyf>
  </div>
</template>

<script>
import dragVeriyf from 'vue-drag-verify'
export default {
  name: 'HelloWorld',
  components:{
    dragVeriyf
  },
  data () {
    return {
      width:400,
      height:60,
      text:'将滑块滑动到右边',
      successText:'验证成功',
      background:'#CCCCCC',
      progressBarBg:'#FFFF99',
      completedBg:'#63C763',
      handlerBg:'red',
      getShape:true,
      successIcon:'el-icon-check',
      handlerIcon:'el-icon-arrow-right',
      textSize:'20'
      

    }
  },
  methods:{
    backclick(res){
      console.log(res)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

略微感觉不是很好用，我就自己提了个组件出来

效果图：

组件地址：
https://gitee.com/mangseng666/slidercangku.git

就酱~~~

补充： 我主要是做移动端的验证，在使用过程中出现了一些小问题，移动端只有苹果手机可以滑动，安卓浏览器都无法滑动这个问题，在网上搜了一下解决方案，主要是检查，外部包围是否有写overflow:hidden,和 height:100%。这个方法待测试。 2020.07.25.10.08

补充：上面的方法没有效果，安卓端无法滑动的原因是因为浏览器有默认的左右滑动会切换到上下一页，需要在滑动的时候禁止浏览器这一行为。代码在修改

 var xStart, xEnd, yStart, yEnd;

    window.addEventListener("touchstart", function (evt) {
      xStart = evt.touches[0].pageX;
      yStart = evt.touches[0].pageY;
      
    }, {passive:false}),

    window.addEventListener('touchmove', function (evt) {
      // console.log()
      xEnd = evt.touches[0].pageX;
      yEnd = evt.touches[0].pageY;
      
      //左右滑动
      if(Math.abs(xStart - xEnd) > Math.abs(yStart - yEnd)){
          evt.preventDefault();
        }
    }, {passive:false})

然后记得移除监听事件的时候需要这样写哦

beforeDestroy(){
    window.removeEventListener("touchstart", {passive:false})
    window.removeEventListener("touchmove" , {passive:false})
  }