前端常用工具库方法整理

前言

在闲余的时间整理一份我们可能用到的前端工具库方法。

1.获取url地址参数

export function getQueryStringByStr(data) { const url = data; // 获取url中"?"符后的字串 const theRequest = {}; if (url.indexOf('?') !== -1) { const str = url.substr(1); const strs = str.split('&'); for (let i = 0; i < strs.length; i += 1) { theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]); } } return theRequest; }

2.针对检索值(搜索)统一处理空格问题

/** * @param {Object} props * @description 针对搜索值做统一处理 */ export function convertParams(props) { const newParams = {}; for (const index in props) { const item = props[index]; const type = typeof item; if (item && type === 'string') { newParams[index] = item.replace(/\s/g, ''); } if (Object.prototype.toString.call(item) === '[object Object]') { newParams[index] = convertParams(item) } else { newParams[index] = item; } } return newParams; };

3.权限方法判断

/** * @param {Array|String} target 目标数组 * @param {Boolean} boolean 是否开启与的关系 * @description 判断当前用户是否在权限数据中 */ export const authority = (target, boolean = false) => { const str = getProps('authority') // 获取当前角色的所有权限码， 自定义获取; if (Array.isArray(target)) { if (boolean) { return target.every(item => roles.indexOf(item) > -1) } return target.some(item => roles.indexOf(item) > -1) } return str && str.indexOf(target) > -1 }

4.菜单栏权限控制是否显示

/** * 菜单栏权限显示隐藏/现在很多架构都是自动化路由，有现成的权限配置 * @param {Array} list 通过路由列表得到菜单列表 * @returns {Array} * @description 通过用户权限控制的菜单列表（简易版） */ export const hasChild = (item) => { return item.children && item.children.length !== 0 } export const getMenuByAside = (list) => { let res = []; list.forEach(item => { if (!item.access || authority(item.access)) { let obj = { title: item.title, index: item.index, icon: item.icon, access: item.access || undefined, } if (hasChild(item)) obj.children = getMenuByAside(item.children) if (hasChild(item) && authority(item.access)) { obj.children = getMenuByAside(item.children) } res.push(obj) } }) return res }

5.二维数组转换

/** * @param {Array} target 目标数组 * @param {String} key 目标key值 * @param {Boolean} boolean 是否需要数组转换 * @param {Object} option 匹配的对象key值,值：label/value/boolean * @return {Array} * @description 处理二维数组转一维数组匹配相关字段值 */ export const reduceConcat = (target, key, boolean, option) => { let newTarget = []; const { label, bool, value } = option || {}; newTarget = target && target.map(item => { if (boolean) { return item[key] && item[key].map(opt => ({ ...item, [key]: opt, [label]: bool ? item[label][value] : item[label] })) } return item[key]; } ).reduce((a, b) => a.concat(b)); return newTarget || []; }

7. 针对json数组对象的去重

/** * @param {Array} array 目标数据 * @param {String} label 匹配对象的字段 * @description 针对json数组对象的去重 */ export function uniqueArray(array, label) { const obj = {}; array = array.reduce((pre, next) => { !obj[next[label]] ? (obj[next[label]] = true && pre.push(next)) : ""; return pre; }, []); return array; }

6. 时间类

// 转换时间（时分秒） /** * @param {Number|String} msd 转换时间戳 * @description 将时间戳转换成时分秒 */ export function dealTimeToText(value) { let time = Math.floor(value / 1000) let h = Math.floor(Math.floor(time / 60) / 60) let min = Math.floor(time / 60) % 60 let s = Math.round(time % 3600 % 60) if (h > 0) { return `${h}h${min}min${s}s` } else if (min > 0) { return `${min}min${s}s` } else { return `${s}s` } } 秒转时分秒 // 当天晚上23:59:59 const endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1); // 一月时间 let start = new Date(); start.setMonth(start.getMonth() - 3); return start.getTime() > time.getTime() || time.getTime() > endTime; // 一周时间 const operateTime = [ new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000, new Date().setHours("23", "59", "59") ]; /** * @param {Number|String} value * @description 秒数转化为时分秒 */ export const formatSeconds = (value) => { let secondTime = parseInt(value), minuteTime = 0, hourTime = 0; if (secondTime > 60) { minuteTime = parseInt(secondTime / 60); secondTime = parseInt(secondTime % 60); if (minuteTime > 60) { hourTime = parseInt(minuteTime / 60); minuteTime = parseInt(minuteTime % 60); } } let result = "" + parseInt(secondTime) + "秒"; if (minuteTime > 0) { result = "" + parseInt(minuteTime) + "分" + result; } if (hourTime > 0) { result = "" + parseInt(hourTime) + "小时" + result; } return result; } 计算当前年龄 /** * @param {String} dateTime 接收的日期eg: 1994-03-2 || 1569404854000 * @description 通用年龄计算公式 * */ import moment from 'moment'; export const getAgeYear = (dateTime) => { let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/ let time = !reg.test(dateTime) ? moment(dateTime, 'YYYY-MM-DD') : dateTime; let regexp = time.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); if (!regexp) return ''; let date = new Date(regexp[1], regexp[3] - 1, regexp[4]); if (date.getFullYear() == regexp[1] && (date.getMonth() + 1) == regexp[3] && date.getDate() == regexp[4]) { let year = new Date().getFullYear(); return year - regexp[1]; } } 时间转换 export const formatDate = (timelong, format = 'YYYY-MM-DD') => { function format2n(val) { return val < 10 ? '0' + '' + val : val; } let date = new Date(timelong); let year = date.getFullYear() + ''; let month = format2n(date.getMonth() + 1) + ''; let day = format2n(date.getDate()) + ''; let hour = format2n(date.getHours()) + ''; let minute = format2n(date.getMinutes()) + ''; let second = format2n(date.getSeconds()) + ''; return format.replace(/YYYY/g, year).replace(/YYY/g, year.slice(1)).replace(/YY/g, year.slice(2)).replace(/Y/g, year.slice(1)).replace(/MM/g, month).replace(/M/g, month.slice(1)).replace(/DD/g, day).replace(/D/g, day.slice(1)).replace(/hh/g, hour).replace(/h/g, hour.slice(1)).replace(/mm/g, minute).replace(/m/g, minute.slice(1)).replace(/ss/g, second).replace(/s/g, second.slice(1)); };

7.随机生成16进制颜色值，并改变状态

// 组件渲染后，500毫秒改变一次组件颜色 componentDidMount() { this.interval = setInterval(this.getRandomColor, 500); } getRandomColor = () => { this.setState({ col: '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6), }); }

8.背景水印简易版

/** * @param {str} 用户需要显示的水印信息 * @description 背景水印 * */ export function addWaterMarker(str) { const can = document.createElement('canvas'); // const { body } = document; // body.appendChild(can); can.width = 200; can.height = 100; can.style.display = 'none'; const cans = can.getContext('2d'); cans.rotate(20 * Math.PI / 180); cans.font = '16px Microsoft JhengHei'; cans.fillStyle = 'rgba(17, 17, 17, 0.50)'; cans.textAlign = 'left'; cans.textBaseline = 'Middle'; cans.fillText(str, can.width / 3, can.height / 2); return `url(${can.toDataURL('image/png')})`; } /** * url转base64 */ urlToBase64(url) { return new Promise((resolve, reject) => { let canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"), img = new Image(); img.crossOrigin = "Anonymous"; img.src = url; img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); let dataUrl = canvas.toDataURL("image/jpeg"); canvas = null; resolve(dataUrl); }; }); },

9.常用code码统一报错提示

const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已经进入后台排队（异步任务）。', 204: '删除数据成功。', 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。', 401: '用户没有权限（令牌、用户名、密码错误）。', 403: '用户得到授权，但是访问是被禁止的。', 404: '发出的请求针对的是不存在的记录，服务器没有进行操作。', 406: '请求的格式不可得。', 410: '请求的资源被永久删除，且不会再得到的。', 422: '当创建一个对象时，发生一个验证错误。', 500: '服务器发生错误，请检查服务器。', 502: '网关错误。', 503: '服务不可用，服务器暂时过载或维护。', 504: '网关超时。', };

10.原生ajax下载导出

/** * @param {String} url 下载URL地址 * @param {String|Number} downloadName 下载文件名称 * @Parma {type} 下载请求方法get||post * @description 导出Excel文件 * */ import Vue from 'vue'; import moment from 'moment'; import Cookies from "js-cookie"; const that = new Vue(); export function fileDownload(url, downloadName = moment(new Date(), 'YYYY-MM-DD') + "任务监控数据表", option) { const { type, status, message, messageErr, params } = option; let fileName = downloadName + '.xlsx'; let request = new XMLHttpRequest(); status ? that.$message({ type: 'warning', showClose: true, message: message || '已点击正在下载，请稍后...', }) : null; request.open(type || 'GET', url, true); request.setRequestHeader("Authorization", Cookies.get("user-token")); request.setRequestHeader( "Content-Type", params ? 'application/json' : "application/x-www-form-urlencoded; charset=UTF-8" ); request.responseType = "blob"; request.onload = function () { if (this.status === 200) { let blob = this.response; if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, fileName); } else { let downloadLink = document.createElement("a"); let contentTypeHeader = request.getResponseHeader("Content-Type"); downloadLink.href = window.URL.createObjectURL( new Blob([blob], { type: contentTypeHeader }) ); downloadLink.download = fileName; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); window.URL.revokeObjectURL(downloadLink.href) } } else { that.$message({ type: 'error', showClose: true, message: messageErr ||'文件下载失败...', }); } }; request.send(params ? JSON.stringify(params) : void null); }

