关于vue.js:Vue一些常用的工具类

本文介绍一些罕用的工具类

1.验证码
如下图，个别的后盾管理系统都会在登录的时候设计一个验证码，这个验证码是前端生成的，点击canvas能够切换验证码。二维码的类型是数字或者字母本人能够依据须要设置，

1.验证码的js
如下图，首先引入验证码的js

verifyCode的代码如下，本人依据须要批改长宽（_init办法中的宽和高），验证码的类型，色彩，烦扰线等。

function GVerify (options) { // 创立一个图形验证码对象，接管options对象为参数

this.options = { // 默认options参数值    id: '', // 容器Id    canvasId: 'verifyCanvas', // canvas的ID    width: '100', // 默认canvas宽度    height: '38', // 默认canvas高度    type: 'number', // 图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母    code: ''}if (Object.prototype.toString.call(options) === '[object Object]') { // 判断传入参数类型    for (var i in options) { // 依据传入的参数，批改默认参数值        this.options[i] = options[i]    }} else {    this.options.id = options}this.options.numArr = '0,1,2,3,4,5,6,7,8,9'.split(',')this.options.letterArr = getAllLetter()this._init()this.refresh()

}

GVerify.prototype = {

/** 版本号**/version: '1.0.0',/** 初始化办法**/_init: function () {    var con = document.getElementById(this.options.id)    var canvas = document.createElement('canvas')    // this.options.width = con.offsetWidth > 0 ? con.offsetWidth : '30'    // this.options.height = con.offsetHeight > 0 ? con.offsetHeight : '30'    this.options.width = '100'    this.options.height = '38'    canvas.id = this.options.canvasId    canvas.width = this.options.width    canvas.height = this.options.height    canvas.style.cursor = 'pointer'    canvas.innerHTML = '您的浏览器版本不反对canvas'    con.appendChild(canvas)    var parent = this    canvas.onclick = function () {        parent.refresh()    }},/** 生成验证码**/refresh: function () {    this.options.code = '';    var canvas = document.getElementById(this.options.canvasId)    if (canvas.getContext) {        var ctx = canvas.getContext('2d')    }    ctx.textBaseline = 'middle'    ctx.fillStyle = randomColor(180, 240)    ctx.fillRect(0, 0, this.options.width, this.options.height)    let txtArr = '';    if (this.options.type === 'blend') { // 判断验证码类型        txtArr = this.options.numArr.concat(this.options.letterArr)    } else if (this.options.type === 'number') {        txtArr = this.options.numArr    } else {        txtArr = this.options.letterArr    }    for (var i = 1; i <= 4; i++) {        var txt = txtArr[randomNum(0, txtArr.length)]        this.options.code += txt        ctx.font = randomNum(this.options.height / 2, this.options.height) + 'px SimHei' // 随机生成字体大小        ctx.fillStyle = randomColor(50, 160) // 随机生成字体色彩        ctx.shadowOffsetX = randomNum(-3, 3)        ctx.shadowOffsetY = randomNum(-3, 3)        ctx.shadowBlur = randomNum(-3, 3)        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'        var x = this.options.width / 5 * i        var y = this.options.height / 2        var deg = 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)    }    /** 绘制烦扰线**/    for (let i = 0; i < 4; i++) {        ctx.strokeStyle = randomColor(40, 180)        ctx.beginPath()        ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height))        ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height))        ctx.stroke()    }    /** 绘制烦扰点**/    for (let i = 0; i < this.options.width / 4; i++) {        ctx.fillStyle = randomColor(0, 255)        ctx.beginPath()        ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI)        ctx.fill()    }},/** 验证验证码**/validate: function (code) {    code = code.toLowerCase()    var v_code = this.options.code.toLowerCase()    if (code == v_code) {        return true    } else {        return false    }}

}
/ 生成字母数组/
function getAllLetter () {

var letterStr = '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'return letterStr.split(',')

}
/ 生成一个随机数/
function randomNum (min, max) {

return Math.floor(Math.random() * (max - min) + min)

}
/ 生成一个随机色/
function randomColor (min, max) {

var r = randomNum(min, max)var g = randomNum(min, max)var b = randomNum(min, max)return 'rgb(' + r + ',' + g + ',' + b + ')'

}

export {

GVerify

}
复制代码
2.登录页面
援用工具类

import { GVerify } from '@/assets/js/verifyCode.js';
复制代码
验证码的canvas代码

<el-form-item prop="verifyCode">

<div>    <el-input v-model="loginForm.verifyCode" @keyup.enter.native="enterEvent($event,3)" class="code-input" placeholder="请输出验证码" maxlength="4"></el-input>    <div id="canvas" width="100" height="38"></div></div><span class="red-color" v-if="codeErr">{{codeMsg}}</span>

</el-form-item>
复制代码
验证码的验证规定

const validateCode = (rule, value, callback) => {

 let verifyFlag = this.verifyCode.validate(value); if (!verifyFlag) {     callback(new Error('验证码输出谬误')); } else {     callback() }

};
复制代码
验证码的校验规定

loginRules: {
verifyCode: [

 { required: true, message: '验证码不能为空'}, { validator: validateCode, trigger: 'change'}

]
复制代码
二：依据一组坐标返回中心点的数组[纬度,纬度]
次要用于地图依据一组坐标点，计算中心点，关上地图时候，点在地图两头

/**

依据一组坐标返回中心点的数组[纬度,纬度]
@param points
@returns {number[]}
*/

export function getPointsCenter(points) {

var point_num = points.length; // 坐标点个数var X = 0, Y = 0, Z = 0;for(let i = 0; i < points.length; i++) {    if (points[i] == '') {        continue;    }    var lat, lng, x, y, z;    lat = parseFloat(points[i].latitude) * Math.PI / 180;    lng = parseFloat(points[i].longitude) * Math.PI / 180;    x = Math.cos(lat) * Math.cos(lng);    y = Math.cos(lat) * Math.sin(lng);    z = Math.sin(lat);    X += x;    Y += y;    Z += z;}X = X / point_num;Y = Y / point_num;Z = Z / point_num;var tmp_lng = Math.atan2(Y, X);var tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));return [tmp_lat * 180 / Math.PI, tmp_lng * 180 / Math.PI];

}
复制代码
三：依据原始数据计算缩放级别
次要是依据一组坐标点，计算地图缩放的级别，从而使得所有的坐标能够都展现在可视的区域内。

/**

依据原始数据计算缩放级别
@param points
*/

export function getZoom(points){

if(points.length > 0){    let maxLng = points[0].longitude;    let minLng = points[0].longitude;    let maxLat = points[0].latitude;    let minLat = points[0].latitude;    let res;    for (let i = points.length - 1; i >= 0; i--) {        res = points[i];        if(res.longitude > maxLng) maxLng = res.longitude;        if(res.longitude < minLng) minLng = res.longitude;        if(res.latitude > maxLat) maxLat = res.latitude;        if(res.latitude < minLat) minLat = res.latitude;    }    let zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"];// 级别18到3。    let pointA = new window.TMap.LatLng(maxLat, maxLng);  // 创立点坐标A    let pointB = new window.TMap.LatLng(minLat, minLng);  // 创立点坐标B    let distance = window.TMap.geometry.computeDistance([pointA, pointB]).toFixed(1);  // 获取两点间隔,保留小数点后两位    for (let i = 0,zoomLen = zoom.length; i < zoomLen; i++) {        if(zoom[i] - distance > 0){            return 18-i+3;// 之所以会多3，是因为地图范畴经常是比例尺间隔的10倍以上。所以级别会减少3。        }    }}

}
复制代码
以上就是最近用到的工具类了，心愿对你有帮忙哦，记录一下，温故而知新！！！

最初
如果你感觉此文对你有一丁点帮忙，点个赞。或者能够退出我的开发交换群：1025263163互相学习，咱们会有业余的技术答疑解惑

如果你感觉这篇文章对你有点用的话，麻烦请给咱们的开源我的项目点点star: https://gitee.com/ZhongBangKe...不胜感激！