项目中常用到的一些方法整理
1、判断当前浏览器类型
function isBrower(){
var ua = navigator.userAgent.toLowerCase();
var isMiscro = ua.indexOf("micromessenger")>-1;//微信浏览器
var isChrome = ua.indexOf('chrome')>-1 && ua.indexOf('safari')>-1; //谷歌浏览器
var isSafari = ua.indexOf('safari')>-1 && ua.indexOf('chrome')==-1; //safari浏览器
var isFirefox = ua.indexOf('firefox')> -1; //火狐浏览器
var isOpera = ua.indexOf('opera')> -1; //Opera浏览器
var isIE = ua.indexOf("compatible") > -1 && ua.indexOf("msie") > -1 && !ua.indexOf("opera") > -1; //IE浏览器
}
2、判断字符串中是否包含中文
function isHasChinese(str){
var reg = new RegExp("[\\u4e00-\\u9FFF]","g");
return reg.test(str);
}
3、判定对象是否为空
function isNull(data){
return ( (data == "" || data == "undefined" || data == undefined) ? true :false);
}
4、将数组中的id组成字符串,用@连接
strIds = item.data.map(function(ditem){
return ditem.tableId
}).join("@");
5、使用el-tooltip组件
<span class="text2" @mouseenter="showTooltip($event)"
@mouseleave="hiddenTooltip($event)">{{item.frequency1}}</span>
<el-tooltip ref="textTooltip" effect="light" :content="textTooltipContent" placement="top-start"></el-tooltip>
showTooltip: function (event) {
var ev = event || window.event;
var eventName = ev.target.className;
if (eventName.indexOf('text') != -1) {
if (ev.target.offsetWidth < ev.target.scrollWidth) {
var tooltip = this.$refs.textTooltip;
this.textTooltipContent = ev.target.innerText;
tooltip.referenceElm = ev.target;
tooltip.$refs.popper.style.display = 'none';
tooltip.doDestroy();
tooltip.setExpectedState(true);
tooltip.handleShowPopper();
}
}
},
hiddenTooltip: function () {
const tooltip = this.$refs.textTooltip;
if (tooltip) {
tooltip.setExpectedState(false);
tooltip.handleClosePopper();
}
}
6、滚动条定位在有颜色显示的位置
getTableBody: function (tab) {
if (!tab || tab.name != 'nav1' && tab.name != 'nav3') {
var _this = this;
setTimeout(function () {
_this.curTopHeight.forEach(function (e, index) {
var elTable = document.getElementsByClassName('el-table__body-wrapper')[index];
if (elTable) {
var td = elTable.getElementsByClassName('cell')[0];
var tdWindth = parseInt(td.style.width) * e.left;
document.getElementsByClassName('el-table__body-wrapper')[index].scrollTop = e.height;
document.getElementsByClassName('el-table__body-wrapper')[index].scrollLeft = tdWindth;
}
})
}, 1200);
}
}
//找到表格中带有颜色的数据
findColorText: function (data) {
var height = 24;
var left = 0;
var _this = this;
if (data && data.length) {
var stop = true;
data.forEach(function (item, index) {
if (stop) {
var _index = index;
for (var i in item) {
if (item[i].indexOf('color') != -1) {
height = _index * height;
left = i.replace('column_key', '');
_this.curTopHeight.push({
'height': height,
'left': left
});
stop = false;
break;
}
}
}
})
}
},
7、动态设置el-loading-mask的高度
getException:function(){
var oDiv = $('#exceptionDiv')[0];
var pDiv = $('#el-exception-pane')[0];
var divHeight = pDiv.offsetHeight > oDiv.offsetHeight ? pDiv.offsetHeight : oDiv.offsetHeight;
setTimeout(function(){
var mDiv = pDiv.children[1];
mDiv.style.height = divHeight +'px';
},1000);
}
8、判断字符串的类型
isString: function (str) {
return 'String' == utils.getDataType(str);
},
isArray: function (str) {
return 'Array' == utils.getDataType(str);
},
isObject: function (str) {
return 'Object' == utils.getDataType(str);
},
isFunction: function (str) {
return 'Function' == utils.getDataType(str);
},
isNumber: function (str) {
return 'null' !== str + '' && str !== '' && !isNaN(str); //'Number' == utils.getDataType(str);
},
isDate: function (str) {
return 'Date' == utils.getDataType(str);
},
isDateStr: function (str) {
return utils.dateStrCheck(str);
//return 'Object' == utils.isObject(str) && str instanceof Date;
},
getDataType: function (str) {
type = Object.prototype.toString.call(str).slice(8, -1);
return type;
},
slice(8,-1)意思是从第8位开始(包含第8位)到最后一位之前(-1的意思就是最后一位,不包含最后一位);
Object.prototype.toString.call(boj)这个是用来判断数据类型,
如果boj是数字,得出的结果是[object Number],从零开始数,第8位就是N,最后一位的前一位就是r,所以取得Number;
如果boj是字符串,得出结果是[object String],第8位S,最后一位的前一位g,取得String
9、删除左右两端的空格
trim: function (str) { //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
10、转换成 浏览器兼容的时间格式对象
tranferCompatibleDate: function (vDate) {
//var vDate = (typeof vDate == 'string' ? vDate.split('.')[0] : vDate);
if (utils.isString(vDate) && utils.isDateStr(vDate)) {
vDate = vDate.replace(new RegExp(/-/gm), '/'); //将所有的'-'转为'/'即可 解决IE、firefox浏览器下JS的new Date()的值为Invalid Date、NaN-NaN的问题
return new Date(vDate);
} else if (utils.isString(vDate)) { //针对这种数据先如此处理 "2017-04-15T10:56:31.958Z"
return new Date(vDate);
} else if (utils.isDate(vDate)) { //标准日期格式 Sat Apr 15 2017 13:54:50 GMT+0800 (中国标准时间)
return new Date(vDate);
} else if (utils.isNumber(vDate) || utils.isObject(vDate)) {
try {
return new Date(vDate);
} catch (e) {
console.error('传入的对象=' + vDate + '转换成日期对象异常!');
return vDate;
}
} else {
console.error('传入的date=' + vDate + '不是正确的日期格式!');
return;
}
}
11、查询两个日期间隔天数
dateDayGap: function (dateStrBegin, dateStrEnd) {
if (!dateStrBegin || !dateStrEnd) return 0;
var date1 = utils.tranferCompatibleDate(dateStrBegin);
var date2 = utils.tranferCompatibleDate(dateStrEnd);
var s1 = date1.getTime(),
s2 = date2.getTime();
var total = (s2 - s1) / 1000;
var day = parseInt(total / (24 * 60 * 60)); //计算整数天数
return day;
},
12、数组去重
uniqueArr:function(array) {
var result = [];
var obj = {};
for(var i =0; i<array.length; i++){
if(!obj[array[i].ddKey]){
result.push(array[i]);
obj[array[i].ddKey] = true;
}
}
return result;
},
13、获取浏览器URL中查询字符串中的参数
function getParam(name){
var subUrl = '';
var curUrl = location.href;
var url = {};
if(curUrl.indexOf('?')>-1){
//substring() 方法用于提取字符串中介于两个指定下标之间的字符
subUrl = curUrl.substring(curUrl.indexOf('?'),curUrl.length);
//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
var arr = subUrl.substr(1).split('&');
for(var i = 0; i < arr.length; i ++) {
url[arr[i].split("=")[0]] = decodeURI(arr[i].split("=")[1]);
}
}
return url[name];
}
14、添加url参数
addParam: function (url, paramKey, paramVal) {
var andStr = "?";
var beforeparam = url.indexOf("?");
if (beforeparam != -1) {
andStr = "&";
}
return url + andStr + paramKey + "=" + encodeURIComponent(paramVal);
}
15、删除url参数
delParam: function (url, paramKey) {
var urlParam = url.substr(url.indexOf("?") + 1);
var beforeUrl = url.substr(0, url.indexOf("?"));
var nextUrl = "";
var arr = new Array();
if (urlParam != "") {
var urlParamArr = urlParam.split("&");
for (var i = 0; i < urlParamArr.length; i++) {
var paramArr = urlParamArr[i].split("=");
if (paramArr[0] != paramKey) {
arr.push(urlParamArr[i]);
}
}
}
if (arr.length > 0) {
nextUrl = "?" + arr.join("&");
}
url = beforeUrl + nextUrl;
return url;
}
16、获取元素绝对位置
function getAbsPosition(element) {
var abs = {
x: 0,
y: 0
}
//如果浏览器兼容此方法
if (document.documentElement.getBoundingClientRect) {
//注意,getBoundingClientRect()是jQuery对象的方法
//如果不用jQuery对象,可以使用else分支。
abs.x = element.getBoundingClientRect().left;
abs.y = element.getBoundingClientRect().top;
/*
abs.x += window.screenLeft +
(document.documentElement.scrollLeft || document.body.scrollLeft) -
(document.documentElement.clientLeft || document.body.clientLeft);
abs.y += window.screenTop +
(document.body.scrollTop || document.documentElement.scrollTop) -
(document.documentElement.clientTop || document.body.clientLeft);*/
//去掉screenLeft与screenTop先
abs.x += 0 + (document.documentElement.scrollLeft || document.body.scrollLeft) - (document.documentElement.clientLeft || document.body.clientLeft);
abs.y += 0 + (document.body.scrollTop || document.documentElement.scrollTop) - (document.documentElement.clientTop || document.body.clientLeft);
} //如果浏览器不兼容此方法
else {
while (element != document.body) {
abs.x += element.offsetLeft;
abs.y += element.offsetTop;
element = element.offsetParent;
}
//计算想对位置
abs.x += window.screenLeft + document.body.clientLeft - document.body.scrollLeft;
abs.y += window.screenTop + document.body.clientTop - document.body.scrollTop;
}
return abs;
}
17、时间字符处理,把时间后面的时和分去掉
utils.timeHandle = function (str, type) {
function speace() {
var index = str.indexOf(' ');
if (index > -1 && str.length > 0) {
return str.split(' ')[0];
}
}
function font() {
var index = str.indexOf('-');
if (index > -1 && str.length > 0) {
str = str.split('-');
return str[1] + '月' + str[2] + '日';
}
}
if (type == 1) {
return speace();
} else if (type == 2) {
str = speace();
return font();
}
};
18、设置title
utils.setTitle = function (title) {
document.getElementsByTagName('title')[0].innerText = title;
};
19、显示隐藏分享给微信好友、微信朋友圈按钮;要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
utils.showShareBtn = function(show){
window.wx.ready(function() {
if(!show){
wx.hideMenuItems({
menuList: [
"menuItem:share:timeline", //分享到朋友圈
"menuItem:share:appMessage", //发送给朋友
"menuItem:share:qq", //分享到QQ
"menuItem:favorite", //收藏
"menuItem:share:QZone", //分享到QQ空间
"menuItem:openWithQQBrowser", //在QQ浏览器中打开
"menuItem:openWithSafari", //在Safari浏览器中打开
"menuItem:copyUrl",//复制链接
"menuItem:share:email"
],
});
}else {
wx.showMenuItems({
menuList: [
"menuItem:share:timeline", //分享到朋友圈
"menuItem:share:appMessage", //发送给朋友
"menuItem:share:qq", //分享到QQ
"menuItem:favorite", //收藏
"menuItem:share:QZone", //分享到QQ空间
"menuItem:openWithQQBrowser", //在QQ浏览器中打开
"menuItem:openWithSafari", //在Safari浏览器中打开
"menuItem:copyUrl",//复制链接
"menuItem:share:email"
],
});
}
});
};
20、pc端增加禁止鼠标右键菜单功能,以防止保存或分享图片
document.oncontextmenu = function(event){
var curtargrt = event.srcElement ? event.srcElement : event.target;
if(curtargrt.tagName == 'IMG'){
return false;
}
}
21、下载
download(this.urls.onExport, {sql:this.queryContent}, false);
download: function (url, urlParam, isDownloadInNewWindow, callback) {
var _this = this;
for (var param in urlParam) {
if (utils.isNotEmpty(urlParam[param])) {
url = _this.addParam(url, param, urlParam[param]);
}
}
isDownloadInNewWindow ? window.open(url) : location.href = url;
callback && callback();
},
//添加url参数
addParam: function (url, paramKey, paramVal) {
var andStr = "?";
var beforeparam = url.indexOf("?");
if (beforeparam != -1) {
andStr = "&";
}
return url + andStr + paramKey + "=" + encodeURIComponent(paramVal);
},
22、router跳转时如何新打开一个页面
解决方法: const { href } = this.$router.resolve({name: "legalDetail"});
window.open(href,'_blank');