{"version":3,"sources":["webpack:///./src/views/user/dragDiv.vue?571b","webpack:///./src/views/user/dragDiv.vue","webpack:///src/views/user/dragDiv.vue","webpack:///./src/views/user/dragDiv.vue?6d7f","webpack:///./src/views/user/dragDiv.vue?6d25"],"names":["render","_vm","this","_c","_self","ref","staticClass","_v","_s","confirmWords","class","confirmSuccess","staticStyle","on","$event","mousedownFn","staticRenderFns","data","beginClientX","mouseMoveStata","maxwidth","methods","e","preventDefault","clientX","successFunction","window","addEventListener","document","getElementsByTagName","removeEventListener","mouseMoveFn","moseUpFn","getElementsByClassName","style","color","left","width","mounted","$refs","dragDiv","clientWidth","moveDiv","component"],"mappings":"gHAAA,W,kECAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,IAAI,UAAUC,YAAY,QAAQ,CAACH,EAAG,MAAM,CAACG,YAAY,YAAYH,EAAG,MAAM,CAACG,YAAY,aAAa,CAACL,EAAIM,GAAGN,EAAIO,GAAGP,EAAIQ,iBAAiBN,EAAG,MAAM,CAACE,IAAI,UAAUC,YAAY,qBAAqBI,MAAM,CAAC,cAAgBT,EAAIU,gBAAgBC,YAAY,CAAC,SAAW,WAAW,IAAM,MAAM,KAAO,OAAOC,GAAG,CAAC,UAAY,SAASC,GAAQ,OAAOb,EAAIc,YAAYD,UAE9aE,EAAkB,GCYP,GACfC,KAAA,WACA,OACAC,aAAA,EACAC,gBAAA,EACAC,SAAA,GACAX,aAAA,SACAE,gBAAA,IAGAU,QAAA,CACAN,YAAA,SAAAO,GACA,KAAAX,iBACAW,EAAAC,gBAAAD,EAAAC,iBACA,KAAAJ,gBAAA,EACA,KAAAD,aAAAI,EAAAE,UAGAC,gBAAA,WACA,KAAAd,gBAAA,EACA,KAAAF,aAAA,OACAiB,OAAAC,kBACAC,SAAAC,qBAAA,WAAAC,oBAAA,iBAAAC,aACAH,SAAAC,qBAAA,WAAAC,oBAAA,eAAAE,WAEAJ,SAAAC,qBAAA,WAAAC,oBAAA,0BAGAF,SAAAK,uBAAA,gBAAAC,MAAAC,MAAA,OACAP,SAAAK,uBAAA,cAAAC,MAAAE,KAAA,KAAAhB,SAAA,KACAQ,SAAAK,uBAAA,cAAAC,MAAAG,MAAA,KAAAjB,SAAA,MAEAW,YAAA,SAAAT,GACA,QAAAH,eAAA,CACA,IAAAkB,EAAAf,EAAAE,QAAA,KAAAN,aACAmB,EAAA,GAAAA,GAAA,KAAAjB,UACAQ,SAAAK,uBAAA,cAAAC,MAAAE,KAAAC,EAAA,KACAT,SAAAK,uBAAA,cAAAC,MAAAG,QAAA,MACAA,EAAA,KAAAjB,UACA,KAAAK,oBAIAO,SAAA,SAAAV,GACA,KAAAH,gBAAA,EACA,IAAAkB,EAAAf,EAAAE,QAAA,KAAAN,aACAmB,EAAA,KAAAjB,WACAQ,SAAAK,uBAAA,cAAAC,MAAAE,KAAA,MACAR,SAAAK,uBAAA,cAAAC,MAAAG,MAAA,SAIAC,QAAA,WACA,KAAAlB,SAAA,KAAAmB,MAAAC,QAAAC,YAAA,KAAAF,MAAAG,QAAAD,YACAb,SAAAC,qBAAA,WAAAF,iBAAA,iBAAAI,aACAH,SAAAC,qBAAA,WAAAF,iBAAA,eAAAK,YCrEgW,I,wBCQ5VW,EAAY,eACd,EACA3C,EACAgB,GACA,EACA,KACA,WACA,MAIa,aAAA2B,E","file":"js/chunk-76528f10.f471fc2a.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./dragDiv.vue?vue&type=style&index=0&id=0b841374&prod&scoped=true&lang=css&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:\"dragDiv\",staticClass:\"drag\"},[_c('div',{staticClass:\"drag_bg\"}),_c('div',{staticClass:\"drag_text\"},[_vm._v(_vm._s(_vm.confirmWords))]),_c('div',{ref:\"moveDiv\",staticClass:\"handler handler_bg\",class:{'handler_ok_bg':_vm.confirmSuccess},staticStyle:{\"position\":\"absolute\",\"top\":\"0px\",\"left\":\"0px\"},on:{\"mousedown\":function($event){return _vm.mousedownFn($event)}}})])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"drag\" ref=\"dragDiv\">\n    <div class=\"drag_bg\"></div>\n    <div class=\"drag_text\">{{ confirmWords }}</div>\n    <div\n      ref=\"moveDiv\"\n      @mousedown=\"mousedownFn($event)\"\n      :class=\"{'handler_ok_bg':confirmSuccess}\"\n      class=\"handler handler_bg\"\n      style=\"position: absolute;top: 0px;left: 0px;\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      beginClientX: 0, /* 距离屏幕左端距离 */\n      mouseMoveStata: false, /* 触发拖动状态  判断 */\n      maxwidth: '', /* 拖动最大宽度，依据滑块宽度算出来的 */\n      confirmWords: '拖动滑块验证', /* 滑块文字 */\n      confirmSuccess: false /* 验证成功判断 */\n    }\n  },\n  methods: {\n    mousedownFn: function (e) {\n      if (!this.confirmSuccess) {\n        e.preventDefault && e.preventDefault() // 阻止文字选中等 浏览器默认事件\n        this.mouseMoveStata = true\n        this.beginClientX = e.clientX\n      }\n    }, // mousedoen 事件\n    successFunction () {\n      this.confirmSuccess = true\n      this.confirmWords = '验证通过'\n      if (window.addEventListener) {\n        document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn)\n        document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn)\n      } else {\n        document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {\n        })\n      }\n      document.getElementsByClassName('drag_text')[0].style.color = '#fff'\n      document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px'\n      document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px'\n    }, // 验证成功函数\n    mouseMoveFn (e) {\n      if (this.mouseMoveStata) {\n        const width = e.clientX - this.beginClientX\n        if (width > 0 && width <= this.maxwidth) {\n          document.getElementsByClassName('handler')[0].style.left = width + 'px'\n          document.getElementsByClassName('drag_bg')[0].style.width = width + 'px'\n        } else if (width > this.maxwidth) {\n          this.successFunction()\n        }\n      }\n    }, // mousemove事件\n    moseUpFn (e) {\n      this.mouseMoveStata = false\n      var width = e.clientX - this.beginClientX\n      if (width < this.maxwidth) {\n        document.getElementsByClassName('handler')[0].style.left = 0 + 'px'\n        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'\n      }\n    } // mouseup事件\n  },\n  mounted () {\n    this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth\n    document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn)\n    document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn)\n  }\n}\n</script>\n\n<style scoped>\n  .drag {\n    position: relative;\n    background-color: #e8e8e8;\n    width: 100%;\n    height: 34px;\n    line-height: 34px;\n    text-align: center;\n  }\n\n  .handler {\n    width: 40px;\n    height: 34px;\n    border: 1px solid #ccc;\n    cursor: move;\n  }\n\n  .handler_bg {\n    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;\n  }\n\n  .handler_ok_bg {\n    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;\n  }\n\n  .drag_bg {\n    background-color: #7ac23c;\n    height: 34px;\n    width: 0px;\n  }\n\n  .drag_text {\n    position: absolute;\n    top: 0px;\n    width: 100%;\n    text-align: center;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    user-select: none;\n    -o-user-select: none;\n    -ms-user-select: none;\n  }\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./dragDiv.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./dragDiv.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./dragDiv.vue?vue&type=template&id=0b841374&scoped=true&\"\nimport script from \"./dragDiv.vue?vue&type=script&lang=js&\"\nexport * from \"./dragDiv.vue?vue&type=script&lang=js&\"\nimport style0 from \"./dragDiv.vue?vue&type=style&index=0&id=0b841374&prod&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"0b841374\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}