初三语文视频,加格达奇天气,面包车坠塘致七死
做成之后就
是这个样子
接下来上代码
创建一个组件。显示验证码图片
<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: 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: 90 }, 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 = '#e6ecfd' 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>
在登录页面中
验证码输输入框
<el-form-item prop="code"> <el-input type="text" v-model="formlogin.code" placeholder="- - - -"> <template slot="prepend">验证码</template> <template slot="append"> <div class="login-code" @click="refreshcode"> <identify :identifycode="identifycode"></identify> </div> </template> </el-input> </el-form-item>
登录按钮
<el-button-group> <el-button style="width:100%" @click="submit" type="primary">登录</el-button> </el-button-group>
引入之前的组件(在例子中它叫identify)
import identify from './identify'
在登录组件中引入identify (这是验证码组件)这一部分略
在data中
// 表单 formlogin: { username: "", password: "", code: "" }, identifycodes: '1234567890abcdefjhijklinopqrsduvwxyz', identifycode: '', // 校验 rules: { username: [ { required: true, message: "请输入用户名", trigger: "blur" } ], password: [{ required: true, message: "请输入密码", trigger: "blur" }], code: [{ required: true, message: "请输入验证码", trigger: "blur" }] }
在mounted中
mounted () { // 初始化验证码 this.identifycode = '' this.makecode(this.identifycodes, 4) },
在method中
// 引入验证接口 ...mapactions("d2admin/account", ["login"]), // 重置验证码 refreshcode () { this.identifycode = '' this.makecode(this.identifycodes, 4) }, makecode (o, l) { for (let i = 0; i < l; i++) { this.identifycode += this.identifycodes[this.randomnum(0, this.identifycodes.length)] } }, randomnum (min, max) { return math.floor(math.random() * (max - min) + min) }, /** * @description 提交表单 */ // 提交登录信息 submit() { if (this.formlogin.code.tolowercase() !== this.identifycode.tolowercase()) { this.$message.error('请填写正确验证码') this.refreshcode() return } this.$refs.loginform.validate(valid => { if (valid) { // 登录 // 注意 这里的演示没有传验证码 // 具体需要传递的数据请自行修改代码 this.login({ vm: this, username: this.formlogin.username, password: this.formlogin.password }); } else { // 登录表单校验失败 this.$message.error("表单校验失败"); } }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论