1. localStorage跨域问题
问：如果我在百度首页将变量存入localStorage，那么跳转到新浪首页还能拿到之前在百度存的变量吗？
不可以，localStorage也存在跨域问题，但是有解决方法，如有A、B两个页面，可以让B请求A域，或找一个第三域C，来和AB连接，不多赘述。
2.CSS发光效果
盒子发光：box-shadow
box-shadow: 0 0 2px #1e82be, 0 0 3px #1e82be, 0 0 4px #1e82be, 0 0 5px #1e82be;
文字发光：text-shadow
text-shadow: 0 0 2px #1e82be, 0 0 3px #1e82be, 0 0 4px #1e82be, 0 0 5px #1e82be;
3.项目本地运行正常，部署上线报错
原因：
经过排查，原因是ElementUI.js的版本问题,
我开发环境是2.13版本
生产是2.19版本
解决：
只要下载2.13版本放到生产环境就好了
一定要排查的是，如果本地开发正常，那么线上的版本要换成本地的版本。
4.修改elementUi的input的placeholder样式
1. ::v-deep .place .el-input__inner { 2. &::placeholder { 3. color: red; 4. } 5. }
5.字符串和数组之间的相互转换
join：数组转字符串
[1].join("") //'1' [1,2,3].join("") //'123' [1,2,3].join(',') //'1,2,3'
split:字符串转数组
"1,2,3".split("") //['1', ',', '2', ',', '3'] "1,2,3".split(",") // ['1', '2', '3'] "1".split(",") //['1']
6.ElementUI的bug
修改鼠标经过table时的背景颜色。如果上面有fixed属性会导致问题（鼠标经过和其他）属性互斥，去掉就好了
7.禁止emelemntUI 抽屉组件点击空白关闭
:wrapperClosable="false"
8.el-popover 样式修改
el-popover 样式修改 通过popper-class绑定自定义类名popperOptions修改
<el-popover width="300" trigger="hover" popper-class="popperOptions" placement="top-start" > <div class="operate-btn" slot="reference"> <el-badge :value="12" class="item"> <i class="icon el-icon-chat-line-round"></i> </el-badge> </div> <span slot="default"> 你有99条未读消息，请及时查看 </span> </el-popover>
9.登录页背景图自适应屏幕且不出现滚动条
min-height: 100%; width: 100%; overflow: hidden; background-image: url("~@/assets//common/bjlogo.png"); // 设置背景图片 background-position: center; //从中间开始渲染 background-size: cover;// 将图片位置设置为充满整个屏幕 background-repeat: no-repeat;//不平铺
几种方式：1.background-size: 100% 100%;图片容易变形
2.background-size: 100% auto;比第一种好一些，但是随着屏幕变化会出现留白
3.background-size: contain;保持图片的宽高比例，不会变形，但是有可能导致留白
4.background-size: cover;相对来说比较好的方式，不会变形，不会留白，有可能导致图片显示不完全。
10.鼠标右键阻止默认行为，自定义右键菜单
mounted () { let that = this // 注意 取消默认行为 我们鼠标右键的时候 一般是弹出 浏览器的 属性 刷新等等的那个菜单 // 阻止默认行为 就没有那个菜单出来了 document.addEventListener('contextmenu', function (e) { e.preventDefault() that.anQuanSeach() }) },
11.使用函数（js）来写样式
:style="nodeContainerStyle" //template模板 // 节点容器样式 method nodeContainerStyle () { let border = '#1879ff' if (this.node.type == 'choices' || this.node.type == 'Choices') { border = "#1879ff" } else { border = "#36ae53" } return { top: this.node.top, left: this.node.left, borderColor: border } },
12.刷新页面
之前最常用的是this.$router.go(0),但是此类方法会导致URL刷新时闪烁且用户体验极差，但是但是，这个是强刷新，之前我使用three.js需要刷新，结果我下面介绍的方法竟然刷新不了，还是这个刷新的。
以下是我使用最多的方式，用户体验好，vue2和vue3通用，修改简单：
在你的app.vue页面内（如果你的根组件不叫这个，那就找你的路由出口）
按照以下方式设置：
<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data () { return { isRouterAlive: true } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(function () { this.isRouterAlive = true }) } } } </script>
然后就可以在任意一个组件内这样使用：
1. inject: ['reload'], 2. data () { 3. return {} 4. },
