基于vue项目的js工具方法汇总
以下是个人在vue项目的开发过程中经常会用到的一些公共方法,在此进行汇总,方便以后及有需要的朋友查看~
let util = {};
/**
* @description 日期格式化
* @param {Date} date 日期
* @param {String} fmt 日期格式 eg: yyyy-MM-dd hh:mm:ss
*/
util.dateFormat = function (date, fmt) {
var o = {
'M+': date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日
'h+': date.getHours(), // 小时
'm+': date.getMinutes(), // 分
's+': date.getSeconds(), // 秒
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
'S': date.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
}
}
return fmt;
};
/**
* @description 文件下载
* @param {Object} data 数据
* @param {String} fileName 下载文件名
*/
util.download = function (data, fileName) {
//创建一个blob对象,file的一种
let blob = new Blob([data], { type: 'application/x-xls' });
if ('download' in document.createElement('a')) { // 非IE下载
let link = document.createElement('a');
if (window.URL) {
link.href = window.URL.createObjectURL(blob);
} else {
link.href = window.webkitURL.createObjectURL(blob);
}
link.download = fileName;
document.body.appendChild(link);
link.click();
link.remove();
}else { // IE10+下载
navigator.msSaveBlob(blob, fileName);
}
};
/**
* @description 校验导入execl格式
* @param {file} file 导入文件对象
*/
util.validateExecl = function(file) {
const isXLS = file.type === 'application/vnd.ms-excel';
const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (!isXLS && !isXLSX) {
this.$message.error('只支持导入execl文件');
return false;
}
};
/**
* @description 校验上传图片格式和大小
* @param {file} file 导入文件对象
*/
util.validateImage = function(file) {
const isPNG = file.type.toLowerCase() === 'image/png';
const isJPG = file.type.toLowerCase() === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是JPG或PNG格式!');
return false;
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2M!');
return false;
}
};
AES加密/解密,需要先安装依赖 crypto-js。注:具体的选项参数可自行百度了解噢
// 自定义密钥
const key = CryptoJS.enc.Utf8.parse('ljycykxbchsbqtcy')
// 加密
util.encrypt = function(str) {
let srcs = CryptoJS.enc.Utf8.parse(str)
let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7})
return encrypted.toString()
};
// 解密
util.decrypt = function(str) {
let decrypt = CryptoJS.AES.decrypt(str, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7})
return CryptoJS.enc.Utf8.stringify(decrypt).toString()
};
MD5加密,需要先安装依赖 js-md5
// 在main.js中添加以下代码
import md5 from 'js-md5';
Vue.prototype.$md5 = md5; // str为需要加密字段
let md5Str = this.$md5(str);
/**
* @description 倒计时
* @param {} time 绑定展示的倒计时时间,初始值60s
*/
let timer = null
timer = setInterval(function() {
if(this.time > 0) {
this.time--
}else {
clearInterval(timer)
}
}, 1000)
转换file文件对象为base64字符串
let reader = new FileReader()
// file为通过上传组件选择的文件对象
reader.readAsDataURL(file)
reader.onload = function(e) {
let base64 = e.target.result
}
/**
* @description 四舍五入
* @param {Number} num 数值
* @param {Number} digits 小数位数
*/
util.round = function (num, digits) {
return Math.round(num * Math.pow(10, digits)) / Math.pow(10, digits);
};
/**
* @description 回到顶部
*/
util.backTop= function () {
let timer = setInterval(() => {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
let ispeed = Math.floor(-scrollTop / 5);
document.documentElement.scrollTop = document.body.scrollTop = scrollTop + ispeed;
if(scrollTop === 0) {
clearInterval(timer);
}
}, 10);
};
/**
* @description 数组对象排序
* @param {Array} array 数组
* @param {String} prop 排序字段
* @param {String} order 升序或降序, asc:升序|desc:降序
*/
sortData(array, prop, order) {
array.sort(function(item1, item2){
let value1 = item1[prop];
let value2 = item2[prop];
if(value1 < value2) {
return order == 'desc' ? 1 : -1;
}else if (value1 > value2) {
return order == 'desc' ? -1 : 1;
}else {
return 0;
}
});
}
/**
* @description 快速排序
* @param {Array} arr 数组
*/
quickSort(arr) {
if(arr.length <= 1) {
return arr;
}
var index = Math.floor(arr.length / 2);
var pivot = arr.splice(index, 1)[0];
var left = [], right = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] < pivot) {
left.push(arr[i]);
}else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
}
export default util;
持续更新中~~
基于vue项目的js工具方法汇总的更多相关文章
- webstorm如何调试vue项目的js
webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写 ...
- Vue项目的npm环境搭建
Vue项目的环境搭建主要步骤如下: vue项目创建 安装NodeJS +到官网下载自己系统对应的版本,这里我们下载Windows系统的64位zip文件,下载完成后解压,可以看到里面有一个node.ex ...
- 基于Vue cli生成的Vue项目的webpack4升级
前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...
- 基于apktool项目的android批量打包工具,多平台支持
好久木有写博客了,今天有点兴致就写一下,献上一个没怎么用的批量打包工具,python实现的,虽然说现在android的批量打包有一个很好的工具可以使用gradle,这个灰常牛叉的工具和android ...
- vue项目的webpack设置请求模拟数据的接口方法
最近在跟着视频写饿了吗vue项目,其中模拟数据由于webpack版本变化,跟视频中不一致,下方博客有解决方案,其实视频里面的还能看懂,现在webpack的服务都在插件包里了,好难找. 请参考:http ...
- 56.关于vue项目的seo问题
不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...
- webrtc笔记(1): 基于coturn项目的stun/turn服务器搭建
webrtc是google推出的基于浏览器的实时语音-视频通讯架构.其典型的应用场景为:浏览器之间端到端(p2p)实时视频对话,但由于网络环境的复杂性(比如:路由器/交换机/防火墙等),浏览器与浏览器 ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- vue项目的mode:history模式
最近做的Vue + Vue-Router + Webpack +minitUI项目碰到的问题,在此记录一下,Vue-router 中有hash模式和history模式,vue的路由默认是hash模式, ...
随机推荐
- 文件类型总结 MIME
来源网上https://www.cnblogs.com/zhongcj/archive/2008/11/03/1325293.html {".3gp", "video/3 ...
- let var const
eslint要求变量声明使用const的,而不是let和var如果可能的话. 如果一个变量只有在声明时才被赋值一次,那么应该使用'const' 'use strict';(function() { v ...
- bootstrapvalidator使用,重置校验
1.html页面需要注意的是验证字段需要用form-group包裹.需要引用相应的css和js. <form id="jobForm" role="form&quo ...
- HDU1846 - Brave Game【巴什博弈】
十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻. 今天,大家选 ...
- java:递归算法
JAVA中的递归是只一个方法在(满足条件时(或不满足条件时[这里的判断根据业务的实际需求写]))自己调用自己的方法名,要求参数和方法名一致, 然后根据判断跳出该方法,返回相应的返回值! 实例: 我们要 ...
- 通过腾讯地图api获取用户位置限制在指定位置区域
<!--在微信中获取用户位置--><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">& ...
- js严格模式下判断数据类型
function isType(type) { return function (content) { let t = Object.prototype.toString.call(content). ...
- BA-设计施工调试流程
工程范围 1.楼宇自控系统的工程设计首先要了解目标建筑物所处的地理环境.建筑物用途.楼宇自控系统的建设目标定位.建筑设备规模与控制工艺及监控范围等工程情况.这些情况一般在工程招标技术文件中介绍,设计者 ...
- nodejs-Sream
Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http 服务器发起请求的request 对象就是一个 Stream,还有stdout(标准输出). Node.js,Str ...
- Spring使用HibernateDaoSupport操作数据
spring提供了一个数据訪问层的类:org.springframework.orm.hibernate3.support.HibernateDaoSupport.一般是让 dao继承该类,然后在da ...