前端常用场景总结CSS/JS/插件（实用篇更新中...）

js遍历数组，并向每一个对象元素添加新属性

const resDatas = res.data.content // 原数组
let arrNew = []
resDatas.map((item, index) => {
  arrNew.push(Object.assign({}, item, { czname: '查看' }))
})

css滚动条样式修改（活显示隐藏）

/*隐藏滚动条*/
::-webkit-scrollbar {
  display:none;
  }
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }

CSS里的pointer-events属性

pointer-events: none;

垂直居中

<div class="box box1">
        <span>垂直居中</span>
</div>
.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}
.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

---

a链接 禁止点击跳转

javascript:void(0);

---

图片自适应

object-fit: cover;

---

vue 横向滚动条

父级：

overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;

横向滚动条

.organ-result-content{
    width: 70%;
    height: 50px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12px;
    position: fixed;
    bottom: 50px;
}
.organ-result-content-item{
    width: 65px;
    height: 28px;
    margin-top: 10px;
    margin-left: 5px;
    text-align: center;
    line-height: 28px;
    display: inline-block;
    border: 1px dashed #999;
    color: #666;
    position: relative;
}

---

鼠标指针放在一个元素边界范围内时所用的光标形状

cursor: pointer;

---

禁止选择

 -o-user-select: none;
  -moz-user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select: none; 
  -khtml-user-select :none; 
  user-select: none;

---

设置边框不包含在长宽度里面：

box-sizing: border-box;

顶部固定效果

.tabbar{
	position:stycky;
	top:0;
	z-index:999
}

CSS实现单行、多行文本溢出显示省略号（…）

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

calc(100% - 20px)计算

position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

jQuery动态设置样式（style、css）

<div style="background-color:#ffffff;padding-left:10px;">测试jQuery动态获取padding-left</div>

1、用css()方法返回元素的样式属性

$("div").css("padding-left"));

2、用css()设置样式

$("div").css("color","yellow");

3、设置多个样式

$("div").css({"background-color":"yellow","font-size":"200%"});

var css = {  
    background-color: '#EEE',  
    height: '500px',  
    margin: '10px',  
    padding: '2px 5px'  
};  
$("div").css(css);

---

解决IE浏览器vue项目显示空白问题：

npm install --save @babel/polyfill

---

轮播图插件：

轮播图插件

---

阴影制作生成链接

---

测试浏览器是否可用

https://caniuse.com/

---

解决ie浏览器中formData.get()不生效问题

npm install formdata-polyfill
// 解决  ie浏览器图片上传  失败问题
import "formdata-polyfill";

---

数字字母自动换行不生效问题：

word-break: break-all;

---

// 登录ie内核浏览器  禁止访问该系统推荐使用Google（谷歌浏览器）
          var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
          if (userAgent.indexOf('Trident') !== -1 || userAgent.indexOf('MSIE') !== -1) { //表示使用的是IE的内核
            alert("该系统暂时不支持IE内核浏览器，推荐使用Google（谷歌浏览器）")
          } else{
            this.onNavgate()
          }

---

解决IE浏览器报forEach相关错误

nodelist-foreach-polyfill

---

解决后台带html格式在前台显示问题

white-space: pre-line;

---

实现前端浏览器下载文件

location.href = `${urlConfig.xsgl_serverUrl}${urlConfig.getExportAllHtqdAll}?xsglHtId=${this.params.dqJdId}`

---

使用Git下载指定分支命令为：

git clone -b 分支名仓库地址

---

VUE等数组的深拷贝和浅拷贝

data: {
  tabs:[]
}
let tabs = this.data.tabs;   //浅拷贝
let tabs = JSON.parse(JSON.stringify(this.data.tabs)); //深拷贝

url拼接：
http://172.18.19.22:19076/flexoffice/web/dist/modules/login/sso_login.html?loginName="+userName+"&token="+data

可以将json字符串转换成json对象

JSON.parse(jsonstr);

将json对象转换成json对符串

JSON.stringify(jsonobj); 

图片在固定容器内自适应

父级：position:relative;
img{
	max-height:340px;
	max-width:690px;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}
 

数组去重

const numbers = [1, 2, 3, 4, 4, 1]
console.log([...new Set(numbers)]) // [1, 2, 3, 4]

从数组中过滤所有虚值

const myArray = [1, undefined, null, 2, NaN, true, false, 3]
console.log(myArray.filter(Boolean)) // [1, 2, true, 3]

将字符串转换为数字

const str = '123'
const num = +str
console.log(typeof num) // number

将数字转换为字符串

const num = 123;
console.log(num + ''); // '123'

使用 && 符号简写条件判断语句

// 普通写法
if (condition) {
    doSomething()
}
 
// 简写
condition && doSomething()

如果你想添加一个事件监听器并且只运行一次，你可以使用 once 选项：

element.addEventListener('click', () => console.log('I run only once'), {
    once: true
});

为了提高数字的可读性，您可以使用下划线作为分隔符：

const num = 2_000_000_000
console.log(num) // 2000000000

使用 dataset 属性访问元素的自定义数据属性 (data-*)：

<div id="card" data-name="FE" data-number="5" data-label="listCard">
    卡片信息
</div>
 
<script>
    const el = document.getElementById('card')
 
    console.log(el.dataset)
    // { name: "FE", number: "5", label: "listCard" }
  
    console.log(el.dataset.name) // "FE"
    console.log(el.dataset.number) // "5"
    console.log(el.dataset.label) // "listCard"
</script>