10月工作经验总结

桃扇骨 2023-09-27 12:13 100阅读 0赞

**目录**

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.项目本地运行正常，部署上线报错 ###

### ![61986fe19c4e4f11aaa57f1260942d42.png][] ###

#### 原因： ####

> 经过排查，原因是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时的背景颜色。如果<el-table-column prop="dstIp" label="操作">上面有fixed属性会导致问题（鼠标经过和其他<el-table-column prop="dstIp" label="操作">）属性互斥，去掉就好了

--------------------

#### 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;相对来说比较好的方式，不会变形，不会留白，有可能导致图片显示不完全。

![329adee80c8743c5a507904dfed7a50e.png][]

--------------------

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

按照以下方式设置：

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

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

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

###  ###

[61986fe19c4e4f11aaa57f1260942d42.png]: https://img-blog.csdnimg.cn/61986fe19c4e4f11aaa57f1260942d42.png
[329adee80c8743c5a507904dfed7a50e.png]: https://img-blog.csdnimg.cn/329adee80c8743c5a507904dfed7a50e.png