Vue 之工作中常用的公共方法封装整理（不定时更新【2023-07-03已更】）

zhuangv

已于 2023-07-03 15:51:00 修改

阅读量2.6k

点赞数 16

分类专栏： Vue 文章标签： vue.js javascript vue

于 2021-10-31 14:28:46 首次发布

本文链接：https://blog.csdn.net/Zhuangvi/article/details/121062814

版权

Vue 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

Vue 之工作中常用的公共方法封装整理（不定时更新）

验证只能为中文数字字母

function checkIsChEnNum(str){
    if (str == "") return false;
    let pattern = /^[A-Za-z0-9\u4e00-\u9fa5]+$/gi;
    return pattern.test(str)
}

将当前时间转为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss

function getCurrentDate(type, date) {
    const date1 = date ? new Date(date) : new Date();
    let y = date1.getFullYear();
    let M = date1.getMonth() + 1;
    let d = date1.getDate();
    let HH = date1.getHours();
    let mm = date1.getMinutes();
    let ss = date1.getSeconds();

    M = M > 9 ? M : '0' + M ;
    d = d > 9 ? d : '0' + d ;
    HH = HH > 9 ? HH : '0' + HH ;
    mm = mm > 9 ? mm : '0' + mm ;
    ss = ss > 9 ? ss : '0' + ss ;
    
	if (type == 'yyyy-MM-dd') {
    	return `${y}-${M}-${d}`;
    } else if (type == 'yyyy-MM-dd HH:mm:ss'){
    	return `${y}-${M}-${d} ${HH}:${mm}:${ss}`;
    }
}

时间戳转化为yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss

function formatTimestamp(type, time) {
    let date = new Date();
    date.setTime(time);
    let y = date.getFullYear();
    let M = date.getMonth() + 1;
    let d = date.getDate();
    let HH = date.getHours();
    let mm = date.getMinutes();
    let ss = date.getSeconds();

    M = M > 9 ? M : '0' + M ;
    d = d > 9 ? d : '0' + d ;
    HH = HH > 9 ? HH : '0' + HH ;
    mm = mm > 9 ? mm : '0' + mm ;
    ss = ss > 9 ? ss : '0' + ss ;
    
	if (type == 'yyyy-MM-dd') {
    	return `${y}-${M}-${d}`;
    } else if (type == 'yyyy-MM-dd HH:mm:ss'){
    	return `${y}-${M}-${d} ${HH}:${mm}:${ss}`;
    }
}

将中国标准时间或者yyyy-MM-dd | yyyy-MM-dd HH:mm:ss转成时间戳

// 此方法常用于比较两个时间的前后顺序
// time: 需要转换的时间；
// type: 时间的格式（可选，如果不传默认需要转换的时间格式为yyyy-MM-dd | yyyy-MM-dd HH:mm:ss）
function formatTimeToStamp(time, type) {
	let timestamp = '';
    if(type == 'GMT') { // 中国标准时间
    	timestamp = Date.parse(time);
    } else { // yyyy-MM-dd | yyyy-MM-dd HH:mm:ss
    	timestamp = Date.parse(new Date(time));
    }
    return timestamp;
}

保留N位小数

/**
 * 保留n位小数，注意此方法返回的是 string类型，小数点后面不足的位数会自动补 0
 * @param {number} num 初始数字
 * @param {number} n 保留几位小数
 * @returns string
 */
function numToFixed(num, n) {
	const _num = Number(num)
	const _n = Number(n)
	return _num.toFixed(_n)
}

/**
 * 保留n位小数，注意此方法返回的是 number类型
 * @param {number} num 初始数字
 * @param {number} n 保留几位小数
 * @returns number
 */
function numToFixed2(num, n) {
	const _num = Number(num)
	const _n = Number(n)
    return Math.round(_num * Math.pow(10, _n)) / Math.pow(10, _n)
}

/**
 * 保留n位小数，注意此方法返回的是 string类型，小数点后面不足的位数会自动补 0
 * @param {number} num 初始数字
 * @param {number} n 保留几位小数
 * @returns string
 */
function numToFixed3(num, n) {
	const _num = Number(num)
	const _n = Number(n)
	const newNum = Math.round(_num * Math.pow(10, _n)) / Math.pow(10, _n)
	let str = newNum.toString()
	if (str.indexOf('.') < 0) {
		str += '.'
	}
	const len = str.length
	const idx = str.indexOf('.')
	for (let i = len - idx; i <= _n; i++) {
		str += '0'
	}
	return str
}

toFixed() 使用的是银行家舍入规则：四舍六入五取偶（又称四舍六入五留双）。
银行家舍入法：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。
所以0.015 转换后是0.01，0.025则是0.03；

