前端工作记录一

css篇

css避免选中

img{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }

css鼠标穿透

pointer-events:none

css文本超出省略号

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

js篇

v-for 和 v-if v-for的优先级高

计算属性传参

computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } }

toFixed坑

https://www.cnblogs.com/zm-blogs/p/12909096.html

监听滚动条

let offsetHeight = dom.offsetHeight let scrollTop = dom.scrollTop let scrollHeight = dom.scrollHeight if(offsetHeight + scrollTop >= scrollHeight){ getMore() }

防抖

处理高频度执行的函数，首次执行之后，在规定的时间内没有再次触发则执行，如果触发则会重新计算过期时间 效果：短时间大量触发同一事件，只会执行一次函数

function debounce(fn,delay){ let timer = null return function(){ if(timer){ clearTimeout(timer) timer = setTimeOut(fn,delay) }else{ timer = setTimeOut(fn,delay) } } }

节流

短时间内触发同一事件，那么在函数执行一次之后，在指定的时间内触发则需要过了冷却事件之后才会再次触发

function trottle(fn,delay){ let empty = true return function(){ if(!empty){ return } setTimeout(()=>{ fn empty = true },delay) } }

判断鼠标失效的dom元素

e.relatedTarget(返回与事件的目标节点相关的节点) 对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。 对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。

图片加载不触发Onload事件

1、原来请求过一次，再次请求会在浏览器的内存中请求。（加时间戳避免） 2、图片损坏（可以判断图片是否真实存在）

Promise

async getNewSize(value) { await new Promise(( reslove,reject )=>{ img.onload=()=>{ reslove() } }) 别忘了在调用await函数前添加async！

批量上传文件导致上传失败

其实根据浏览器的不同而不同，我的谷歌发送了1300多张上传图片的请求就挂掉了，出现net::ERR_INSUFFICIENT_RESOURCES，写一个笨拙的vue的解决办法

<template> <div class="hello"> <h1>{{ msg }}</h1> <input multiple type="file" name="file" value="请选择文件" accept=".png, .jpg, .jpeg" @change="fileChange($event)" /> </div> </template> <script> import moment from "moment"; import axios from "../http/index"; export default { name: 'HelloWorld', props: { msg: String }, data(){ return { sendRequestArr:[], fillListArr:[] } }, methods:{ fileChange(e){ const tcp = 6 for(let file of e.target.files){ this.fillListArr.push(file) } let timestamp=moment(new Date()).format('YYYYMMDDHHmmss') //这个时间戳并不重要，我写的后端是根据时间戳来创建文件夹的 let tempFillList = this.fillListArr.splice(0,tcp) for(let i = 0;i < tempFillList.length ; i++){ let data = new FormData() let file = tempFillList[i] data.append('file' , file) this.sendRequest(data,timestamp,i) } }, sendRequest(data,timestamp,index){ this.sendRequestArr[index] = false axios.post("/api/upload",data,{ headers: { 'time': timestamp, 'index': index } }).then(() =>{ this.sendRequestArr[index] = true if(this.fillListArr.length){ let data = new FormData() let file = this.fillListArr[0] data.append('file' , file) this.fillListArr = this.fillListArr.splice(1,this.fillListArr.length - 1) this.sendRequest(data,timestamp,index) }else{ let finishedAll = this.sendRequestArr.every((finished)=>{ return finished }) if(finishedAll){ this.sendRequestArr = [], this.fillListArr = [] } } }).catch(err =>{ let data = new FormData() let file = this.fillListArr[0] data.append('file' , file) this.fillListArr = this.fillListArr.splice(1,this.fillListArr.length - 1) this.sendRequest(data,timestamp,index) console.log(err) }) }, } } </script>

基本思想就是根据浏览器对于同一个域名下的请求最大并行量来规定初始的发送请求数量，比如我这里是六个，首先发送六个，并且记录每一个是否完成，当完成的时候，就截取等待上传的数组然后进行上传，直到等待上传数组为空就不会再发送请求，等到待上传数组为空并且状态数组中都完成了，那么都回到初始位置

另外记录一下用XMLHttpRequest发送请求的方法 filexhr(e){ let files = e.target.files let timestamp=moment(new Date()).format('YYYYMMDDHHmmss') for(let file of files){ let data = new FormData() let request = new XMLHttpRequest(); request.open('POST', "/api/upload",true); request.setRequestHeader("time",timestamp); data.append('file' , file) request.onload = function(e){ console.log(request,e) } request.onerror = function(){ console.log("请求失败") } request.ontimeout = function() { console.error("请求超时") } request.send(data); } } 另外写一下与element ui结合并且不改变onchange的写法 <el-upload drag multiple name="file" :action="yourUrl" :show-file-list="false" :with-credentials="true" accept=".png, .jpg, .jpeg" :on-change="onUploadChange" :http-request="uploadfile" > </el-upload> <script> export default { data(){ retrun{ fileListArr:[], statusListArr:[] } }, //其实思想就是上面的思想，我想展示的只有可以在http-request的参数中可以调用onError和onSuccess方法，这样就不会影响你的on-change函数,并且函数中需要传递服务器返回的response，否则你掉用这个函数之后触发onchange并不能拿到response这个值 methods:{ uploadfile(data){ const tcp = 6 let len = this.statusListArr.length if(len < tcp){ this.sendResquest(len,data) }else{ this.fileListArr.push(data) } }, sendResquest(len,data){ const { file, filename:name, action } = data this.statusListArr[len] = false let formData = new FormData() formData.append(name , file) this.$axios .post(action,formData) .then(res=>{ this.statusListArr[len] = true data.onSuccess(res.data) if(this.fileListArr.length){ this.sendResquest(len,this.fileListArr[0]) this.fileListArr = this.fileListArr.splice(1,this.fileListArr.length - 1) }else{ let finishedAll = this.statusListArr.every((finished)=>{ return finished }) if(finishedAll){ this.statusListArr = [], this.fileListArr = [] } } }) .catch(err=>{ if(this.fileListArr.length){ this.sendResquest(len,this.fileListArr[0]) this.fileListArr = this.fileListArr.splice(1,this.fileListArr.length - 1) }else{ let finishedAll = this.statusListArr.every((finished)=>{ return finished }) if(finishedAll){ this.statusListArr = [], this.fileListArr = [] } } data.onError(err.response) }) }, onUploadChange(){ console.log(886) } } } </script>

下载文件

function iframeDownload (url) { const iframe = document.createElement('iframe') iframe.style.display = 'none' function iframeLoad () { const win = iframe.contentWindow if (win.location.href === url) { iframe.parentNode.removeChild(iframe) } } if ('onload' in iframe) { iframe.onload = iframeLoad } else if (iframe.attachEvent) { iframe.attachEvent('onload', iframeLoad) } else { iframe.onreadystatechange = function onreadystatechange () { if (iframe.readyState === 'complete') { iframeLoad() } } } iframe.src = '' document.body.appendChild(iframe) setTimeout(function loadUrl () { iframe.contentWindow.location.href = url }, 50) }

组件篇

vue 瀑布流组件

vue-waterfall

vue 代码高亮组件

vue-json-viewr

element抽屉组件选中黑边

element ui抽屉组件出现黑框并不是因为border而是用的是outline属性

element抽屉组件h1发生改变

他的抽屉组件内容区域使用的是语义化标签

element table组件抖动

table组件设置max-height之后并不会有什么问题，但是当他的数据进行异步获取之后，就会出现大的bug，你就会发现他的宽度被扩大了。