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

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

1.样式:下拉菜单位置

问题:修改elementUI中的样式,没有生效。

改了半天都不行,最后发现是 ::v-deep 和 .el-dropdown-menu的问题

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

2.vue props修改数据问题

报错信息:

通过props传递给子组件的show,不能在子组件内部修改props中的show值

image.png

解决:

在子组件里面定义一个变量,接受传过来的值,这个操作在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()方法将字符串转小写并返回

1. var str='www.jb51.net/ABC';
2. 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之间的随机数

1. randFrom0ToN=Math.floor(Math.random()*Math.floor(n));
2. 
3. 以上语句即可生成 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里面的这个属性,给删除了,即可

相关文章
|
5月前
|
数据建模
技术经验解读:ZVS振荡电路工作原理分析
技术经验解读:ZVS振荡电路工作原理分析
100 1
|
前端开发 测试技术 程序员
程序员成长第八篇:做好测试工作
程序员成长第八篇:做好测试工作
217 0
|
运维 监控 前端开发
带团队后的日常思考(十一)
带团队后的日常思考(十一)
|
存储 编解码 监控
带团队后的日常思考(十二)
带团队后的日常思考(十二)
阿里抱真:工作7年,我的10条经验总结
阿里抱真:工作7年,我的10条经验总结
393 0
|
JavaScript UED
10月工作经验总结
10月工作经验总结
10月工作经验总结
html+css实战163-工作场景
html+css实战163-工作场景
108 0
html+css实战163-工作场景
html+css实战129-准备工作
html+css实战129-准备工作
86 0
html+css实战129-准备工作
|
开发框架 前端开发 Java
测开要做的开发工作到底是做什么
科普测试开发工作内容
534 0
工作7年,我的10条经验总结
作者是一名很普通的技术工程师,从14年毕业到现在工作了7年。本文将与大家分享一些在职场中的道理和经验,希望能对大家有所启发和帮助。
工作7年,我的10条经验总结