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...不胜感激 ！