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