废话不多说先贴代码

    <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,当需要固定位置时首要设置定位,在设置其他样式,如不生效控制台查看是否默认样式生效

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