一、验证专题
1.el-input里限制输入两位小数的数字内容
onkeyup = "this.value=this.value.match(/\d+\.?\d(0,2)/);this.dispatchEvent(new Event("input"))"
二、需求解决问题思路
1.动态扩容
情景:当颜色只有10种,但是有超过10中的数据,需要被赋值,就要对其进行动态扩容
方法:索引除以10取余数,把这个余数的索引对应的颜色取到,再开辟一个对象 let node = {}把对应要赋值的属性写进去,最后push到这个数组里
2.js的同步和异步概念
同步是按你的代码顺序执行,异步不按代码的顺序执行
3.比较两个对象的数据是否完全相等,使用JSON.stringify(obj)来判断两个对象转化后的字符串是否相等。
4.如果组件的传值报undefined的错误,可以用v-if判断一下值来了再显示
5.js里引入路径需要使用require
`url(${require('绝对路径')})`
6.get方法传值时,如果传中文的参数就会被解码,可以跟后端沟通变成post方法,解码太麻烦了
7.单位换算方法,带千分位
maxNumChange(val) {
let count = val
//如果大于亿,就换算成亿
if (val > 100000000) {
count = val / 100000000
count = Number(count.toFixed(0)).toLocaleString() + '亿'
return count
}
//如果大于万,就换算成万
if (val > 10000) {
count = val / 10000
count = Number(count.toFixed(0)).toLocaleString() + '万'
return count
}
//其他情况就返回本身,带上千分位
return count.toLocaleString()
},
8.props接收多种类型的type,要写成数组接收
9.js播放m3u8格式视频
参考链接:https://blog.csdn.net/qq_36410795/article/details/107109514
安装依赖
npm install --save video.js
npm install --save videojs-contrib-hls
在mian.js里引入import ‘video.js/dist/video-js.css’
在播放视频的页面里
import videojs from “video.js”;
import “videojs-contrib-hls”;
指定一个video容器
<video
id="my-video"
class="video-js vjs-default-skin"
controls
preload="auto"
width="500px"
>
<source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" />
</video>
初始化播放器:
methods:{
getVideo() {
videojs(
"my-video",
{
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
},
function() {
this.play();
}
);
}
}
mounted() {
this.getVideo();
},
10.对数组或者对象的赋值要采取深拷贝,否则改变后面的前面的也会跟着变
深拷贝的方法:
JSON.parse(JSON.stringify(数组or对象))
三、样式专题
1.不换行设置省略号
先设置width
white-space:nowarp;
overflow:hidden;
text-overflow:ellipsis;
2.关于隐藏的三种
opacity:0;特点:看不见,占空间,点击区域出发事件
visibility:hidden;特点:看不见、占空间、点击区域不触发事件
display:none;特点:看不见、不占空间、不触发事件
3.加背景图片
background-image: url(‘相对路径’);
//设置宽高贴合容器
background-size: 100% 100%;
//不重复
background-repeat: no-repeat;
4.需求:联级选择器去掉单选框、点击文本就可选中
.自定义浮层类名 {
.el-cascader-panel{
.el-cascader-menu{
.el-radio{
height: 100%;
width: 150px;
opacity: 0;
position: absolute;
.el-radio__input{
.el-radio__inner{
border: none;
}
}
.el-radio__input.is-checked{
.el-radio__inner{
background: none;
}
}
}
}
}
}
5.vue对象格式 :style=“[{属性:值}]” :class=“{类名:true or false}”