Index.Vue文件
1 <div class="testCode" v-show="testCode"> 2 <my-code :fromData="newFormData" @userError="userError"></my-code> 3 </div>
Index.js文件
1 import Mycode from './TestCode'; 2 export default { 3 props:['fromData'], 4 name: 'Form', 5 data () { 6 return {} 7 }, 8 created(){}, 9 components:{ 10 'my-code':Mycode//验证码组件 11 }, 12 methods:{ 13 //用于接收验证结果 14 userError(e){ 15 this.$data.testCode = e; 16 this.$data.boxShadow = e; 17 }, 18 } 19 }
TestCode.Vue文件
1 <template> 2 <div class="myCode"> 3 <!-- <img :src="'data:image/png;base64,' + CanvasImg" alt=""> --> 4 <component ref="draws" :is="compents" :originalImg="originalImg" :floatImg="floatImg" :floatImgYPoint="floatImgYPoint" :floatImgXPoint="floatImgXPoint"></component> 5 <div class="scroll"> 6 <div class="circle" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" :style="{'left':cricle.left+'px'}"></div> 7 </div> 8 </div> 9 </template> 10 <script> 11 var mouseDownX,mouseDownY,mouseOffsetX,initX,initY,flag = false; 12 import canvasCode from './CanvasCode'; 13 import { mapMutations } from 'vuex'; 14 export default { 15 name:'myCode', 16 props:['fromData'], 17 data(){ 18 return{ 19 floatImg:'', 20 originalImg:'', 21 mousedown_:false, 22 cricle:{ 23 left:0 24 }, 25 floatImgYPoint:0, 26 floatImgXPoint:0, 27 compents:'', 28 token:'' 29 } 30 }, 31 created(){ 32 let _this = this; 33 aXios.get(_this.GOBEL_.HttpApi+'Home/GetVerifyInfo').then(function(req){ 34 _this.$data.floatImg = req.data.data.floatImg; 35 _this.$data.originalImg = req.data.data.originalImg; 36 _this.$data.floatImgYPoint = req.data.data.floatImgYPoint; 37 _this.$data.compents = canvasCode; 38 _this.$data.token = req.data.data.token; 39 console.log(req) 40 }).catch(function(req){ 41 throw req; 42 }) 43 }, 44 mounted(){ 45 46 }, 47 components:{ 48 'canvas-code':canvasCode//验证码 - canvas画布组件 49 }, 50 computed:{ 51 52 }, 53 methods:{ 54 ...mapMutations(['setToken']),//个人理解是动态传递事件？？？ 55 mousedown(e){ 56 this.$data.mousedown_ = true; 57 mouseDownX = e.pageX; 58 mouseDownY = e.pageY; 59 mouseOffsetX = e.offsetX; 60 initX = $('.circle').offset().left; 61 }, 62 mousemove(e){ 63 if(this.$data.mousedown_){ 64 65 var mouseMoveX = e.pageX; 66 var mouseMovingX = parseInt(mouseMoveX) - parseInt(mouseDownX); 67 if(mouseMovingX > $('.scroll').width() - 40){ 68 mouseMovingX = $('.scroll').width() - 40; 69 }else if(mouseMovingX < 0){ 70 mouseMovingX = 0 71 } 72 this.$data.cricle.left = mouseMovingX//(parseInt(mouseMoveX) - parseInt(mouseDownX)) > $('.scroll').width() ? ($('.scroll').width()) : ((parseInt(mouseMoveX) - parseInt(mouseDownX) - mouseOffsetX) < 0 ? 0 :(parseInt(mouseMoveX) - parseInt(mouseDownX) - mouseOffsetX) ); 73 this.$refs.draws.drawImages(this.$data.cricle.left);//在canvas上面画图像 74 // console.log(mouseMoveX) 75 // this.$data.floatImgXPoint = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX); 76 // this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px"; 77 } 78 }, 79 mouseup(e){ 80 const _this = this; 81 this.$data.mousedown_ = false; 82 this.fromData['PointX'] = this.$data.cricle.left; 83 this.fromData['Token'] = this.$data.token; 84 aXios.post('Home/UserLogin',_this.fromData) 85 .then(function(req){ 86 console.log(req) 87 if(!req.data.isSuccess){ 88 _this.$data.cricle.left = 0; 89 _this.$refs.draws.drawImages(0); 90 if(req.data.message === "邮箱还未验证"){ 91 _this.$parent.Isemail = true; 92 }else if(req.data.message === '验证码错误'){ 93 94 }else{ 95 alert(req.data.message); 96 _this.$emit('userError',false); 97 } 98 99 100 }else{ 101 _this.setToken({token:_this.$data.token});//这个是验证是否过期，请求时往header传递token 102 _this.$router.push({ 103 path:'/Console' 104 })
//token验证 105 if(this.$store.state.token) { 106 this.$router.push('/Console'); 107 console.log(this.$store.state.token.token); 108 } else { 109 this.$router.replace('/'); 110 } 111 sessionStorage.setItem('token',_this.$data.token); 112 } 113 }) 114 .catch(function(req){ 115 116 }) 117 } 118 } 119 } 120 </script> 121 <style lang="less"> 122 .myCode{ 123 width: 350px; 124 padding: 10px 0; 125 margin: 50% auto; 126 margin-top: 25%; 127 background: #fff; 128 .scroll{ 129 width: 300px; 130 margin: 0px auto; 131 // background: rgb(197, 197, 197); 132 height: 20px; 133 position: relative; 134 margin-top: 20px; 135 margin-bottom: 10px; 136 &::before{ 137 content: ' '; 138 width: 260px; 139 height: 2px; 140 background: rgba(0,0,0,0.6); 141 position: absolute; 142 left: 50%; 143 margin-left: -130px; 144 top: 50%; 145 margin-top: -1px; 146 border-radius: 5px; 147 } 148 & .circle{ 149 position: absolute; 150 width: 40px; 151 height: 40px; 152 border-radius: 50%; 153 background: #fff; 154 border: 1px solid #2b85e6; 155 top: -10px; 156 left: 0px; 157 text-align: center; 158 line-height: 35px; 159 font-size: 18px; 160 font-weight: bold; 161 color:#333; 162 cursor: pointer; 163 &:hover{ 164 background: #36d25a; 165 border: 1px solid #36d25a; 166 } 167 &::before{ 168 content: ' '; 169 } 170 } 171 } 172 } 173 </style>
CanvasCode.Vue 文件
1 <template class="canvasCode"> 2 <div> 3 <canvas id="tutorial"/> 4 5 </div> 6 </template> 7 <script> 8 export default { 9 name:'canvasCode', 10 props:['floatImg','originalImg','floatImgYPoint','floatImgXPoint'], 11 data(){ 12 return { 13 floatImgXPoint_:30, 14 tree:[{ 15 Id:'', 16 FileListName:'',//文件夹名字 17 FileListIcon:'',//文件夹图标 18 FileListData:'',//文件夹必要参数 19 }] 20 } 21 }, 22 mounted(){ 23 const _this = this; 24 const canvas = document.getElementById('tutorial'); 25 const ctx = canvas.getContext('2d'); 26 27 const Bigimg = new Image(),smallImg = new Image(); 28 Bigimg.src = ('data:image/png;base64,' + _this.originalImg);// 29 smallImg.src = ('data:image/png;base64,' + _this.floatImg); 30 Bigimg.onload = function () { 31 ctx.drawImage(Bigimg,0, 0, 320, 180); 32 } 33 console.log(_this.floatImgXPoint) 34 smallImg.onload = function(){ 35 ctx.storkeStyle = 'red'; 36 ctx.lineWidth = 1; 37 ctx.fillRect((_this.floatImgXPoint < 0 ? 0 : _this.floatImgXPoint), _this.floatImgYPoint, 40, 40); 38 39 ctx.shadowOffsetX = 0; // 阴影Y轴偏移 40 ctx.shadowOffsetY = 0; // 阴影X轴偏移 41 ctx.shadowBlur = 15; // 模糊尺寸 42 ctx.shadowColor = 'rgba(255, 255, 255, 1)'; // 颜色 43 ctx.drawImage(smallImg,(_this.floatImgXPoint < 0 ? 0 : _this.floatImgXPoint), _this.floatImgYPoint, 40, 40); 44 } 45 }, 46 computed:{ 47 floatImgXPoint_c(){ 48 return this.floatImgXPoint_; 49 } 50 }, 51 methods:{ 52 drawImages(e){ 53 const _this = this; 54 const canvas = document.getElementById('tutorial'); 55 const ctx = canvas.getContext('2d'); 56 57 const Bigimg = new Image(),smallImg = new Image(); 58 Bigimg.src = ('data:image/png;base64,' + _this.originalImg); 59 smallImg.src = ('data:image/png;base64,' + _this.floatImg); 60 61 smallImg.onload = function(){ 62 // console.log(e) 63 ctx.clearRect(0, 0, 320, 180); 64 ctx.drawImage(Bigimg,0, 0, 320, 180); 65 ctx.drawImage(smallImg,(e < 0 ? 0 : e), _this.floatImgYPoint, 40, 40); 66 } 67 } 68 } 69 } 70 </script> 71 <style lang="less"> 72 canvas{ 73 width: 320px; 74 height: 180px; 75 margin: 0 auto; 76 display: block; 77 margin-bottom: 10px; 78 } 79 </style>
因为是后台返回图片给前端，碰撞的位置也有后台计算，所以我这里只是做了个获取当前滑块图片所在的位置并在传给后台。
目前正在学习摸索vue，大家可以一起来讨论(๑•ᴗ•๑)