10月工作经验总结

目录

1. localStorage跨域问题

2.CSS发光效果 

3.项目本地运行正常，部署上线报错

4.修改elementUi的input的placeholder样式

5.字符串和数组之间的相互转换

6.ElementUI的bug

7.禁止emelemntUI 抽屉组件点击空白关闭

8.el-popover 样式修改

9.登录页背景图自适应屏幕且不出现滚动条

10.鼠标右键阻止默认行为，自定义右键菜单

11.使用函数（js）来写样式

12.刷新页面

---

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样式

::v-deep .place .el-input__inner {
  &::placeholder {
    color: red;
  }
}

---

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修改

      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>
 

---

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页面内（如果你的根组件不叫这个，那就找你的路由出口）

按照以下方式设置：

​

然后就可以在任意一个组件内这样使用：

 inject: ['reload'],
  data () {
    return {}
  },