需要用哪种方法看需求自行选择吧

将数字按千分位显示（可选 return￥、$ 开头的）

/**
 * 将数字按千分位显示，小数点后的不做千分位显示，保留原数字小数位
 * @param {number | string} num 初始数字
 * @returns string
 */
function thousandBitSeparator(num) {
    const str = num.toString()
    const arr = str.split('.')
    const str1 = arr[0].replace(/\d{1,3}(?=(\d{3})+$)/g, function (a, b, c) {
        return a + ','
    })
    return arr[1] ? str1 + '.' + arr[1] : str1;
}

/**
 * 将数字按千分位显示，默认小数点后只保留3位，加了type 参数后，小数点保留2位
 * @param {number | string} num 初始数字
 * @param {string} type 类型，USD：（美元）格式化为千分位带 $符号输出，默认保留两位小数（四舍五入），补0
 *                           CNY：（人民币）格式化为千分位带￥符号输出，默认保留两位小数（四舍五入），补0
 * @returns string
 */
function thousandBitSeparator1(num) {
	const _num = Number(num)
    const _type = type && type.toUpperCase()
    let str;
    switch(_type) {
        case 'USD': 
	        str = _num.toLocaleString("en-US", { style: "currency", currency: "USD" })
	        break
        case 'CNY': 
	        str = _num.toLocaleString("zh-Hans-CN", { style: "currency", currency: "CNY" })
	        break
        default : 
        	str = _num.toLocaleString()
    }
    return str;
}
console.log('thousandBitSeparator', thousandBitSeparator(100000000000.001))
console.log('thousandBitSeparator', thousandBitSeparator('100000000000.01201'))
console.log('thousandBitSeparator111', thousandBitSeparator1('1000000000.001201'))
console.log('thousandBitSeparator111', thousandBitSeparator1('1000000000.055', 'usd'))
console.log('thousandBitSeparator111', thousandBitSeparator1('1000000000.12', 'CNY'))

在这里插入图片描述

将中横线连接的字符串转成驼峰格式

function changeStr(str){
    var re=/-(\w)/g;
    return str.replace(re, function ($0,$1){
        return $1.toUpperCase();
    });
}
// 示例：
let str = 'border-top-right';
console.log('str', changeStr(str)) // str borderTopRight

后端返回文件流下载（导出）文件

文件后缀名、文件类型、mimeType值对应关系表：mimeTypeStr的值 点击此处查看

// 创建一个a标签，并做点击下载事件
function downloadFile(hrefUrl, fileName){
    let a = document.createElement('a')
    a.href = hrefUrl
    a.download = fileName // 下载后文件名
    document.body.appendChild(a)
    a.click() // 点击下载
    document.body.removeChild(a) // 下载完成移除元素
}

// blobData 后台返回的文件流二进制数据
// mimeTypeStr 文件后缀名对应的type值(媒体文件类型)
// fileName 自定义文件名称
// 后端返回文件流公共导出
function downloadFileByFileFlow(blobData, mimeTypeStr, fileName) {
    let blob = new Blob([blobData], { type: mimeTypeStr })
    let hrefUrl = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadFile(hrefUrl, fileName);
}
// 示例：blobData为后端返回的文件流
downloadFileByFileFlow(blobData, 'application/vnd.ms-excel', '订单明细');

后端返回base64 下载（导出）文件

文件后缀名、文件类型、mimeType值对应关系表：mimeTypeStr的值 点击此处查看

// 创建一个a标签，并做点击下载事件
function downloadFile(hrefUrl, fileName){
    let a = document.createElement('a')
    a.href = hrefUrl
    a.download = fileName // 下载后文件名
    document.body.appendChild(a)
    a.click() // 点击下载
    document.body.removeChild(a) // 下载完成移除元素
}
// 封装blob对象
function dataURLToBlob(base64Str, mimeTypeStr) {
    let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串，base-64 编码使用方法是 btoa()
    let length = bstr.length;
    let u8arr = new Uint8Array(length); // 创建初始化为0的，包含length个元素的无符号整型数组
    while (length--) {
        u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码
    }
    return new Blob([u8arr], { type: mimeTypeStr }); // 返回一个blob对象
}

// 后端返回base64公共导出
function downloadFileByBase64(base64Str, mimeTypeStr, fileName){
    let blobObj = dataURLToBlob(base64Str, mimeTypeStr)
    let url = window.URL.createObjectURL(blobObj)
    downloadFile(url, fileName)
}
// 示例：res为后端返回的base64字符串
downloadFileByBase64(res, 'application/vnd.ms-excel', '订单明细');

