前端开发中你可能会用到的一些小工具

本文简单记录一些前端开发场景中会用到的小工具，供参考

自定义原生轻提示组件(JS)

// 自定义原生js轻提示组件
function getToast(msg,duration){
    
    
   duration=isNaN(duration)?3000:duration;
   var m = document.createElement('div');
   m.innerHTML = msg;
   m.style.cssText="max-width:60%;min-width: 150px;padding:10px 14px;color: rgb(255, 255, 255);text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
   document.body.appendChild(m);
   setTimeout(function() {
    
    
     var d = 0.5;
     m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
     m.style.opacity = '0';
     setTimeout(function() {
    
     document.body.removeChild(m) }, d * 1000);
   }, duration);
 };
// 调用，msg:提示内容，duration:时长(ms)
getToast('我是提示信息', 5000)

屏幕水平垂直居中(CSS)

.screen_center{
    
    
	/* 屏幕水平垂直居中 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

超出部分隐藏显示省略号(CSS)

.one_line{
    
    
	/* 单行超出部分隐藏显示省略号 */
	width: '200px'; /* 固定宽度 */
	display: inline-block; /* 行内元素 */
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.multiline{
    
    
	/* 多行超出部分隐藏显示省略号 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;   /* 行数 */
	overflow: hidden;
}

浏览器滚动条样式修改(CSS)

.scroll_bar{
    
    
	/* 浏览器滚动条样式修改 */
	overflow: auto;
	&::-webkit-scrollbar {
    
    
	  width: 8px;
	}
	&::-webkit-scrollbar-track {
    
    
	  border-radius: 10px;
	  background: #fff;
	}
	&::-webkit-scrollbar-thumb {
    
    
	  height: 67px;
	  background: #f5f5f5;
	  border-radius: 5px;
	}
}

图标顺时针旋转180度(CSS)

.icon_rotation{
    
    
	/* 图标顺时针旋转180度 */
	transform: rotate(-180deg);
	transition: ease 0.3s;
}

字符串数组去重(JS)

// js字符串数组去重
let str = '测试数据,测试数据,测试数据,test,test'
let arr = str.split(',')
let result = [...new Set(arr)]
console.log(result)  // ['测试数据','test']

对象选择性赋值(JS)

// 对象选择性赋值
// 说明：遍历对象formInfo，若其key在basicInfo中存在，则将formInfo的该key值赋值到basicInfo
for (let key in formInfo) {
    
    
  if (Object.hasOwnProperty.call(basicInfo, key)) {
    
    
    basicInfo[key] = formInfo[key]
  }
}

插入字符串到指定位置(JS)

// source:源字符串，startIndex:起始位置，newStr:插入的字符
function insertStr (source, startIndex, newStr) {
    
    
	return source.slice(0, startIndex) + newStr + source.slice(startIndex)
}