废话不多说先贴代码
<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 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 slot="reference" class="right-menu-item">
<el-avatar class="avatar-text">{{ nickName.substr(0, 1) || '?' }}</el-avatar>
</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,当需要固定位置时首要设置定位,在设置其他样式,如不生效控制台查看是否默认样式生效
3.在el-dialog弹窗里放一个图标,点击缩放图标进行放大缩小的切换。用el-dialog属性fullscreen实现弹窗的放大缩小。2.el-dialog标签上加上fullscreen属性。1.模板部分(template)2.js部分(script)
今天使用了element-ui的弹出消息框alert、confirm。本来用的好好的,突然注意到一个细节,消息框弹出时,界面整体变窄了一点点,消息框结束后,页面又恢复原状,从开发者工具中的Elements中看到body多了一个style:padding-right:17px;
到另一个页面查看,body并没有多一个style。
经过一步一步摸索,发现是body高度比window高度大,导致右边...
/ 获取下载的缩放 125% -> 1.25 150% -> 1.5。由于前端在开发时使用的都是标准ui设计图,基本都是按照所以1920*1080, 而小屏幕笔记本由于分辨率高,所以导致的显示元素变小,因此很多笔记本的默认显示都是放大125%或者150%。window.screen.availHeight > 1000 说明缩放选择的是100%,否则是125%、150%.// 修改页面的缩放比例。我去搜了一下,基本都是根据 window.screen.availHeight 来获取屏幕缩放比例,