{"version":3,"sources":["webpack:///./src/components/slider.vue?ea17","webpack:///src/components/slider.vue","webpack:///./src/components/slider.vue?0fc5","webpack:///./src/components/slider.vue","webpack:///./src/components/slider.vue?60d1"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","class","success","confirmSuccess","_v","_s","confirmWords","staticStyle","on","$event","mousedownFn","staticRenderFns","data","beginClientX","mouseMoveStata","maxwidth","methods","e","preventDefault","clientX","successFunction","window","addEventListener","document","getElementsByClassName","style","color","left","width","mouseMoveFn","moseUpFn","mounted","component"],"mappings":"kJAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,IAAI,UAAUC,YAAY,QAAQ,CAACH,EAAG,MAAM,CAACG,YAAY,YAAYH,EAAG,MAAM,CAACG,YAAY,YAAYC,MAAM,CAAEC,QAAST,EAAIU,iBAAkB,CAACV,EAAIW,GAAG,IAAIX,EAAIY,GAAGZ,EAAIa,cAAc,OAAOT,EAAG,MAAM,CAACE,IAAI,UAAUC,YAAY,UAAUO,YAAY,CAAC,SAAW,WAAW,IAAM,MAAM,KAAO,OAAOC,GAAG,CAAC,UAAY,SAASC,GAAQ,OAAOhB,EAAIiB,YAAYD,MAAW,CAAEhB,EAAkB,eAAEI,EAAG,IAAI,CAACG,YAAY,oBAAoBH,EAAG,IAAI,CAACG,YAAY,uBAChiBW,EAAkB,GCkBtB,GACEC,KADF,WAEI,MAAO,CACLC,aAAc,EACdC,gBAAgB,EAChBC,SAAU,GACVT,aAAc,UACdH,gBAAgB,IAGpBa,QAAS,CACPN,YAAa,SAAjB,GACWhB,KAAKS,iBACRc,EAAEC,gBAAkBD,EAAEC,iBACtBxB,KAAKoB,gBAAiB,EACtBpB,KAAKmB,aAAeI,EAAEE,UAG1BC,gBARJ,WASM1B,KAAKS,gBAAiB,EACtBT,KAAKY,aAAe,OAChBe,OAAOC,kBACTC,SACR,gCACA,kDACQA,SACR,gCACA,8CAEQA,SACR,gCACA,8CAEMA,SAASC,uBAAuB,aAAa,GAAGC,MAAMC,MAAQ,OAC9DH,SAASC,uBAAuB,WAAW,GAAGC,MAAME,KAC1D,mBACMJ,SAASC,uBAAuB,WAAW,GAAGC,MAAMG,MAC1D,oBAEIC,YA7BJ,SA6BA,GACM,GAAInC,KAAKoB,eAAgB,CACvB,IAAR,8BACYc,EAAQ,GAAKA,GAASlC,KAAKqB,UAC7BQ,SAASC,uBAAuB,WAAW,GAAGC,MAAME,KAC9D,OACUJ,SAASC,uBAAuB,WAAW,GAAGC,MAAMG,MAC9D,QACA,iBACUlC,KAAK0B,oBAIXU,SA1CJ,SA0CA,GACMpC,KAAKoB,gBAAiB,EACtB,IAAIc,EAAQX,EAAEE,QAAUzB,KAAKmB,aACzBe,EAAQlC,KAAKqB,WACfQ,SAASC,uBAAuB,WAAW,GAAGC,MAAME,KAAO,MAC3DJ,SAASC,uBAAuB,WAAW,GAAGC,MAAMG,MAAQ,SAIlEG,QA7DF,WA8DIrC,KAAKqB,SACT,8DACIQ,SACJ,gCACA,+CACIA,SACJ,gCACA,4CCxFgV,I,wBCQ5US,EAAY,eACd,EACAxC,EACAmB,GACA,EACA,KACA,WACA,MAIa,aAAAqB,E,6CCnBf","file":"js/chunk-6c5d586a.5a10d4f1.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"dragDiv\",staticClass:\"drag\"},[_c('div',{staticClass:\"drag_bg\"}),_c('div',{staticClass:\"drag_text\",class:{ success: _vm.confirmSuccess }},[_vm._v(\" \"+_vm._s(_vm.confirmWords)+\" \")]),_c('div',{ref:\"moveDiv\",staticClass:\"handler\",staticStyle:{\"position\":\"absolute\",\"top\":\"0px\",\"left\":\"0px\"},on:{\"mousedown\":function($event){return _vm.mousedownFn($event)}}},[(_vm.confirmSuccess)?_c('i',{staticClass:\"el-icon-success\"}):_c('i',{staticClass:\"el-icon-right\"})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"drag\" ref=\"dragDiv\">\n    <div class=\"drag_bg\"></div>\n    <div class=\"drag_text\" :class=\"{ success: confirmSuccess }\">\n      {{ confirmWords }}\n    </div>\n    <div\n      ref=\"moveDiv\"\n      @mousedown=\"mousedownFn($event)\"\n      class=\"handler\"\n      style=\"position: absolute;top: 0px;left: 0px;\"\n    >\n      <i v-if=\"confirmSuccess\" class=\"el-icon-success\"></i>\n      <i v-else class=\"el-icon-right\"></i>\n    </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\n          .getElementsByTagName(\"html\")[0]\n          .removeEventListener(\"mousemove\", this.mouseMoveFn);\n        document\n          .getElementsByTagName(\"html\")[0]\n          .removeEventListener(\"mouseup\", this.moseUpFn);\n      } else {\n        document\n          .getElementsByTagName(\"html\")[0]\n          .removeEventListener(\"mouseup\", () => {});\n      }\n      document.getElementsByClassName(\"drag_text\")[0].style.color = \"#fff\";\n      document.getElementsByClassName(\"handler\")[0].style.left =\n        this.maxwidth + \"px\";\n      document.getElementsByClassName(\"drag_bg\")[0].style.width =\n        this.maxwidth + \"px\";\n    }, //验证成功函数\n    mouseMoveFn(e) {\n      if (this.mouseMoveStata) {\n        let width = e.clientX - this.beginClientX;\n        if (width > 0 && width <= this.maxwidth) {\n          document.getElementsByClassName(\"handler\")[0].style.left =\n            width + \"px\";\n          document.getElementsByClassName(\"drag_bg\")[0].style.width =\n            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 =\n      this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;\n    document\n      .getElementsByTagName(\"html\")[0]\n      .addEventListener(\"mousemove\", this.mouseMoveFn);\n    document\n      .getElementsByTagName(\"html\")[0]\n      .addEventListener(\"mouseup\", this.moseUpFn);\n  },\n};\n</script>\n\n<style scoped>\n.drag {\n  position: relative;\n  background-color: #eaeaea;\n  width: 100%;\n  height: 40px;\n  line-height: 40px;\n  text-align: center;\n  margin-top: 30px;\n}\n.handler {\n  width: 40px;\n  height: 38px;\n  border: 1px solid #eaeaea;\n  background-color: #fff;\n  border-radius: 4px;\n  cursor: move;\n}\n\n.drag_bg {\n  background-color: #4296f2;\n  height: 40px;\n  width: 0px;\n}\n.drag_text {\n  position: absolute;\n  top: 0px;\n  width: 100%;\n  color: #666666;\n  font-size: 12px;\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.el-icon-right:before {\n  font-size: 24px;\n  color: #9a9a9a;\n  font-weight: 700;\n  line-height: 1.5;\n}\n.el-icon-success {\n  font-size: 26px;\n  color: #4296f2;\n  line-height: 1.5;\n}\n.success {\n  font-size: 16px;\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!./slider.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!./slider.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./slider.vue?vue&type=template&id=516c71d4&scoped=true&\"\nimport script from \"./slider.vue?vue&type=script&lang=js&\"\nexport * from \"./slider.vue?vue&type=script&lang=js&\"\nimport style0 from \"./slider.vue?vue&type=style&index=0&id=516c71d4&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  \"516c71d4\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.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!./slider.vue?vue&type=style&index=0&id=516c71d4&scoped=true&lang=css&\""],"sourceRoot":""}