后端返回文件地址，前端下载文件到本地

如果还有对 Fetch 不熟悉不了解的同学，点这里查看MDN关于 Fetch 的介绍以及说明
如果还有对 Blob 不熟悉不了解的同学，点这里查看MDN关于 Blob 的介绍以及说明

/**
 * 后端返回文件地址，前端下载文件到本地
 * @param {string} fileUrl 后端返回的文件地址
 * @param {string} fileName  文件名称，默认当前时间戳
 */
function downloadFile (fileUrl, fileName = new Date().valueOf().toString()) {
  fetch(fileUrl).then(res =>
    res.blob().then(blob => {
      let a = document.createElement('a')
      let url = window.URL.createObjectURL(blob)
      a.href = url
      a.download = fileName
      a.click()
      window.URL.revokeObjectURL(url)
    })
  )
}

下载本地资源文件

这个方法是针对某个项目后端不方便写下载接口或者其他原因导致只能前端实现下载文件的一个下载解决方案，可自行选择是否需要。


let prefixUrl = process.env.NODE_ENV === 'production' ? '/test/' : '/';
// 下载本地资源文件
// file 文件全称包含文件扩展名
// fileName下载下来的文件名称（自定义）
function downloadLocalFile(file, fileName) {
    let a = document.createElement('a');
    // 路径中'/'为根目录，即index.html所在的目录
    a.href = prefixUrl + 'static/downloadFile/' + file;
    // 下载下来的文件名
    a.download = fileName;
    // 添加点击
    a.click();
    // 下载完成移除元素
    document.body.removeChild(a)
}

//调用
downloadLocalFile('test.doc', '测试')

对象数组去重

对象数组去重在工作中用的还是挺多了，这只是其中的一种方法，还有其他的方法思路解决，详情查看JavaScript 之普通数组、对象数组的去重（涉及多个场景）

/**
 * 对象数组去重
 * @param {array} arr，需要去重的数组
 * @param {string} key，通过指定key值进行去重
 * @returns {array} 返回一个去重后的新数组
 */
function noRepeatArrOfObj(arr, key){
  const res = new Map();
  return arr.filter((item) => !res.has(item[key]) && res.set(item[key], true));
}

输入框值的整数位、小数位的输入位数限制

/**
 * 限制输入框值的整数、小数位数
 * 默认限制2位小数，整数位不限制
 * @param {number | string} value，需要位数限制的值
 * @param {number} integerMax，通过指定integerMax值进行整数位的位数限制
 * @param {number} digits，通过指定digits值进行小数位的位数限制
 * @returns {string} value，返回一个位数限制的值
 */
function checkNum(value, integerMax, digits) {
	let reg;
	if (integerMax) {
	    reg = new RegExp(`^(\\-)*(\\d{${integerMax}}).*$`); // 通过 integerMax 限制整数位,
	    if (!value.includes('.')) {
	      value = value.replace(reg, '$1$2');
	    }
	}
	if (digits) {
	    reg = new RegExp(`^(-)*(\\d*)\\.(\\d{0,${digits}}).*$`); // 通过 digits 限制小数位,
	    value = value.replace(reg, '$1$2.$3');
	}
	if (integerMax && digits) {
	    reg = new RegExp(`^(-)*(\\d{${integerMax}}).*\\.(\\d{0,${digits}}).*$`);
	} else {
	    reg = new RegExp(`^(-)*(\\d*).*\\.(\\d{0,2}).*$`);
	}
	
    value = value.replace(reg, '$1$2.$3');
    return value
}

深拷贝

function deepCopy(obj){
    // 判断是否是简单数据类型，
    if(typeof obj == "object"){
        // 复杂数据类型
        let result = obj.constructor == Array ? [] : {};
        for(let i in obj){
            result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
        }
    } else {
        // 简单数据类型 直接 = 赋值
        var result = obj;
    }
    return result;
}

判断是否为空

// 可根据实际情况增加条件判断
function isEmpty(e) {
    switch (e) {
    	case "":
	    case null:
    	case false:
	    case undefined:
    	    return true;
    	default:
      		return false;
  }
}

写在末尾

这里可以将这些公共方法全部写在一个 publicMethods.js 文件中，然后在 main.js 文件中引入，并抛给 vue 原型，然后这样的好处就是，不管在哪个 vue 文件中，都能通过 this.xxx.xxx 的方式调用封装的公共方法；

main.js

import publicMethod from './utils/publicMethods.js';
Vue.prototype.$public = publicMethod;

vue文件中调用

downLoadFile() {
    this.$public.downloadLocalFile('test.doc', '测试')
}

后续会不定时更新；

如有不足，望大家多多指点！谢谢！