22年7月工作笔记整理（前端）

一、验证专题

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}”