490 lines
14 KiB
JavaScript
490 lines
14 KiB
JavaScript
/** 常用方法
|
||
* 使用方法在页面引入
|
||
* import ev from '@/jsFile/tools/index.js';
|
||
*
|
||
* 使用
|
||
* console.log(ev.splitNum(200));
|
||
*/
|
||
|
||
// 百度SEO
|
||
const seo = function() {
|
||
let bp = document.createElement('script');
|
||
let curProtocol = window.location.protocol.split(':')[0];
|
||
if (curProtocol === 'https') {
|
||
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
|
||
}
|
||
else {
|
||
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
|
||
}
|
||
let s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(bp, s);
|
||
};
|
||
|
||
// 函数节流
|
||
const throttle = function(method, context) {
|
||
clearTimeout(method.tId);
|
||
method.tId = setTimeout(function () {
|
||
method.call(context);
|
||
}.bind(this), context?context:1000);
|
||
};
|
||
|
||
// 生成随机字符串
|
||
function getRandomStr(){
|
||
return Math.random().toString(36).substring(2)
|
||
}
|
||
|
||
// base64位码转blob对象
|
||
const dataURLtoBlob = (dataurl)=>{
|
||
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||
while(n--){
|
||
u8arr[n] = bstr.charCodeAt(n);
|
||
}
|
||
return new Blob([u8arr], {type:mime});
|
||
};
|
||
|
||
|
||
/**
|
||
* 将base64/dataurl转成File
|
||
* @param dataurl
|
||
* @param filename
|
||
* @returns {File}
|
||
*/
|
||
function dataURLtoFile(dataurl, filename) {
|
||
let arr = dataurl.split(','),
|
||
mime = arr[0].match(/:(.*?);/)[1],
|
||
bstr = atob(arr[1]),
|
||
n = bstr.length,
|
||
u8arr = new Uint8Array(n);
|
||
while (n--) {
|
||
u8arr[n] = bstr.charCodeAt(n);
|
||
}
|
||
return new File([u8arr], filename, { type: mime });
|
||
}
|
||
|
||
// 获取File 对象或 Blob 对象的临时路径
|
||
function getObjectURL(file) {
|
||
let url = null;
|
||
if (window.createObjectURL) {
|
||
// basic
|
||
url = window.createObjectURL(file);
|
||
} else if (window.URL) {
|
||
// mozilla(firefox)
|
||
url = window.URL.createObjectURL(file);
|
||
} else if (window.webkitURL) {
|
||
// webkit or chrome
|
||
url = window.webkitURL.createObjectURL(file);
|
||
}
|
||
return url;
|
||
}
|
||
|
||
// 获取n-m的随机整数
|
||
const getRandomNum = (n, m)=> {
|
||
return Math.ceil(Math.random()*(m-n), n);
|
||
};
|
||
|
||
// 将数字转成3位分隔符
|
||
const splitNum = function (num) {
|
||
if (num === null || num === undefined) {
|
||
return null;
|
||
}
|
||
if (typeof num === "number") {
|
||
num = num.toString()
|
||
}
|
||
return num.replace(/\B(?=(?:\d{3})+\b)/g, ',')
|
||
};
|
||
|
||
// 字符串/数字数组去重
|
||
function unique(arr) {
|
||
return Array.from(new Set(arr));
|
||
}
|
||
|
||
// 生成uuid
|
||
function getUuid() {
|
||
let s = [];
|
||
let hexDigits = "0123456789abcdef";
|
||
for (let i = 0; i < 36; i++) {
|
||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||
}
|
||
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
||
s[8] = s[13] = s[18] = s[23] = "-";
|
||
|
||
return s.join("");
|
||
}
|
||
|
||
// 过滤掉某个字符串中的中文字符
|
||
function filterChineseWord(str) {
|
||
return str.replace(/[\u4E00-\u9FA5]/g, '');
|
||
}
|
||
|
||
/**
|
||
* nodejs获取本地ip
|
||
* @param os node.js os模块
|
||
* @returns {*}
|
||
*/
|
||
function getIPAddress(os) {
|
||
if (!os) return '';
|
||
let interfaces = os.networkInterfaces();
|
||
for (let devName in interfaces) {
|
||
let iface = interfaces[devName];
|
||
for (let i = 0; i < iface.length; i++) {
|
||
let alias = iface[i];
|
||
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
|
||
return alias.address;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取元素实际样式值
|
||
* @param el dom元素
|
||
* @param styleName 样式名
|
||
*/
|
||
function getStyle(el, styleName) {
|
||
if (el.currentStyle) return el.currentStyle[styleName];
|
||
if (getComputedStyle) return window.getComputedStyle(el, null)[styleName];
|
||
return el.style[styleName];
|
||
}
|
||
|
||
// 优雅降级requestAnimationFrame
|
||
const requestAnimationF = (function () {
|
||
return window.requestAnimationFrame ||
|
||
window.webkitRequestAnimationFrame ||
|
||
window.mozRequestAnimationFrame ||
|
||
window.oRequestAnimationFrame ||
|
||
// if all else fails, use setTimeout
|
||
function (callback) {
|
||
return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
|
||
};
|
||
})();
|
||
|
||
// 优雅降级cancelAnimationFrame
|
||
const cancelAnimationF = (function () {
|
||
return window.cancelAnimationFrame ||
|
||
window.webkitCancelAnimationFrame ||
|
||
window.mozCancelAnimationFrame ||
|
||
window.oCancelAnimationFrame ||
|
||
function (id) {
|
||
window.clearTimeout(id);
|
||
};
|
||
})();
|
||
|
||
|
||
/**
|
||
* 获取元素实际高度
|
||
* @param el dom元素
|
||
* @returns {number} 元素高度
|
||
*/
|
||
function getHeight(el) {
|
||
let height;
|
||
// 已隐藏的元素
|
||
if (getStyle(el, "display") === "none") {
|
||
el.style.position = "absolute";
|
||
el.style.visibility = "hidden";
|
||
el.style.display = "block";
|
||
height = getStyle(el, "height");
|
||
el.style.position = "";
|
||
el.style.visibility = "";
|
||
el.style.display = "";
|
||
return parseFloat(height);
|
||
}
|
||
return parseFloat(getStyle(el, "height"));
|
||
}
|
||
|
||
/**
|
||
* 获取已隐藏元素的css值
|
||
* @param el
|
||
* @param styleName
|
||
* @returns {*}
|
||
*/
|
||
function getCurrentStyle(el, styleName) {
|
||
let styleValue;
|
||
// 已隐藏的元素
|
||
if (getStyle(el, "display") === "none") {
|
||
el.style.position = "absolute";
|
||
el.style.visibility = "hidden";
|
||
el.style.display = "block";
|
||
styleValue = getStyle(el, styleName);
|
||
el.style.position = "";
|
||
el.style.visibility = "";
|
||
el.style.display = "";
|
||
return (styleValue);
|
||
}
|
||
return (getStyle(el, styleName));
|
||
}
|
||
|
||
/**
|
||
* 优化实现sildeToggle效果
|
||
* @param el dom元素
|
||
* @param time 动画时长，单位ms，默认值300
|
||
* @param fn 回调函数
|
||
*/
|
||
function slideToggle(el, time, fn) {
|
||
if (!el) return false;
|
||
time = time || 300;
|
||
if (el.dataUid) return false; // 如该dom元素已有动画未处理完，则必须等到动画结束才执行
|
||
|
||
cancelAnimationF(el.dataUid);
|
||
|
||
// 已隐藏的元素，下拉
|
||
if (getStyle(el, "display") === "none" || getHeight(el) === 0) {
|
||
down(el, time, fn);
|
||
} else {
|
||
up(el, time, fn)
|
||
}
|
||
}
|
||
|
||
function down(el, time, fn) {
|
||
let aniSplitTime = Date.now();
|
||
|
||
let height = 0, paddingTop = 0, paddingBottom = 0;
|
||
let totalHeight = parseFloat(getCurrentStyle(el, "height"));
|
||
let totalPaddingTop = parseFloat(getCurrentStyle(el, "paddingTop"));
|
||
let totalPaddingBottom = parseFloat(getCurrentStyle(el, "paddingBottom"));
|
||
|
||
let basePaddingBottom = totalPaddingBottom/time;
|
||
let basePaddingTop = totalPaddingBottom/time;
|
||
let baseHeight = totalHeight/time;
|
||
|
||
el.style.overflow = "hidden";
|
||
el.style.display = "block";
|
||
|
||
el.dataUid = requestAnimationF(function go(){
|
||
let aniTime = Date.now();
|
||
let splitTime = aniTime - aniSplitTime;
|
||
aniSplitTime = aniTime;
|
||
let splitPaddingBottom = basePaddingBottom*splitTime;
|
||
let splitPaddingTop = basePaddingTop*splitTime;
|
||
let splitHeight = baseHeight*splitTime;
|
||
|
||
if (height >= totalHeight){
|
||
el.style.overflow = "";
|
||
el.style.height = "";
|
||
el.style.paddingTop = "";
|
||
el.style.paddingBottom = "";
|
||
|
||
if (fn && typeof fn === "function") fn();
|
||
cancelAnimationF(el.dataUid);
|
||
el.dataUid = null;
|
||
delete el.dataUid;
|
||
} else {
|
||
el.style.height = height + "px";
|
||
el.style.paddingTop = paddingTop + "px";
|
||
el.style.paddingBottom = paddingBottom + "px";
|
||
el.dataUid = requestAnimationF(go);
|
||
}
|
||
height = height + splitHeight;
|
||
paddingTop = paddingTop + splitPaddingTop;
|
||
paddingBottom = paddingBottom + splitPaddingBottom;
|
||
});
|
||
}
|
||
|
||
function up(el, time, fn) {
|
||
// 上拉
|
||
let aniSplitTime = Date.now();
|
||
let height = getHeight(el);
|
||
let paddingTop = parseFloat(getStyle(el, "paddingTop"));
|
||
let paddingBottom = parseFloat(getStyle(el, "paddingBottom"));
|
||
el.style.overflow = "hidden";
|
||
|
||
let basePaddingBottom = paddingBottom/time;
|
||
let basePaddingTop = paddingTop/time;
|
||
let baseHeight = height/time;
|
||
|
||
el.dataUid = requestAnimationF(function go(){
|
||
let aniTime = Date.now();
|
||
let splitTime = aniTime - aniSplitTime;
|
||
aniSplitTime = aniTime;
|
||
let splitPaddingBottom = basePaddingBottom*splitTime;
|
||
let splitPaddingTop = basePaddingTop*splitTime;
|
||
let splitHeight = baseHeight*splitTime;
|
||
|
||
if (height <= 0) {
|
||
el.style.height = 0;
|
||
el.style.paddingTop = 0;
|
||
el.style.paddingBottom = 0;
|
||
|
||
setTimeout(()=>{
|
||
el.style.height = "";
|
||
el.style.overflow = "";
|
||
el.style.paddingTop = "";
|
||
el.style.paddingBottom = "";
|
||
el.style.display = "none";
|
||
},0);
|
||
|
||
if (fn && typeof fn === "function") fn();
|
||
cancelAnimationF(el.dataUid);
|
||
el.dataUid = null;
|
||
delete el.dataUid;
|
||
} else {
|
||
el.style.height = height + "px";
|
||
el.style.paddingTop = paddingTop + "px";
|
||
el.style.paddingBottom = paddingBottom + "px";
|
||
el.dataUid = requestAnimationF(go);
|
||
}
|
||
|
||
height = height - splitHeight;
|
||
paddingBottom = paddingBottom - splitPaddingBottom;
|
||
paddingTop = paddingTop - splitPaddingTop;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 优化实现jquery slideDown效果
|
||
* @param el dom元素
|
||
* @param time 动画时长，单位ms，默认值300
|
||
* @param fn 回调函数
|
||
*/
|
||
function slideDown(el, time, fn) {
|
||
if (!el) return false;
|
||
time = time || 300;
|
||
if (el.dataUid) return false; // 如该dom元素已有动画未处理完，则必须等到动画结束才执行
|
||
|
||
cancelAnimationF(el.dataUid);
|
||
if (getStyle(el, "display") === "none" || getHeight(el) === 0) {
|
||
down(el, time, fn);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 优化实现jquery slideUp效果
|
||
* @param el dom元素
|
||
* @param time 动画时长，单位ms，默认值300
|
||
* @param fn 回调函数
|
||
*/
|
||
function slideUp(el, time, fn) {
|
||
if (!el) return false;
|
||
time = time || 300;
|
||
if (el.dataUid) return false; // 如该dom元素已有动画未处理完，则必须等到动画结束才执行
|
||
|
||
cancelAnimationF(el.dataUid);
|
||
|
||
if (getStyle(el, "display") === "none" || getHeight(el) === 0) {
|
||
|
||
} else {
|
||
up(el, time, fn);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取当天的23:59:59的Date对象（当天最后1ms的Date对象）
|
||
* @param date （默认值new Date()）
|
||
* @returns {Date}
|
||
*/
|
||
function getDayLastMsDate(date = new Date()) {
|
||
if (!date instanceof Date) {
|
||
throw new Error("function params type error");
|
||
}
|
||
return new Date(new Date(date.toLocaleDateString()).getTime()+24*60*60*1000-1)
|
||
}
|
||
|
||
/**
|
||
* 获取当天的00:00的Date对象（当天最开始1ms的Date对象）
|
||
* @param date （默认值new Date()）
|
||
* @returns {Date}
|
||
*/
|
||
function getDayFirstMsDate(date = new Date()) {
|
||
if (!date instanceof Date) {
|
||
throw new Error("function params type error");
|
||
}
|
||
return new Date(date.toLocaleDateString())
|
||
}
|
||
|
||
/*
|
||
压缩图片
|
||
dataUrl： dataUrl，
|
||
obj：{ height, width } 压缩之后的图片宽高
|
||
type：压缩完之后的图片类型
|
||
*/
|
||
function photoCompress(dataUrl, obj, type = "image/png"){
|
||
return new Promise((resolve, reject) => {
|
||
let img = new Image();
|
||
img.src = dataUrl;
|
||
img.onload = function(){
|
||
let that = this;
|
||
// 默认按比例压缩
|
||
let w = that.width,
|
||
h = that.height,
|
||
scale = w / h;
|
||
if (h >= obj.height) {
|
||
h = obj.height;
|
||
}
|
||
w = (h * scale);
|
||
|
||
let quality = 1; // 默认图片质量为1
|
||
//生成canvas
|
||
let canvas = document.createElement('canvas');
|
||
let ctx = canvas.getContext('2d');
|
||
// 创建属性节点
|
||
let anw = document.createAttribute("width");
|
||
anw.nodeValue = w;
|
||
let anh = document.createAttribute("height");
|
||
anh.nodeValue = h;
|
||
canvas.setAttributeNode(anw);
|
||
canvas.setAttributeNode(anh);
|
||
ctx.drawImage(that, 0, 0, w, h);
|
||
// 图像质量
|
||
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
|
||
quality = obj.quality;
|
||
}
|
||
// quality值越小，所绘制出的图像越模糊
|
||
let base64 = canvas.toDataURL(type, quality);
|
||
// 回调函数返回base64的值
|
||
resolve(base64);
|
||
};
|
||
img.onerror = ()=>{
|
||
reject();
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
// 获取文件格式(后缀)
|
||
function getFileType(fileName = '') {
|
||
let index = fileName.lastIndexOf(".");
|
||
if (index >= 0) return fileName.substring(index + 1);
|
||
return "";
|
||
}
|
||
|
||
// 重排数组（洗牌算法）
|
||
function arrayShuffle(input) {
|
||
for (var i = input.length-1; i >=0; i--) {
|
||
var randomIndex = Math.floor(Math.random()*(i+1));
|
||
var itemAtIndex = input[randomIndex];
|
||
input[randomIndex] = input[i];
|
||
input[i] = itemAtIndex;
|
||
}
|
||
return input;
|
||
}
|
||
|
||
export const Common = {
|
||
seo,
|
||
throttle,
|
||
dataURLtoBlob,
|
||
getRandomNum,
|
||
splitNum,
|
||
getUuid,
|
||
getRandomStr,
|
||
unique,
|
||
filterChineseWord,
|
||
getIPAddress,
|
||
getStyle,
|
||
getCurrentStyle,
|
||
slideToggle,
|
||
slideUp,
|
||
slideDown,
|
||
getObjectURL,
|
||
dataURLtoFile,
|
||
getDayLastMsDate,
|
||
getDayFirstMsDate,
|
||
photoCompress,
|
||
getFileType,
|
||
arrayShuffle
|
||
};
|
||
|
||
export default Common;
|
||
|
||
|