10.file文件转码

const toDataUrl = (blob) => { return new Promise(resolve => { let file = new FileReader(); file.onload = event => { resolve(event.target.result); }; file.readAsDataURL(blob); }); },

11. url参数加密

export const Base64 = { //加密 encode(params) { return btoa(encodeURIComponent(params).replace(/%([0-9A-F]{2})/g, function toSolidBytes(match, option) { return String.fromCharCode('0x' + option); })); }, //解密 decode(params) { return decodeURIComponent(atob(params.replace(/\s/g, '+')).split('').map(option => '%' + ('00' + option.charCodeAt(0).toString(16)).slice(-2)).join('')); } }

\s : 表示 space ，空格 +： 一个或多个 ^： 开始，^\s，以空格开始 结束，\s$，以空格结束 |：或者 /g：global， 全局

12. 背景水印

'use strict' const watermark = {}; /** * @param {String} str // 要设置的水印的内容 * @param {String} container // 需要设置水印的容器 */ const id = '1.23452384164.123412415'; const setWatermark = (str, container) => { if (!container) return false; if (document.getElementById(id) !== null) { // 查看页面上有没有，如果有则删除 const childelement = document.getElementById(id) childelement.parentNode.removeChild(childelement) } const containerWidth = container.offsetWidth // 获取父容器宽 const containerHeight = Math.max(container.scrollHeight, document.body.clientHeight); // 获取父容器高 container.style.position = 'relative' // 设置布局为相对布局 const can = document.createElement('canvas') // 创建canvas元素(先制作一块背景图) can.width = 300 // 设置每一块的宽度 can.height = 200 // 高度 const cans = can.getContext('2d') // 获取canvas画布 cans.rotate(20 * Math.PI / 180) // 逆时针旋转π/9 cans.font = '14px Microsoft JhengHei'; // 设置字体 cans.fillStyle = 'rgba(17, 17, 17, 0.2)' // 设置字体的颜色 cans.textAlign = 'left' // 文本对齐方式 cans.textBaseline = 'Middle' // 文本基线 cans.fillText(str, can.width / 3, can.height / 2); // 绘制文字 const div = document.createElement('div') // 创建一个div元素 div.id = id // 设置id div.style.pointerEvents = 'none' // 取消所有事件 div.style.top = '0px' div.style.left = '0px' div.style.position = 'absolute' div.style.zIndex = '10000' div.style.width = containerWidth + 'px' div.style.height = containerHeight + 'px' div.style.background = 'url(' + dataURLtoBlob(can.toDataURL('image/png')) + ')' container.appendChild(div) // 追加到页面 return id } function dataURLtoBlob(dataurl) { let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return URL.createObjectURL(new Blob([u8arr], { type: mime })); } let _interval = null; // 该方法只允许调用一次 watermark.set = (str, container) => { let id = setWatermark(str, container) _interval = setInterval(() => { if (document.getElementById(id) === null) { id = setWatermark(str, container) } }, 500) window.onresize = () => { // 监听页面大小的变化 setWatermark(str, container) } } export default watermark;

12. 随机生成颜色

getArrRandomly() { const tagsColor = ["info", "warning", "danger", ""]; var colorIndex = Math.floor(Math.random() * tagsColor.length); var color = tagsColor[colorIndex]; tagsColor.splice(colorIndex, 1); return color; },