记录一次前端弹窗随窗口缩放位置跑偏问题处理

最新推荐文章于 2023-09-28 13:49:01 发布

拉风的蜗牛

最新推荐文章于 2023-09-28 13:49:01 发布

阅读量767

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_41615095/article/details/127899176

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

废话不多说先贴代码

    <el-popover popper-class="my-popper" :visible-arrow="false" placement="bottom" width="240" v-model="userCardPopover" trigger="hover">
          <div class="userCard">
            <div class="border1">
              <div class="border2">
                <el-avatar :size="60" class="avatar-text">{{ nickName.substr(0, 1) || '?' }}</el-avatar>
              </div>
            </div>
            <div class="nick-name">{{ nickName }}</div>
            <div class="user-tel">{{ phone }}</div>
            <div class="party-info" v-if=" platformPartyName!=null && platformPartyName!=''">{{ platformPartyName.length>15?platformPartyName.substring(0,14):platformPartyName}}</div>
            <div class="party-info" v-if=" platformUnitName!=null&& platformUnitName!=''">{{ platformUnitName.length>15?platformUnitName.substring(0,14): platformUnitName}}</div>
          </div>
          <div slot="reference" class="right-menu-item">
            <el-avatar class="avatar-text">{{ nickName.substr(0, 1) || '?' }}</el-avatar>
          </div>
        </el-popover>

在给popper组件设置额外的class，需要使用popper-class

.my-popper {
  padding-bottom: 0 !important;
  position: fixed !important;
  top: 70px !important;
  left: inherit !important;
  right: 5px !important;
}

在这里插入图片描述

开始时设置定位position 为fixed和absoute 然后设置left 发现当窗口非最大化后导致弹窗会超过右侧窗口被遮挡，后设置right,发现并不生效，后通过控制台发现有默认的left 设置，left 优先级要高于right ，所以要先取消掉left在去设置right,当需要固定位置时首要设置定位，在设置其他样式，如不生效控制台查看是否默认样式生效