1、简易登录弹出框（vue，animate.css）：

html：

css：

2、vue车牌输入组件：

Keyborad.vue

使用：

3、判断扫码设备

4、判断设备系统

5、保留两位小数

7、防抖（原理：在一段时间后执行函数，若此段时间内继续操作，则清除定时器，过了指定时间未操作，则执行函数）：（重复触发，只执行一次）

应用场景：input实时监测输入是否符合要求，拉动滚动条实时触发事件...

function debounce(fn,time){

let delay = time || 1000;

let timer = null; 

return function() {

if(timer){

clearTimeout(timer) 

}

timer = setTimeout(fn,delay)

}

}



8、节流：（重复触发，每隔一定时间执行一次）

function throttle(fn,delay){

let valid = true

return function() {

if(!valid){

//休息时间 暂不接客

return false 

}

// 工作时间，执行函数并且在间隔期内把状态位设为无效

valid = false

setTimeout(() => {

fn()

valid = true;

}, delay)

}

}



9、获取月份最后一天

let monthLastDay = new Date(y,m,0).getDate();

y：年份；m：月份；第三个参数为零则获取最后一天





10、JS编码

encodeURI() decodeURI()  //ASCII码标点不会编码：*@-_+./

encodeURIComponent() decodeURIComponent()  //都会编码，在有时候无法直接传参时可使用JSON.stringify(data)将数据变为字符串后在进行编码传递



base64编码

编码：btoa()

解码：atob()



11、浅拷贝

Object.assign()

var a = {a:1,b:{c:1}}

var copy = Object.assign({},a)

a.b.c = 2;

console.log(copy.b.c)  // 2



12、深拷贝

1、JSON.parse(JSON.stringify(obj))   //简单实用

2、function deepClone(obj) {

var newObj = obj instanceof Array ? [] : {};

if (typeof obj !== 'object') {

return obj;

}else {

for (var i in obj) {

newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i];

}

}

return newObj;

}



13、最好的检测类型方法：

Object.prototype.toString.call();

类型：

基础类型：string，number，undefined，null，symbol，boolean

引用类型：object，array，function

function checkType(data){

return Object.prototype.toString.call(data).slice(8,-1).toLocaleLowerCase();

}



14、文本溢出处理

//单行 

.single { 

overflow: hidden; 

white-space: nowrap; 

text-overflow: ellipsis; 

}

//多行

.more { 

display: -webkit-box !important; 

overflow: hidden; 

text-overflow: ellipsis; 

work-break: break-all; 

-webkit-box-orient: vertical; 

-webkit-line-clamp: 2; //指定行数

}



15、垂直水平居中

absolute: position: absolute

配合

top:50%;left:50%;transform:translate(-50%, -50%) 



autobot: display:flex 配合 margin:auto 



flex: display:flex 配合 align-items:center、justify-content:center （推荐）



grid: display:grid 配合 place-content:center;