前端封装的一些常用的方法

发表于 更新于
包含了vue、JavaScript等封装的一些方法进行纪律~

复杂数组中的对象去重

1
2
3
4
5
6
7
8
9
10
11
12
var array = [{id:'1',name:'沈杰鑫'},{id:'1',name:'沈杰鑫'},{id:'1',name:'沈杰鑫'},{id:'1',name:'沈杰鑫'}]
setRepeat() {
   for (var i = 0;i < this.array.length - 1;i++) {
       for (var j = i + 1;j < this.array.length;j++) {
          if (this.array[i].id === this.array[j].id) {
            this.array.splice(j, 1)
            j--
          }
       }
   }
    return this.array
}

Element多选表格回显

需求：进行列表的选中操作，然后点击下一页，再返回，之前选中的记录就没有了。

设计思路：

  1. 进入多选表界面

  2. 选中多选框，使用：

    1. @select=”handleSelection”

    2. @select-all=”handleSelection”

    3. 当选中当个或者多个都会触发事件：handleSelection

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      handleSelection(row) {
          //将此行的数据赋值给toDeviceList
          this.toDeviceList = row
          //调用数据设置到对象的函数
          this.setDeviceList()
      }
      // 将选中的数据保存起来
      setDeviceList() {
          //获取当前page为第几页
          //currentPage当前页数
          this.currentPage = this.deviceParams.pageNum
          //将当前页选中的数据赋值给devicePageList对象中的key值
          this.devicePageList[this.currentPage] = this.toDeviceList
      }
      // 多选表格回显
      getDeviceList() {
          this.$nextTick(() => {
              //获取当前页数
              this.currentPage = this.deviceParams.pageNum
              //判断数据是否为空，为空则不进行回显
              if (this.deviceToGroupTableData !== undefined && this.devicePageList[this.currentPage] !== undefined) {
                  //获取当前页选中的数据
                  this.devicePageList[this.currentPage].forEach((v, i) => {
                      //获取后端返回此页的数据
                      this.deviceToGroupTableData.forEach((_v, _i) => {
                          //判断选中的数据在此页是否有存在
                          if (v.deviceId === _v.deviceId) {
                              //有存在：将此条数据回显到界面上
                              this.$refs.deviceToGroupTableData.toggleRowSelection(_v)
                          }
                      })
                  })
              }
          })
      }

  3. 每次进行分页点击后，进行回显函数调用

视频首帧截取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="dialog_pan_img">
    <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(item,index) in videoList.videoInfoList" :key="item.deviceId">
            <video :id="'video'+index" :src="item.url" class="videx" controls />
                </el-carousel-item>
</el-carousel>
</div>
//获取视频第一帧
findvideocover() {
    // 获取video节点
    this.$nextTick(() => {
        for (let i = 0;i < this.videoList.videoInfoList.length;i++) {
            const i = document.getElementById('video' + i)
            console.log(i)
            i.width = 160
            i.height = 160
            i.currentTime = 1 // 第一帧
            // 创建canvas对象
            const canvas = document.createElement('canvas')
            canvas.width = 160
            canvas.height = 160
            // 利用canvas对象方法绘图
            canvas.getContext('2d').drawImage(i, 0, 0, canvas.width, canvas.height)
            // 转换成base64形式
            const img = canvas.toDataURL('image/jpeg') // 这个就是图片的base64
            this.coverUrl.push(img)
        }
        console.log(this.coverUrl)
    })
}

JavaScript生成唯一ID的方式：

​ UUID

1
2
3
4
5
6
7
8
9
10
guid() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
            var r = (Math.random() * 16) | 0,
                v = c == "x" ? r : (r & 0x3) | 0x8;
            return v.toString(16);
        }
    );
}