1.样式:下拉菜单位置
问题:修改elementUI中的样式,没有生效。
改了半天都不行,最后发现是 ::v-deep 和 .el-dropdown-menu的问题
/* 修改下拉菜单item项 */ --这样就可以 中间有空格就不行 ::v-deep.el-dropdown-menu { left: 53.5% !important; }
2.vue props修改数据问题
报错信息:
通过props传递给子组件的show,不能在子组件内部修改props中的show值
解决:
在子组件里面定义一个变量,接受传过来的值,这个操作在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里面的这个属性,给删除了,即可