添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

废话不多说先贴代码

    <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 来获取屏幕缩放比例,