Live broadcast management project

1. Live broadcast cover changes ,input type= file A way to make a decision with an immutable style ： Set it to the same size as the custom button 、 transparent ,z-index On top of the custom button

2. Replication of links between live broadcasts

<p class="live-link">
      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" : Content to be copied 
v-clipboard:success="onCopy" ： Copy successful callback 
v-clipboard:error="onError" ： Callback for copy failure 
 -->

3. Text count , independent div block , The absolute positioning is placed in input in . The counting method of characters is to count one character in Chinese , Two English words count as one word .

let s=" chinese zh english eng"
let reg=/[\u4e00-\u9fa5]/g  // Match the full text in Chinese 
let zhLen=s.match(reg).length  //4

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

4. The display of streaming address and the default check-in agreement of non first live broadcast

With the help of localStorage For storage . Check default long-term storage in the agreement .

The streaming address is not displayed init The return value of the network request , So also store it in localStorage, One is to avoid losing refresh , The second is to reduce network requests .

5. Selection of window goods , Employ message transmission between father and son . Father's son ：props; Son father ： Custom event parameters .

The parent component passes the selected commodities and all commodities to the child component , In the window item pop-up window, the selected item is checked by default . There's a pit here , That is, the commodity object transferred from the parent component cannot be directly checked , Instead, you need to filter all the selected products , To check this box . Because the corresponding commodities of the selected commodity object array and all commodity object arrays passed by the parent component cannot be found directly , So we need to look again . And the checked data may change , The data from the parent element is immutable , Therefore, it is necessary to maintain an array of selected products .

  mounted(){
    this.hasSelected.forEach(item=>{ //hasSelected: The selected goods from my father 
      let goodsIndex=this.shopGoods.findIndex(it=>{ //hasSelected: All the goods from my father 
        return it.goodsId===item.goodsId
      })
      this.selectedGoods.push(this.shopGoods[goodsIndex]) // Maintain a selected product independently , because props The data transmitted cannot be changed 
    })
    this.toggleSelection(this.selectedGoods) // Trigger tick 
  },

difficulty ：

1. The mask layer in the subcomponent cannot cover the entire window

reason ： Even if the sub component is set position：fixed, It can only override the parent component that calls it , Because it is attached to it . Originally, the mask layer was separated from the content display box , The mask layer is on the parent component , The parent component is global app call , The latter does not conform to the concept of component disassembly , Therefore, the above problems are found .

resolvent ： Add the following code to the sub component , Mount the component to body On the body

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

stay vue3 Can be used in teleport, Portal

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