user: '', //用户名
pwd: '', //密码
code: '', //用户输入的验证码
rand: [], //随机生成的验证码
isRem: false,//记住密码
notRem: true, //不记住密码（默认此选项）
codeList: ['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'], //随机验证码可选字母
}
},
methods: {
//点击登录
login() {
//验证码的验证
var randStr = this.rand.toString().replace(/,/g, ""); //随机生成的验证码为数组形式，此处将其转为字符串并去掉中间相隔的逗号
var codeStr = this.code; //用户输入的验证码
if (randStr.toLowerCase() == codeStr.toLowerCase()) { //比较用户输入的与随机生成的验证码,不区分大小写
this.$message.success('验证码正确，可正常登录')
} else {
this.$message.error('请输入正确的验证码');
}
//点击登录后的程序逻辑...
},
//是否记住密码
rem() {
//记住密码
if (this.notRem == true) {
this.notRem = false;
this.isRem = true;
//...
} else {
//不记住密码
this.notRem = true;
this.isRem = false;
//...
}
},
//忘记密码
forget() {
console.log("忘记密码");
//忘记密码后的程序逻辑...
},
//绘制验证码
drawCode() {
//获取canvas画布
var canvas = document.getElementById('verifyCanvas');
var context = canvas.getContext('2d');
//填充画布
context.fillStyle = 'cornflowerblue';
context.fillRect(0, 0, canvas.width, canvas.height);
//创建渐变
var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop('0', 'yellow');
gradient.addColorStop('0.5', 'black');
gradient.addColorStop('1.0', 'red');
//字体
context.fillStyle = gradient;
context.font = '30px Arial';
//验证码的位置
var x = [];
var y = [];
for (let i = 0; i < 4; i++) {
this.rand[i] = this.codeList[Math.floor(Math.random() * this.codeList.length)];
x[i] = i * 26 + 10;
y[i] = 30;
context.fillText(this.rand[i], x[i], y[i])
}
//绘制若干随机点
for (let i = 0; i < 20; i++) {
this.drawDot(canvas, context)
}
this.convertCanvasToImage(canvas);
console.log(this.rand);
},
drawDot(canvas, context) {
var px = Math.floor(Math.random() * canvas.width);
var py = Math.floor(Math.random() * canvas.height);
context.moveTo(px, py);
context.lineTo(px + 1, py + 1);
context.lineWidth = 0.2;
context.stroke()
},
//绘制图片
convertCanvasToImage(canvas) {
document.getElementById('verifyCanvas').style.display = 'none';
var image = document.getElementById('code_img');
image.src = canvas.toDataURL('image/png');
return image
},
//刷新验证码
refreshCode() {
var renew = document.getElementById('codeBox');
var codeObj = document.getElementById('verifyCanvas');
renew.removeChild(codeObj);
var canvas = document.createElement('canvas');
canvas.width = '112';
canvas.height = '38';
canvas.id = 'verifyCanvas';
renew.appendChild(canvas);
this.drawCode()
}
},
mounted() {
//调用绘制方法
this.drawCode();
this.refreshCode()
}
}
.login { background-color: #3a92a4; border: 2px solid black; border-radius: 10px; width: 5.5rem; height: 5.4rem; margin: auto; } .login > p { float: left; color: white; font-family: "Agency FB"; font-size: 25px; font-weight: bolder; margin: 15px 15px; } /*表单区域*/ .form { width: 80%; height: 90%; margin: 1.1rem auto; } .form .userAndPass { margin-bottom: 0.5rem; } /*验证码图片*/ .form #code_img { position: absolute; top: 4.31rem; width: 1.1rem; height: 0.5rem; border: 1px solid #7EDDB4; left: 10.63rem; cursor: pointer; background-color: #E6F9F2; border-radius: 5px; } .userAndPass .txt /deep/ .el-input__inner { border-radius: 5px !important; height: 0.6rem; } /*记住密码*/ .remember { cursor: pointer; width: 50%; display: flex; font-family: SourceHanSansCN-Regular; font-size: 14px; color: #FFFFFF; letter-spacing: 1.29px; font-weight: 400; margin: auto; line-height: 0.2rem; } .remember img { width: 0.2rem; height: 0.2rem; vertical-align: middle; margin-right: 0.05rem; } /*登录按钮*/ .btn { cursor: pointer; width: 65%; height: 0.6rem; text-align: center; position: relative; display: flex; font-family: SourceHanSansCN-Bold; font-size: 20px; color: #FFFFFF; letter-spacing: 2.85px; background-color: #4ec5f0; border-radius: 5px; } .btn p { margin: auto; line-height: 0.6rem; } .btn img { width: 0.15rem; height: 0.15rem; vertical-align: middle; margin-left: 0.4rem; } .forget { cursor: pointer; font-family: SourceHanSansCN-Regular; font-size: 12px; color: #FFFFFF; letter-spacing: 1.12px; text-align: right; margin-top: 0.09rem; } #### css 1，盒模型 2，如何实现一个最大的正方形 3，一行水平居中，多行居左 4，水平垂直居中 5，两栏布局，左边固定，右边自适应，左右不重叠 6，如何实现左右等高布局 7，画三角形 8，link @import导入css 9，BFC理解  #### js 1，判断 js 类型的方式 2，ES5 和 ES6 分别几种方式声明变量 3，闭包的概念？优缺点？ 4，浅拷贝和深拷贝 5，数组去重的方法 6，DOM 事件有哪些阶段？谈谈对事件代理的理解 7，js 执行机制、事件循环 8，介绍下 promise.all 9，async 和 await, 10，ES6 的 class 和构造函数的区别 11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式, 12，介绍一下rAF(requestAnimationFrame) 13，javascript 的垃圾回收机制讲一下, 14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？  **开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
