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

参宿7

已于 2023-07-28 18:36:19 修改

阅读量247

点赞数

分类专栏： bug 前端开发文章标签：前端 javascript html

于 2023-07-25 19:23:38 首次发布

本文链接：https://blog.csdn.net/qq_28838891/article/details/131920738

版权

开发同时被 3 个专栏收录

57 篇文章 0 订阅

订阅专栏

前端

53 篇文章 14 订阅

订阅专栏

bug

12 篇文章 0 订阅

订阅专栏

文章讨论了在Vue应用中，由于使用absolute、float、fixed或sticky等属性导致元素脱离文档流而产生的问题，如布局错乱、元素遮挡和父元素高度塌陷。提出了手动点击、延迟创建和使用v-show替代v-if等解决方案，并建议使用flex布局来避免此类问题。

摘要由CSDN通过智能技术生成

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

解决方案

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布局

布局错乱：脱离文档流的元素不再占据常规文档流中的位置，可能会导致其他元素布局错乱，重叠或不按预期显示。
遮挡内容：脱离文档流的元素可能会覆盖其他元素，使一些内容无法被访问或操作，尤其是在使用position: absolute时。
父元素高度塌陷：当子元素脱离文档流后，其父元素可能会因为子元素不再占据空间而导致高度塌陷，进而影响整个页面布局。
不稳定定位：使用position: fixed或position: sticky时，元素的定位可能会受到视口滚动、父元素定位等因素的影响，造成元素位置不稳定或不如预期。
响应性问题：脱离文档流的元素可能在不同设备或屏幕尺寸上表现不一致，导致响应性问题。