一、样式问题

1.三角形的原理
主要是通过border来控制的，当遇到要修改三角形颜色时，应该修改的是border的颜色。

//画一个正三角形的css代码
height:0px;
width:0px;
border-left:20px solid transparent;
border-right:20px solid transparent ;
border-bottom:20px solid #9E9E9E ;

2.max-width会覆盖width，就算加important也没用，min-优先级大于max-
3.margin垂直居中的办法

postion:absolute;
top:0;bottom:0;left:0;
width:200px;height:100px;margin:auto;

二、一些小tips

1.对日期的处理，可以使用Day.js工具
官网学习：https://dayjs.fenxianglu.cn/
先安装：npm install dayjs --save
使用：
var dayjs = require(‘dayjs’)
dayjs().各种方法

2.关于封装组件的技巧
$attrs 简化多层组件之间props传值；
$listeners 简化多层组件之间事件传递；
$Slots 更多拓展自定义组件传值，包括自定义html元素，及对象；
props validator 增强组件传值稳健性，可自定义业务代码效验参数；
$refs 对外提供API 增强组件灵活度和可控性；

3.图片链接为http显示不出来，在index.html里加上

<meta name="referrer" content="no-referrer">

4.利用注释来定义代码折叠的范围
//#region
//#endregion
5.用setTimeout实现setTnterval

newIntervel(){
setTimeout(()=>{
//调用方法
this.newIntervel()
},5000)
}

三、表格的高亮需求

需求：创建完后高亮新建的一条数据
思路：通过创建完之后，拿到那一列的唯一标识，发送给列表，列表拿到之后，就遍历找到那列，使用表格的方法对其进行高亮。

//页面间的通信采用bus
使用this.$bus.$emit('方法名',值) 发送
使用this.$bus.$on('方法名',()=>{}) 接收
高亮那一列的方法：this.$refs.ref名.setCurrentRow(row)

四、需要实现弹窗可以拖拽

网上有现成的，只要按照方法加进去就可以
先在src下创建一个directive文件夹，再创建一个el-drag-dialog文件夹下，放index.js和drag.js

//index.js
import drag from './drag'const install = function (Vue) {Vue.directive('el-drag-dialog', drag)
}if (window.Vue) {window['el-drag-dialog'] = dragVue.use(install); // eslint-disable-line
}drag.install = install
export default drag

