点击A后销毁A，在同位置创建B，B按钮会处于hover状态

目录

原因：脱离文档流后，同一个位置在创建/销毁的一瞬处于激活状态

解决方案

A.手动点击

B.延迟创建

C.用display:non（v-show）代替销毁（v-if）

教训：absolute、float、fixed、sticky会脱离文档流，容易引发问题，建议用flex布局

.btns-wrap {
  width: calc(100% - 40px);
  height: 64px;
  background-color: #fff;
  // border-top: 1px solid #E4E7ED;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
}

  <div class="btns-wrap">
          <mds-button v-show="subTitle === '文件上传'" type="primary" @click="toNext" :disabled="!uploaded">下一步</mds-button>
          <mds-button v-show="subTitle === '成功数据'" type="primary" @click="toConfirm"
            :disabled="!uploadExel.succList.length">确定</mds-button>
          <mds-button @click="toCancle">取消</mds-button>
        </div>

原因：脱离文档流后，同一个位置在创建/销毁的一瞬处于激活状态

解决方案

A.手动点击

B.延迟创建

C.用display:non（v-show）代替销毁（v-if）

 <div class="btns-wrap">
          <mds-button v-show="subTitle === '文件上传'" type="primary" @click="toNext" :disabled="!uploaded">下一步</mds-button>
          <mds-button v-show="subTitle === '成功数据'" type="primary" @click="toConfirm"
            :disabled="!uploadExel.succList.length">确定</mds-button>
          <mds-button @click="toCancle">取消</mds-button>
        </div>

教训：absolute、float、fixed、sticky会脱离文档流，容易引发问题，建议用flex布局

1. 布局错乱：脱离文档流的元素不再占据常规文档流中的位置，可能会导致其他元素布局错乱，重叠或不按预期显示。

2. 遮挡内容：脱离文档流的元素可能会覆盖其他元素，使一些内容无法被访问或操作，尤其是在使用position: absolute时。

3. 父元素高度塌陷：当子元素脱离文档流后，其父元素可能会因为子元素不再占据空间而导致高度塌陷，进而影响整个页面布局。

4. 不稳定定位：使用position: fixed或position: sticky时，元素的定位可能会受到视口滚动、父元素定位等因素的影响，造成元素位置不稳定或不如预期。

5. 响应性问题：脱离文档流的元素可能在不同设备或屏幕尺寸上表现不一致，导致响应性问题。