Vue 之 工作中常用的公共方法封装整理（不定时更新）
验证只能为中文数字字母
function checkIsChEnNum(str){
if (str == "")
return true;
var pattern = /^[A-Za-z0-9\u4e00-\u9fa5]+$/gi;
if (pattern.test(str))
return true;
else
return false;
}
将当前时间转为 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) / 1000;
} else {
// yyyy-MM-dd | yyyy-MM-dd HH:mm:ss
timestamp = Date.parse(new Date(_time)) / 1000;
}
return timestamp;
}
保留两位小数
function toDecimal2(x) {
let f = parseFloat(x);
if (isNaN(f)) return '';
f = Math.round(x*100)/100;
let s = f.toString();
let rs = s.indexOf('.');
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + 2) {
s += '0';
}
return s;
}
后端返回文件流下载（导出）文件
文件后缀名、文件类型、type值对应关系表 点击此处查看
// blobData 后台返回的文件流二进制数据
// fileName 自定义文件名称
// suffixName 文件后缀名
// fileType 文件后缀名对应的type值
function exportFile(blobData, fileName, suffixName, fileType) {
let blob = new Blob([blobData], {
type: fileType })
let downloadElement = document.createElement('a')
let href = window.URL.createObjectURL(blob) // 创建下载的链接
downloadElement.href = href
downloadElement.download = fileName+ suffixName // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
}
// 示例：
exportFile(blobData, '订单明细', '.xls', 'application/vnd.ms-excel');
将中横线连接的字符串转成驼峰格式
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
下载本地资源文件
这个方法是针对某个项目后端不方便写下载接口或者其他原因导致只能前端实现下载文件的一个下载解决方案，可自行选择是否需要。
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();
}
//调用
downloadLocalFile('test.doc', '测试')
写在末尾
这里可以将这些公共方法全部写在一个
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', '测试')
}
后续会不定时更新；
如有不足，望大家多多指点！ 谢谢！