//drag.js
export default {bind(el, binding, vnode) {const dialogHeaderEl = el.querySelector('.el-dialog__header')const dragDom = el.querySelector('.el-dialog')dialogHeaderEl.style.cssText += ';cursor:move;'dragDom.style.cssText += ';top:0px;'// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const getStyle = (function () {if (window.document.currentStyle) {return (dom, attr) => dom.currentStyle[attr]} else {return (dom, attr) => getComputedStyle(dom, false)[attr]}})()dialogHeaderEl.onmousedown = e => {// 鼠标按下，计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTopconst dragDomWidth = dragDom.offsetWidthconst dragDomHeight = dragDom.offsetHeightconst screenWidth = document.body.clientWidthconst screenHeight = document.body.clientHeightconst minDragDomLeft = dragDom.offsetLeftconst maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidthconst minDragDomTop = dragDom.offsetTopconst maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight// 获取到的值带px 正则匹配替换let styL = getStyle(dragDom, 'left')let styT = getStyle(dragDom, 'top')if (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)} else {styL = +styL.replace(/\px/g, '')styT = +styT.replace(/\px/g, '')}document.onmousemove = function (e) {// 通过事件委托，计算移动的距离let left = e.clientX - disXlet top = e.clientY - disY// 边界处理if (-left > minDragDomLeft) {left = -minDragDomLeft} else if (left > maxDragDomLeft) {left = maxDragDomLeft}if (-top > minDragDomTop) {top = -minDragDomTop} else if (top > maxDragDomTop) {top = maxDragDomTop}// 移动当前元素dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`// emit onDrag eventvnode.child.$emit('dragDialog')}document.onmouseup = function (e) {console.log('e = ', e)document.onmousemove = nulldocument.onmouseup = null}}}
}

使用：
<i -dialog v-drag > </i -dialog>

五、cookie、localStorage和sessionStorage的区别

1.cookie的内容主要包括：名字name，值value，过期时间expires，路径path和域domain。路径和域一起构成cookie的作用范围。一般cookie储存在内存里，若设置了过期时间则储存在硬盘里，浏览器页面关闭也不会失效，直到设置的过期时间后才失效。若不设置cookie的过期时间，则有效期为浏览器窗口的会话期间，关闭浏览器窗口就失效。

// 创建一个名称为name，对应值为value的cookie，由于没有设置失效时间，默认失效时间为该网站关闭时
Cookies.set(name, value)// 创建一个有效时间为7天的cookie
Cookies.set(name, value, { expires: 7 })// 创建一个带有路径的cookie
Cookies.set(name, value, { path: '' })// 创建一个value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)// 获取指定名称的cookie
Cookies.get(name) // value// 获取value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))// 获取所有cookie
Cookies.get()
// 删除指定名称的cookie
Cookies.remove(name) // value// 删除带有路径的cookie
Cookies.set(name, value, { path: '' })
Cookies.remove(name, { path: '' })

2.localStorage的生命周期是永久，除非手动去清除，否则永远都存在，他的储存大小是5MB，仅在客户端浏览器上储存，不参与服务器的通信。

 //设置localStorage保存到本地，第一个为变量名，第二个是值localStorage.setItem('Author', 'Jane')// 获取数据localStorage.getItem('Author')// 删除保存的数据localStorage.removeItem('Author')// 清除所有保存的数据localStorage.clear()

3.sessionStorage顾名思义，是在当前会话下有效，引入了一个“浏览器窗口的概念”,sessionStorage是在同源的同窗口中，始终存在的数据，只要浏览器不关闭，即使是刷新或者进入同源的另一个页面，数据仍在。同时打开“独立”的窗口，即使是同一个页面，sessionStorage的对象也是不同的。关闭窗口后sessionStorage就会被销毁。

// 设置sessionStorage保存到本地，第一个为变量名，第二个是值sessionStorage.setItem('sessionName', 'John')// 获取数据sessionStorage.getItem('sessionName')// 删除保存的数据sessionStorage.removeItem('sessionName')// 清除所有保存的数据sessionStorage.clear()

22年6月工作笔记整理（前端）相关推荐

毕业一年多了，在深圳找了大半个月工作，试问前端工作的明路在何方。。
最近和一个学弟聊天,跟我抱怨说:在深圳找工作,待了快一个月了,每天几十份几十份简历投,从3月初到到现在快一个月了,还没找到工作,真的是太难了.都知道"深圳赚钱深圳花,一分别想带回家" ...
XYC2016上半年工作笔记整理
只要团队在,做那个方向都可能这个产品的用户群人均价值高第一次产品介绍会议就介绍了产品的初期全部目标功能传统互联网人的产品思路比较偏媒体内容服务特性. 产品转化率高说明了其发展势头任何一个形式变 ...
QML工作笔记-仿前端滑出界面（JavaScript）
目录基本概念代码及演示源码打包下载基本概念 qml可以使用JavaScript完成一些动画的功能,其中可以写一个Js文件,并且导入,这样可以让程序结构更加清晰: 但这个JavaScript和w ...
整理前端工作中的可复用代码（二）：拓展spark-md5，支持计算网络文件md5
这里是<整理前端开发中的可复用代码>中的第二篇,最初此系列文章的标题不是这个,但觉得标题要准确.明白一些,便做了修改.这里的经验都来自作者的工作实践,入了前端坑的摸爬滚打. 背景在工作中 ...
Kafka入门篇学习笔记整理
Kafka入门篇学习笔记整理 Kafka是什么 Kafka的特性应用场景 Kafka的安装单机版部署集群部署环境准备 Kafka 2.x集群部署 Kafka 3.x集群部署监听器和内外网络 K ...
2017年阅读笔记整理
2017年已经过去了这么长时间,2018已经过去了一季度,到今天才把17年的阅读笔记整理完,拖延症太严重了.大概统计了下,自己工作后,每年的阅读量好像在逐步降低,刚开始15年是50+本,16年降到40 ...
【转载】Deep Learning（深度学习）学习笔记整理系列
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-0 ...
Deep Learning（深度学习）学习笔记整理系列 | @Get社区
Deep Learning(深度学习)学习笔记整理系列 | @Get社区 Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net ...
罗辑思维在全链路压测方面的实践和工作笔记
业务的知名度越高,其背后技术团队承受的压力就越大.一旦出现技术问题,就有可能被放大,尤其是当服务的是对知识获取体验要求颇高的用户群体. 提供知识服务的罗辑思维主张"省时间的获取知识" ...

22年6月工作笔记整理（前端）

目录