工作中遇到的问题和一些经验总结

「爱情、让人受尽委屈。」 2023-09-30 09:41 1阅读 0赞

**目录**

1.样式：下拉菜单位置

2.vue props修改数据问题

3.将时间转换为时间戳

4.时间戳转换为天数

5.获取当前时间时间戳的几种方式

6.js大小写字符串转换

7.vue 过滤器filter

8.\[Vue warn\]: Duplicate keys detected: '0'. This may cause an update error. found in解决办法

9.bug:渲染时报错未定义

10.git报错

11. 本地项目运行时跨域问题

12.vue项目本地开发，同局域网同时不能访问我的项目

13.获取对象长度

14. 获取0到n之间的随机数

15.用变量控制颜色

16.父传子数据改变子不改变方法

17.前端请求超时

18.解决右侧出现滚动条页面抖动的问题

19.左侧10个tab选项，点击时，右侧显示柱状图，右侧柱状图数量不等，大于等于1.让数据实时改变

20.修改elementUI表格表头的背景颜色

21.打包部署后发现页面问题

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

## 1.样式：下拉菜单位置 ##

> **问题：**修改elementUI中的样式，没有生效。
> 
> **改了半天都不行，最后发现是** **：：v-deep 和 .el-dropdown-menu的问题**

/* 修改下拉菜单item项 */  --这样就可以 中间有空格就不行
    ::v-deep.el-dropdown-menu {
        left: 53.5% !important;
    }

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

### 2.vue props修改数据问题 ###

> **报错信息：**
> 
> 通过props传递给子组件的show，不能在子组件内部修改props中的show值

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][]

>  **解决：**
> 
> **在子组件里面定义一个变量，接受传过来的值，这个操作在mounted或者create里面就可以了。**

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

### 3.将时间转换为时间戳 ###

timestampLogin = new Date('2019-08-08 16:51:07').getTime();//1565254267000

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

### 4.时间戳转换为天数 ###

> **截止时间减去当前时间，算出距离截止的天数**

let rangeDateNum = (time - new Date.getTime()) / (1000*3600*24);

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

### 5.获取当前时间时间戳的几种方式 ###

**获取当前时间戳**

Calendar.getInstance().getTimeInMillis();
    System.currentTimeMillis();
    new Date().getTime();

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

### 6.js大小写字符串转换 ###

**`str.toUpperCase()` 方法将字符串转大写并返回**

var str = "Hello World Hello World";
    var str2 = str.toUpperCase();
    console.log(str2);//HELLO WORLD HELLO WORLD

**str.toLowerCase()方法将字符串转小写并返回**

var str='www.jb51.net/ABC';
    document.write(str.toLowerCase());//将输出 www.jb51.net/abc

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

### 7.vue 过滤器filter ###

filters:{
            //处理函数
            addPriceIcon(value){
                console.log(value)//200
                return '¥' + value
            }
        }

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

### 8.\[Vue warn\]: Duplicate keys detected: '0'. This may cause an update error. found in解决办法 ###

> **错误原因：**
> 
> 一个template中有两个一样的v-for, key属性冲突导致
> 
> **解决：**
> 
> 在第二个v-for中， key属性设置一下即可：:key="index+1"
> 
> 坑：知道是key的问题，改了下key的名字，不行，于是记录之

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

### 9.bug:渲染时报错未定义 ###

Cannot read properties of undefined (reading 'cve_Published')

> **解决：**并非是数据格式问题，应该是异步问题。加上一行v-if判断就好了

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

### 10.git报错 ###

ssh: connect to host gitee.com port 22: Connection reset by peer

> **解决：换个网。。**

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

### 11. 本地项目运行时跨域问题 ###

> **最简单的办法 ，vscode下载live serve 右键open in liveserve**

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

### 12.vue项目本地开发，同局域网同时不能访问我的项目 ###

> **在package.json文件中script要运行的命令上，加上--host= 本机IP地址；同时关闭防火墙**

"scripts": {    "serve": "vue-cli-service serve --host=192.168.31.60",    "build": "vue-cli-service build",    "lint": "vue-cli-service lint"  },

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

### 13.获取对象长度 ###

var obj = {'id':1,'name':'叶落森','sex':'女'};
    	var arr = Object.keys(obj);
    	console.log(arr);  // ['id','name','sex']
    	console.log(arr.length);  //3

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

### 14. 获取0到n之间的随机数 ###

randFrom0ToN=Math.floor(Math.random()*Math.floor(n));
    
    以上语句即可生成 0 到 n 的随机数（整数）

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

### 15.用变量控制颜色 ###

:style="{backgroundColor:`rgba(${getRandomColor().ran},${getRandomColor().ran2},${getRandomColor().ran3},1`}"

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

### 16.父传子数据改变子不改变方法 ###

> 在子组件监听父传过来的数据，然后重新赋值就可

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

### 17.前端请求超时 ###

**报错：**

redis.exceptions.ConnectionError
    redis.exceptions.ConnectionError: Error 10060 connecting 192.168.31.167:6379. 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。.

> **由于后端缓存服务器掉了，后端问题。**

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

### 18.解决右侧出现滚动条页面抖动的问题 ###

>  **问题：**
> 
> 页面初始内容没有超出浏览器可视区域，打开下拉菜单之类的，超出后就会出现滚动条，由于滚动条占宽度，所以在出现的瞬间，页面会有小幅度的移动（挤压）。
> 
> **完美：**
> 
> 如果不考虑太多兼容，只用在谷歌或使用谷歌引擎的其他浏览器如360上面的话，用这个非常好，可以理解为把滚动条搞成绝对定位,不占位置漂浮于页面内容上，实际的效果比较好。

新属性overlay方法：
    html {
      overflow-y: overlay;
    }

>  **可惜，兼容性不佳，在火狐等浏览器无效，要是有需求还有三种方法：**
> 
> **1.js去计算，2.把body设置为绝对定位，3利用vw和calc实**

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

### 19.左侧10个tab选项，点击时，右侧显示柱状图，右侧柱状图数量不等，大于等于1.让数据实时改变 ###

> **将柱状图封装为一个子组件，然后将v-for里面的item传过去，子组件监听item，重新赋值**

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

### 20.修改elementUI表格表头的背景颜色 ###

1、首先使用 elementUI中的header-cell-style 属性
    <el-table
      :data="paperList"
      :header-cell-style="getRowClass"
    >
    2、然后在getRowClass方法中 改变css样式
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#f8f8f9;";
      }
    },

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

### 21.打包部署后发现页面问题 ###

> **问题：**
> 
> 打包部署后发现页面只能显示一个屏幕，没有滚动条，导致页面只能部分显示
> 
> **解决：**
> 
> 大概率是css问题，尤其是第三方css，可以试着全局查找overflow：hidden,重点是body或者是html里面的这个属性，给删除了，即可

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c2b267c3c3c84fa09222a7867d50c68b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16