补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决

项目场景：

vue3中rrweb-player组件实现网页录屏功能

问题描述

提示：这里描述项目中遇到的问题：

录制的视频会重复记录录制中这个按钮的状态，每打开一次开始录制视频中就会多一个按钮，bug效果如下

<el-row class="mb-4" @click="onFinishRecord()" v-if="type == '1'">
      <span v-if="str!=''">{
    
    {
    
    this.str}}</span>
      <div> <img src="./assets/recordAfter.png"></div>
      <div>录制中</div>
    </el-row>

---

原因分析：

一开始以为是录屏插件api里的设置问题，找遍了里面所有的api方法都太不行，最后在代码上找解决办法，因为想到v-if在false的时候是没有这个元素的，会不会是这个导致了录屏插件会记录这种凭空出来的元素，最后改成v-show的话问题解决。

解决方案：

<el-row class="mb-4" @click="onFinishRecord()" v-show="type == '1'">
      <span v-show="str!=''">{
    
    {
    
    this.str}}</span>
      <div> <img src="./assets/recordAfter.png"></div>
      <div>录制中</div>
    </el-row>

搞了两天的问题没想到最后简单的解决了，还是摸索过程中思路需要多多拓展