工作中遇到的问题和一些经验总结-蒲公英云

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

本地项目运行时跨域问题

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

13.获取对象长度

获取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;";
  }
},