前端常用场景总结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
轮播图插件:
测试浏览器是否可用
解决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>