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

37次阅读

共计 5749 个字符，预计需要花费 15 分钟才能阅读完成。

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

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

正文完
vue.js
发表至： vue.js
2021-12-21
 0
关于vue.js:vue-中循环渲染对象并通过ref-取值
关于vue.js:VUEX的store用法
关于vue.js:vue源码分析响应式系统一
关于vue.js:MVVM框架模式详解