vue实现简单滑块验证

本文实例为大家分享了vue滑块验证的实现，代码如下

<template>
  <div class="drag"
       ref="dragdiv">
    <div class="drag_bg"></div>
    <div class="drag_text">{{confirmwords}}</div>
    <div ref="movediv"
         @mousedown="mousedownfn($event)"
         :class="{'handler_ok_bg':confirmsuccess}"
         class="handler handler_bg"
         style="position: absolute;top: 0px;left: 0px;"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      beginclientx: 0, /* 距离屏幕左端距离 */
      mousemovestata: false, /* 触发拖动状态  判断 */
      maxwidth: '', /* 拖动最大宽度，依据滑块宽度算出来的 */
      confirmwords: '拖动滑块验证', /* 滑块文字 */
      confirmsuccess: false /* 验证成功判断 */
    }
  },
  methods: {
    mousedownfn: function (e) {
      if (!this.confirmsuccess) {
        e.preventdefault && e.preventdefault() // 阻止文字选中等 浏览器默认事件
        this.mousemovestata = true
        this.beginclientx = e.clientx
      }
    }, // mousedoen 事件
    successfunction () {
      this.confirmsuccess = true
      this.confirmwords = '验证通过'
      if (window.addeventlistener) {
        document.getelementsbytagname('html')[0].removeeventlistener('mousemove', this.mousemovefn)
        document.getelementsbytagname('html')[0].removeeventlistener('mouseup', this.moseupfn)
      } else {
        document.getelementsbytagname('html')[0].removeeventlistener('mouseup', () => { })
      }
      document.getelementsbyclassname('drag_text')[0].style.color = '#fff'
      document.getelementsbyclassname('handler')[0].style.left = this.maxwidth + 'px'
      document.getelementsbyclassname('drag_bg')[0].style.width = this.maxwidth + 'px'
    }, // 验证成功函数
    mousemovefn (e) {
      if (this.mousemovestata) {
        let width = e.clientx - this.beginclientx
        if (width > 0 && width <= this.maxwidth) {
          document.getelementsbyclassname('handler')[0].style.left = width + 'px'
          document.getelementsbyclassname('drag_bg')[0].style.width = width + 'px'
        } else if (width > this.maxwidth) {
          this.successfunction()
        }
      }
    }, // mousemove事件
    moseupfn (e) {
      this.mousemovestata = false
      var width = e.clientx - this.beginclientx
      if (width < this.maxwidth) {
        document.getelementsbyclassname('handler')[0].style.left = 0 + 'px'
        document.getelementsbyclassname('drag_bg')[0].style.width = 0 + 'px'
      }
    } // mouseup事件
  },
  mounted () {
    this.maxwidth = this.$refs.dragdiv.clientwidth - this.$refs.movediv.clientwidth
    document.getelementsbytagname('html')[0].addeventlistener('mousemove', this.mousemovefn)
    document.getelementsbytagname('html')[0].addeventlistener('mouseup', this.moseupfn)
  }
}
</script>

<style scoped>
.drag {
  position: relative;
  background-color: #e8e8e8;
  width: 30%;
  height: 34px;
  line-height: 34px;
  text-align: center;
}
.handler {
  width: 40px;
  height: 32px;
  border: 1px solid #ccc;
  cursor: move;
}
.handler_bg {
  background: #fff
    url('data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6nteyntvemurgmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6nteyntvemungmkvfmtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdo2mtc5nznmzs02otqxltqyotytytiwni02ndi2ytnkowu5ymuiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+yirg4aaaalfjrefuenpi/p//pwmlgimbqka9a+bonfsiiboxkcinh+ycacdubyoswaiopxwjciacfegbqz1avbsis5otk/8tkmnejwwgqiugtquijwaxuf3yx3xygieiflwhpkyawb+i1xgswxuligf9a7mqkbwtlhbxaflhgpgqeactkmncu6al9d8wii4hovk3itkwjaxwumloogqhmse45viq2kubuasoyc4wf+ouyxz6mqkgwaan9mirurecxgaaaabjru5erkjggg==')
    no-repeat center;
}
.handler_ok_bg {
  background: #fff
    url('data:image/png;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8/9haaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaa3hpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduuns1jmdixidc5lje1ntc3miwgmjaxnc8wms8xmy0xoto0ndowmcagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wtu09imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9tbs8iihhtbg5zonn0umvmpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavc1r5cguvumvzb3vyy2vszwyjiib4bwxuczp4bxa9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc8iihhtce1nok9yawdpbmfsrg9jdw1lbnrjrd0ieg1wlmrpzdo0zdhlnwy5my05nmi0ltrlnwqtogfjyi03zty4ogyymtu2ztyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6ndlbrdi3njvgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6ndlbrdi3njrgmkq2mtffnei5ndbcmjq2m0exmdq1ouyiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wiendidiwmtqgke1hy2ludg9zackipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdphnwezmwnhmc1hymviltqxnwetytewzs04y2u5nzrln2q4yteiihn0umvmomrvy3vtzw50suq9inhtcc5kawq6ngq4ztvmotmtotzinc00ztvklthhy2itn2u2odhmmje1nmu2ii8+idwvcmrmokrlc2nyaxb0aw9upia8l3jkzjpsrey+idwvedp4bxbtzxrhpia8p3hwywnrzxqgzw5kpsjyij8+k+shwwaaaszjrefuenpi/p//pwmykd8uzw+kuodyeyglomivghg/em/pthx0efk9i8waoez+idupiimy8in1qjwenogj3aco5gnabmbahlgaxa4gq5igannj0mwavtsx7ikyy7l2unujaf+amamj78aedtbiwgyg5gbifcsxfczoabmcy4a4gojnh0d6dpk4ixnsvihafsdoaelrajrjgjp/awpbhmhejiqnwyrmuznq4vqgdqqxk0ia/0i17wjipmqntnbeagmlqiwiqa2vgww7qppbekgxsajiieusbnnsbdweay9mefgmmgbk00e0izta7ahectdq58mrua6wllggfmompig1qfegwaixgzo8guhiysmwqgsazgwhaezhicizoabkjkqym0caaqdgx279jf50aaaaaabjru5erkjggg==')
    no-repeat center;
}
.drag_bg {
  background-color: #7ac23c;
  height: 34px;
  width: 0px;
}
.drag_text {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
</style>

效果图如下

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