前端小技巧

一些简单的常用知识点

判断PC或移动端

if (navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)) {
	//移动端逻辑
}else{
	// PC端逻辑
}

修改页面title

document.title = '页面标题';

从url获取参数（转为对象）

const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`) 
this.getParameters("https://www.google.com/search?isNum=false&newPath=path");
// {isNum: false, newPath: 'path'}

元素距顶部高度

// 结构
<div ref='box'>盒子</div>
// 代码
this.$refs.box.getBoundingClientRect().top; 

监听scroll高度的变量

mounted(){
	window.addEventListener('scroll', this.handleScroll, true); // 监听（绑定）滚轮滚动事件
}
methods:{
	handleScroll(){
    	// 滚动条滚动时，距离顶部的距离 
    	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    	// 可视区的高度
    	let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    	// 滚动条的总高度
    	let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    	if(scrollTop + windowHeight == scrollHeight){
        	// 滚动到底部
    	}
	}
}

合理使用$once

不必在生命周期beforeDestroy中去清掉定时器

let countdownTimer = setInterval(() => {
    // 这里是你操作的逻辑
}, 1000);
this.$once('hook:beforeDestroy', () => {
    clearInterval(countdownTimer);
});

判断对象是否为空

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false

css

居中小技巧

1、最好用标签包裹起来
2、子元素设置vertical-align:middle,最好转成行内块元素
3、子元素设置margin-top

背景居中

background-repeat: no-repeat;
background-position: center center;
background-size: auto 100%;

把某个东西放在盒子某个位置（从中间为基准）

position: absolute;// 子绝父相
left: 50%;
transform: translateX(-600px);// 自行定义距离

:not()精简css

// 不用:not()
.nav li{
    border-right:1px solid #666;
}
.nav li:last-child{
    boreder-right:none;
}
// 使用:not()
.nav li:not(:last-child){
    border-right:1px solid #666;
}

文本省略

// 单
{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
// 多
{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

兼容问题

解決ios键盘弹起时底部空白问题

// 最好判断一下移动端中.App.vue文件mounted中
mounted(){
	let scrollFun = () => {
		document.documentElement.scrollTop = 0
	}
	//解决ios和安卓键盘底部留有空白问题
	$(document).on('focus', 'input', function () {
		document.addEventListener('scroll', scrollFun, false)
	})
	$(document).on('blur', 'input', function () {
		document.removeEventListener('scroll', scrollFun)
	})
}

浏览器自动填充（账号、密码）input,textarea,select框时样式

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

禁掉长按选中功能

.no-select {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}