精华内容
下载资源
问答
  • vue 验证码

    2019-11-06 15:30:20
    创建一个验证码vue组件 将下列代码复制到主机中在其他页面引入 identifyCode为验证码,传入字符串即可 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height...

    验证码组件

    创建一个验证码的vue组件
    将下列代码复制到主机中在其他页面引入

    identifyCode为验证码,传入字符串即可

    <template>
      <div class="s-canvas">
        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
      </div>
    </template>
    <script> 
    export default {
      name: 'identify',
      props: {
        identifyCode: {
          //默认注册码
          type: String,
          default: '1234'
        },
        fontSizeMin: {
          // 字体最小值
          type: Number,
          default: 25
        },
        fontSizeMax: {
          // 字体最大值
          type: Number,
          default: 35
        },
        backgroundColorMin: {
          // 验证码图片背景色最小值
          type: Number,
          default: 200
        },
        backgroundColorMax: {
          // 验证码图片背景色最大值
          type: Number,
          default: 220
        },
        dotColorMin: {
          // 背景干扰点最小值
          type: Number,
          default: 60
        },
        dotColorMax: {
          // 背景干扰点最大值
          type: Number,
          default: 120
        },
        contentWidth: {
          //容器宽度
          type: Number,
          default: 116
        },
        contentHeight: {
          //容器高度
          type: Number,
          default: 38
        }
      },
      methods: {
        // 生成一个随机数
        randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min)
        },
        // 生成一个随机的颜色
        randomColor(min, max) {
          let r = this.randomNum(min, max)
          let g = this.randomNum(min, max)
          let b = this.randomNum(min, max)
          return 'rgb(' + r + ',' + g + ',' + b + ')'
        },
        drawPic() {
          let canvas = document.getElementById('s-canvas')
          let ctx = canvas.getContext('2d')
          ctx.textBaseline = 'bottom'
          // 绘制背景
          ctx.fillStyle = this.randomColor(
            this.backgroundColorMin,
            this.backgroundColorMax
          )
          ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
          // 绘制文字
          for (let i = 0; i < this.identifyCode.length; i++) {
            this.drawText(ctx, this.identifyCode[i], i)
          }
          this.drawLine(ctx)
          this.drawDot(ctx)
        },
        drawText(ctx, txt, i) {
          ctx.fillStyle = this.randomColor(50, 160) //随机生成字体颜色
          ctx.font =
            this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' //随机生成字体大小
          let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
          let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
          var deg = this.randomNum(-30, 30)
          // 修改坐标原点和旋转角度
          ctx.translate(x, y)
          ctx.rotate((deg * Math.PI) / 180)
          ctx.fillText(txt, 0, 0)
          // 恢复坐标原点和旋转角度
          ctx.rotate((-deg * Math.PI) / 180)
          ctx.translate(-x, -y)
        },
        drawLine(ctx) {
          // 绘制干扰线
          for (let i = 0; i < 4; i++) {
            ctx.strokeStyle = this.randomColor(100, 200)
            ctx.beginPath()
            ctx.moveTo(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight)
            )
            ctx.lineTo(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight)
            )
            ctx.stroke()
          }
        },
        drawDot(ctx) {
          // 绘制干扰点
          for (let i = 0; i < 30; i++) {
            ctx.fillStyle = this.randomColor(0, 255)
            ctx.beginPath()
            ctx.arc(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight),
              1,
              0,
              2 * Math.PI
            )
            ctx.fill()
          }
        }
      },
      watch: {
        identifyCode() {
          this.drawPic()
        }
      },
      mounted() {
        this.drawPic()
      }
    }
    </script>
    
    展开全文
  • 今天小编就为大家分享一篇关于vue验证码组件应用实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • vue验证码制作

    2021-04-14 16:49:39
    vue验证码制作 效果展示 data() { return { Code: "", Verification: "", verificationCode: [], } } handelClickCode() { this.getCheckCode() //发送请求,返回随机码 .then((res) => { //...

    vue验证码制作

    效果展示
    效果展示

        data() {
    	    return {
    	      Code: "",
          	  Verification: "",
          	  verificationCode: [],
          	}
        }
    
    	handelClickCode() {
          this.getCheckCode()  //发送请求,返回随机码
            .then((res) => {
              //对返回随机码res进行加工
              this.verificationCode = [];
              this.Code = res.result.checkCode;
              let arr = res.result.checkCode.split("");
              for (let i = 0; i < arr.length; i++) {
                let col = Math.floor(Math.random() * 0xffffff).toString(16);
                let obj = {
                  col: "#" + col,
                  code: arr[i],
                };
                this.verificationCode.push(obj);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
    
    	<div @click="handelClickCode" class="code-bg">
              <span
                v-for="(item, index) in verificationCode"
                :key="index"
                :style="{ color: item.col }">
                {{ item.code }}
              </span>
        </div>
    
    	.code-bg {
    	  width: 100px;
    	  height: 32px;
    	  display: flex;
    	  justify-content: space-around;
    	  align-items: center;
    	  margin-left: 20px;
    	  background-image: url("../../assets/img/code-bg.jpg");
    	  background-size: cover;
    	  cursor: pointer;
    	}
    	.login .user .code-bg span {
    	  font-size: 25px;
    	}
    
    展开全文
  • VUE验证码demo

    2020-12-10 08:19:48
    VUE验证码demo 在这里插入代码片 <template> <div class="demotwo"> <!--滑动验证码--> <div class="img_bg"> <!--滑动容器--> <div class="sliderImg" style="width:...

    VUE验证码demo

    在这里插入图片描述

    在这里插入代码片
    <template>
    	<div class="demotwo">
    		<!--滑动验证码-->
    		<div class="img_bg">
    			<!--滑动容器-->
    			<div class="sliderImg" style="width:360px;height:200px;position:relative;background:#fff;">
    				<!--大图-->
    <!--				<img :src="save_big_url" alt="" class="big_img" style="width:260px;height:160px;position:absolute;right:0">-->
    				<img :src="'data:image/png;base64,'+save_big_url" alt="" class="big_img" style="width:260px;height:160px;position:absolute;right:0">
    				<div ref="right" style="position:absolute;width:40px;height:40px;top:16px;left:280px;background-color:rgba(0,0,0,0.2);"></div>
    				<!--小图-->
    				<img :src="save_small_url"
    					 alt="" class="small_img"
    					 ref="small_img"
    					 @mousedown="move"
    					 style="position:absolute;width:40px;height:40px;top:16px;left:20px;cursor:crosshair;"
    				>
    				<p :style="Verification==1?'background:#55746c;':'background:#20af5c;'" style="width:360px;height:40px;position:absolute;right:0;bottom:0;line-height:40px;color:#fff;text-align: center;">
    					{{Verification==1?'验证码未成功':'验证成功'}}
    				</p>
    			</div>
    		</div>
    	</div>
    </template>
    
    <script>
    	import axios from 'axios'
    	import { baseurl2 } from '../config/urlconfig2.js';
    	export default{
    		name:'demotwo',
    		//js
    		data() {
    			return {
    				// isCheckImg: false,// 是否使用滑动验证码
    				positionX: 0, // 滑动时小图相对大图的左边距
    				positionY: 0, // 滑动时小图相对大图的上边距
    				/* save_big_url: require('../assets/1.png'),//大图url
    				save_small_url: require('../assets/2.png'),//小图url */
    				save_big_url: '',//大图url
    				save_small_url: '',//小图url
    				Verification : 1 ,	//是否验证成功的背景颜色
    				Verificationcode:1, //是否验证成功的文本
    				tokens:'',
    				imgwidth:0,
    				imgheight:0,
    				imgwidthxiao:0,
    				imgheightxiao:0,
    			}
    		},
    		mounted(){
    			/* this.$refs.small_img.style.left=50 + 'px';
    			this.$refs.small_img.style.top= 0 + 'px'
    			console.log(this.$refs.small_img.style.left) */
    			
    			this.showImg();
    		},
    		methods:{
    			// 渲染图片
    			showImg() {
    				// console.log(this.$refs.img1.$el)
    				
    				this.$axios.get(baseurl2+'/hdcaptcha/register','').then((res)=>{
    					// console.log(this.$refs.img1.$el)
    					// console.log('背景图片',res.data.data)
    					this.save_big_url=res.data.data.bgImg;
    					this.save_small_url=res.data.data.sliceImg;
    					let that=this;
    					this.$refs.img1.onload = function(){
    						that.imgwidth=this.width;
    						that.imgheight=this.height;
    					}
    					this.$refs.img2.onload = function(){
    						that.imgwidthxiao=this.width;
    						that.imgheightxiao=this.height;
    					}
    					setTimeout(() =>{
    						var width1 = this.imgwidth; //大图实际宽度
    						var height1 = this.imgheight; //大图实际宽度
    						var width1s = Number(this.$refs.imgback.style.width.substring(0,this.$refs.imgback.style.width.length-2));//大图设定宽度
    						var heigh1s = Number(this.$refs.imgback.style.height.substring(0,this.$refs.imgback.style.height.length-2));//大图设定高度
    						// console.log(width1,height1,width1s,heigh1s)
    						var width2 = this.imgwidthxiao; //小图实际宽度
    						var height2 = this.imgheightxiao; //小图实际宽度
    						
    						/* console.log(width2,height2)
    						console.log(width1s*width2/width1)
    						console.log(heigh1s*height2/height1) */
    						this.$refs.small_img.style.width=width1s*width2/width1 +'px';
    						this.$refs.small_img.style.height=heigh1s*height2/height1 +'px';
    						// var heightright=heigh1s*height2/height1; //小图按比例设定的高
    						// console.log(res.data.data.y * heigh1s / height1)
    						var heighttop=res.data.data.y * heigh1s / height1;
    						this.$refs.small_img.style.top = heighttop + 'px';
    					},100)
    					
    					// console.log(this.$refs.imgback.style.width)
    					// this.$refs.small_img.style.top=res.data.data.y + 'px';
    					this.tokens=res.data.data.token;
    					/* this.$refs.small_img.style.left=50 + 'px';
    					this.$refs.small_img.style.top=50 + 'px'; */
    					// this.tokens=res.
    				}).catch((res) =>{
    					console.log(res)
    					this.$message({
    					  message: '背景图片错误',
    					  type: 'warning',
    					  showClose: true,
    					  duration:0,
    					});
    				}) 
    			},
    			// 滑动验证码
    			move(e) {
    				let odiv = e.target;        //获取目标元素(小图)
    				// console.log(e)
    				//算出鼠标相对元素的位置
    				let disX = e.clientX - odiv.offsetLeft;
    				let disY = e.clientY - odiv.offsetTop;
    				// 鼠标移动时
    				document.onmousemove = (e) => {       //鼠标按下并移动的事件
    					if (e.preventDefault) e.preventDefault();
    
    					//用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
    					let left = e.clientX - disX;
    					let top = e.clientY - disY;
    
    					//绑定元素位置到positionX和positionY上面
    					this.positionX = left;
    					this.positionY = top;
    
    					let bigImg = document.getElementsByClassName("sliderImg")[0];
    					const bigX = bigImg.clientWidth - odiv.offsetWidth ;
    					left = Math.min(Math.max(0, left), bigX);
    					 //移动当前元素
    					odiv.style.left = left + 'px';
    				};
    
    				// 鼠标按键释放时
    				document.onmouseup = (e) => {
    					if (e.stopPropagation) e.stopPropagation();
    					if (e.preventDefault) e.preventDefault();
    					e.cancelBubble = true;
    
    					document.onmousemove = null;
    					document.onmouseup = null;
    
    					// 计算小图x值
    					const xvalue = e.clientX - e.offsetX - document.getElementsByClassName("sliderImg")[0].getBoundingClientRect().x;
    					var xvalues=xvalue-100;
    					// console.log('x轴坐标---',xvalues);
    					/* var rights=this.$refs.right.style.left;
    					var rights2=Number(rights.substring(0,rights.length-2))-100;
    					console.log(rights2) */
    					// Math.abs()//绝对值
    					// console.log(xvalue-100-rights2)
    					//验证码接口
    					var obj={
    					    "accountName": 123,
    					    "password": 123,
    					    //"token":"d82c8d1619ad8176d665453cfb2e55f033",
    						"token": this.tokens,
    					    //"sliceX":81
    						"sliceX": xvalues
    					};
    					var objjson=JSON.stringify(obj);
    					this.$axios.post(baseurl2+'/hdcaptcha/check',objjson).then((res)=>{
    						// console.log(res.data)
    						if(res.code==200){
    							this.Verification=2;
    							this.Verificationcode=3;
    						}else{
    							this.Verificationcode=2;
    							setTimeout(() =>{
    								this.Verificationcode=1;
    								this.$refs.small_img.style.left=20 + 'px';
    								this.showImg();
    							},1500)
    						} 
    					}).catch((res) =>{
    						this.Verificationcode=2;
    						setTimeout(() =>{
    							this.Verificationcode=1;
    							this.$refs.small_img.style.left=20 + 'px';
    							this.showImg();
    						},1320)
    						
    					})
    				};
    			}
    		}
    	}
    </script>
    
    <style>
    	.demotwo {
    		width: 100%;
    		height: 100%;
    		position:relative;
    	}
    	.img_bg{
    		width:360px;
    		height:200px;
    		position: absolute;
    		top:0;
    		left:0;
    		right:0;
    		bottom:0;
    		margin: auto;
    		background:#ccc;
    		border:1px solid seagreen;
    	}
    </style>
    
    展开全文
  • VUE验证码组件

    2019-08-07 14:45:28
    VUE验证码组件组件源码组件使用 组件源码 identify.vue <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div&...

    VUE验证码组件

    组件源码

    identify.vue

    <template>
      <div class="s-canvas">
        <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
      </div>
    </template>
    <script>
    export default {
      name: "SIdentify",
      props: {
        identifyCode: {
          //默认注册码
          type: String,
          default: "1234"
        },
        fontSizeMin: {
          // 字体最小值
          type: Number,
          default: 26
        },
        fontSizeMax: {
          // 字体最大值
          type: Number,
          default: 30
        },
        backgroundColorMin: {
          // 验证码图片背景色最小值
          type: Number,
          default: 230
        },
        backgroundColorMax: {
          // 验证码图片背景色最大值
          type: Number,
          default: 250
        },
        dotColorMin: {
          // 背景干扰点最小值
          type: Number,
          default: 60
        },
        dotColorMax: {
          // 背景干扰点最大值
          type: Number,
          default: 120
        },
        contentWidth: {
          //容器宽度
          type: Number,
          default: 80
        },
        contentHeight: {
          //容器高度
          type: Number,
          default: 32
        }
      },
      methods: {
        // 生成一个随机数
        randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
        },
        // 生成一个随机的颜色
        randomColor(min, max) {
          let r = this.randomNum(min, max);
          let g = this.randomNum(min, max);
          let b = this.randomNum(min, max);
          return "rgb(" + r + "," + g + "," + b + ")";
        },
        drawPic() {
          let canvas = document.getElementById("s-canvas");
          let ctx = canvas.getContext("2d");
          ctx.textBaseline = "bottom";
          // 绘制背景
          ctx.fillStyle = this.randomColor(
            this.backgroundColorMin,
            this.backgroundColorMax
          );
          ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
          // 绘制文字
          for (let i = 0; i < this.identifyCode.length; i++) {
            this.drawText(ctx, this.identifyCode[i], i);
          }
          this.drawLine(ctx);
          this.drawDot(ctx);
        },
        drawText(ctx, txt, i) {
          ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色
          ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei"; //随机生成字体大小
          let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
          let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
          var deg = this.randomNum(-30, 30);
          // 修改坐标原点和旋转角度
          ctx.translate(x, y);
          ctx.rotate((deg * Math.PI) / 180);
          ctx.fillText(txt, 0, 0);
          // 恢复坐标原点和旋转角度
          ctx.rotate((-deg * Math.PI) / 180);
          ctx.translate(-x, -y);
        },
        drawLine(ctx) {
          // 绘制干扰线
          for (let i = 0; i < 4; i++) {
            ctx.strokeStyle = this.randomColor(100, 200);
            ctx.beginPath();
            ctx.moveTo(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight)
            );
            ctx.lineTo(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight)
            );
            ctx.stroke();
          }
        },
        drawDot(ctx) {
          // 绘制干扰点
          for (let i = 0; i < 30; i++) {
            ctx.fillStyle = this.randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(
              this.randomNum(0, this.contentWidth),
              this.randomNum(0, this.contentHeight),
              1,
              0,
              2 * Math.PI
            );
            ctx.fill();
          }
        }
      },
      watch: {
        identifyCode() {
          this.drawPic();
        }
      },
      mounted() {
        this.drawPic();
      }
    };
    </script>
    

    组件使用

    <template>
      <div class="login-center-input">
        <input id="identifyCode" type="text" placeholder='请输入验证码' v-model="formInline.identifyCode"/>
        <div class="login-center-input-text">验证码</div>
        <div class="identifyBox" @click="refreshCode">
          <Sidentify :identifyCode="identifyCode"></Sidentify>
        </div>
      </div>
    </template>
    import Sidentify from '../components/common/identify'
    export default {
      name: "login",
      components:{Sidentify},
      data:{
         formInline: {
            username: "",
            password: "",
            oldPassword: "",
            identifyCode: ""
        },
     	 identifyCode:'',
      }
      mothod:{
    	refreshCode(){
          let identifyCodes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
          this.identifyCode = '';
          for(let i=0;i<4;i++){
            this.identifyCode += identifyCodes[Math.floor(Math.random()*identifyCodes.length)];
          }
        }
    }
    
    展开全文
  • vue验证码的实现

    2020-11-12 10:38:44
    Ant Design vue验证码的实现验证码组件(子组件)注册组件(父组件)效果说明实现思路父组件完整代码 验证码组件(子组件) #Verification.vue <template> <div class="s-canvas"> <canvas id="s-...
  • 主要为大家介绍了如何简单实现vue验证码60秒倒计时功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • springboot+vue验证码

    2021-02-03 13:54:34
    springboot+vue验证码 工具类 直接用不用改 package com.example.demo.Util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.imageio.ImageIO; import javax.servlet....
  • vue 验证码倒计时60s

    万次阅读 2017-07-17 14:19:17
    vue 验证码倒计时
  • 主要介绍了Vue验证码60秒倒计时功能简单实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue验证码点击更新

    2017-11-01 14:10:00
    vue验证码点击更新 不说啥,直接贴代码 html: <img class="captcha" @click="editCaptcha" :src="captcha"> js: editCaptcha () { this.captcha = url + '/getCaptcha?d='+Math.random(); } ...
  • 今天小编就为大家分享一篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Springboot Vue验证码校验

    千次阅读 2020-05-01 17:34:02
    项目中在登录注册环节肯定会用到验证码校验,Springboot整合Thymeleaf验证码校验之前已经做过了,那么现在Springboot和Vue前后端分离项目中该如何使用呢。 实现思路: 后端利用工具类生成验证码code,将验证码code...
  • vue验证码倒计时

    2021-03-12 14:14:02
    vue实现验证码倒计时 发送获取验证码请求成功以后利用setInterval每秒在原有时间上减1实现。 <span class="yzm" @click="codes" v-if="!btnBool" >{{yzmtext}}</span> <span class="yzm" v-if=...
  • Vue 验证码组件

    2021-04-01 11:19:10
    简介 从项目上摘过来的,觉得值得学习 想要用js更新验证码的的话用 this.$nextTick 更新组件的v-if的值,演示如下 this.isShowYzm = false; this.$nextTick(() => { this.isShowYzm = true; }); 演示 代码 组件代码...
  • vue验证码登录

    2020-07-13 10:51:18
    <template> <div> <header> </header> <div class="box" v-show="flag" > <div class="item-1"> 请输入手机号"> ()">获取验证码</span> </div> <hr> <div class="item-1"> 请输入短信验证码"> </div> <hr> ...
  • vue 验证码输入框

    2020-05-26 19:33:02
    <template> <div class="classnumber"> <div class="v-code"> <input ref="vcode" id="vcode" type="tel" maxlength="codeLength" v-model="aCodes" @focus="focused = true" @bl.
  • vue验证码组件

    2018-12-08 12:04:03
    代码如下: &lt;template&gt; &lt;div class="join_formitem"...验证码&lt;span&gt;:&lt;/span&gt;&lt;/label&gt; &lt;div class="captcha&q
  • vue验证码框组件

    2021-03-03 17:13:26
    npm install vue-pant yarn add vue-pant 页面按需引入 import 'vue-pant/lib/pant.css' import {boxInput} from 'vue-pant' <box-input v-model="value"></box-input> 组件属性 1.splitLineVisible...
  • vue 验证码组件

    千次阅读 2019-01-10 11:57:14
    在需要验证码的页面中引入SIdentify.vue组件。 import SIdentify from '../components/SIdentify' export default { name: 'Login', components: {SIdentify}, data () { return { identifyCodes: '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,983
精华内容 793
关键字:

vue验证码

vue 订阅