直播管理项目

1.直播封面更改，input type= file样式不可变的决绝方法：将其设为与自定义按钮一样的大小、透明，z-index置于自定义按钮之上

2.直播间链接的复制

<p class="live-link">
     直播间链接：{
   { liveRoomInfo.url }}
     <img src="@/assets/images/ic_copy.png" alt="" class="live-image"
     v-clipboard:copy="liveRoomInfo.url" 
     v-clipboard:success="onCopy"
     v-clipboard:error="onError"
     >
</p>
<!--
v-clipboard:copy="liveRoomInfo.url" :待拷贝内容
v-clipboard:success="onCopy" ：拷贝成功的回调
v-clipboard:error="onError" ：拷贝失败的回调
 -->

3.文字计数，独立的div块，绝对定位置于input里。文字的计数方式为中文算一个字，两个英文算一个字。

let s="中文zh英文eng"
let reg=/[\u4e00-\u9fa5]/g  //匹配全文的中文
let zhLen=s.match(reg).length  //4

let len=Math.ceil((s.length+zhLen)/2)

4.推流地址的展示和非首次直播默认勾选协议

借助 localStorage进行存储。协议勾选默认长期存储。

推流地址的展示由于不在init网络请求的返回值里，因此也将其存储在localStorage，一是为了避免刷新丢失，二是减少网络请求。

5.橱窗商品的选择，录用父子间消息传递。父传子：props；子传父：自定义事件参数。

父组件将已经选择的商品和全部商品传给子组件，橱窗商品弹窗默认勾选已经选中商品。这里有个坑，即无法将父组件传过来的商品对象直接勾选，而是需要在所有的商品过滤除已选商品，才能实现在此框中的勾选。因为父组件传过来的已选商品对象数组和全部商品对象数组的相对应商品无法直接找到，所以需要重新找。而且勾选的数据可能会发生改变，而父元素传来的数据不可变，因此需要再维护一份选中商品数组。

  mounted(){
    this.hasSelected.forEach(item=>{ //hasSelected:父传来的已选商品
      let goodsIndex=this.shopGoods.findIndex(it=>{ //hasSelected:父传来的全部商品
        return it.goodsId===item.goodsId
      })
      this.selectedGoods.push(this.shopGoods[goodsIndex]) //独立维护一份已选商品，因为props传来的数据不可更改
    })
    this.toggleSelection(this.selectedGoods) //触发勾选
  },

难点：

1.子组件中的遮罩层不能覆盖整个窗口

原因：子组件即使设置了position：fixed，也只能覆盖调用它的父组件，因为它是挂载在其上。原本是将遮罩层与其中的内容显示框分离，遮罩层在父组件上，父组件又被全局app调用，后因不符合组件拆分理念，故发现上述问题。

解决方法：在子组件中添加如下代码，将组件挂载到body身上

mounted() { 
    this.$nextTick(() => {
      const body = document.querySelector("body");
      if (body.append) {
        body.append(this.$el);
      } else {
        body.appendChild(this.$el);
      }
    });
  },

在vue3中可以使用 teleport，传送门

<teleport to='body'>
      <modal/>
</teleport>