使用autofit.js做PC端页面自适应及elementui下拉框等弹框在缩放后位置偏移问题解决

autofit.js实现页面自适应的原理就是使用transform:scale()样式

1、安装插件autofit.js

npm i autofit.js

2、全局使用autofit（部分页面缩放可以通过判断路由配置autofit.init）

//app.vue
import autofit from 'autofit.js'
//mounted添加缩放监听
mounted:{
  window.addEventListener('resize',()=>{
    //立即执行无法获取最新的缩放比例，所以做个延迟
    setTimeout(()=>{
      this.scaleDeal()
    },100)
  })
},
destoryed(){
  window.removeEventListener('resize',()=>{
    this.scaleDeal()
  })
  autofit.off()
}
//监听$route 直接在mounted里写刷新的时候缩放会失效,el一定选择#app，否则下拉框等浮框的位置会偏移的很夸张
watch:{
  $route:{
    handler{
      autofit.init({
        dh:1920,
        dw:1080,
        el:'#app',
        resize:true
      })
      this.scaleDeal()
    }
  }
}

methods:{
//处理body内下拉框、日期选择器等组件的缩放及缩放后位置偏移问题，类名带[x-placement^=top]、[x-placement^=bottom]后缀的，为了处理下拉框在上/下方时缩放的基点位置（如有其他在body内的dom缩放，可自行添加类名）
 scaleDeal(){
    const appScale=document.getElementById('app').style.transform
    const styleEl = document.createElement('style')
    styleEl= 	`
    	.el-popover,.el-menu--vertical,.el-cascader_dropdown,.el-select-dropdown,.el-tooltip_popper,.el-message-box,.el-loading-spinner,.el-picker-panel{transform:${appScale}}
    	.el-message{transform:${appScale} translateX(-50%)}
    	.el-message-box_wrapper{background-color:rgba(0,0,0,.5)}
    	.el-menu--vertical{transform-origin:left top !important}
    	.poper_arrow{display:none !important}
    	.el-select-dropdown[x-placement^=bottom],.el-cascader_dropdown[x-placement^=bottom],.el-popover[x-placement^=bottom],..el-picker-panel[x-placement^=bottom]{transform-origin:left top !important}
    	.el-select-dropdown[x-placement^=top],.el-cascader_dropdown[x-placement^=top],.el-popover[x-placement^=top],.el-picker-panel[x-placement^=top]{transform-origin:left top !important}
    `
    document.head.appendChild(styleEl)
  }
}

3、main.js全局配置

import {Dialog,MessageBox} from 'element-ui'

//解决dialog遮罩层遮挡弹框内容问题（dialog的append-to-body属性不可以设置为true，否则将会不缩放且存在遮罩层遮盖弹框内容问题）
Dialog.props.modalAppendToBody.default = false
//解决dialog及messageBox的$confirm方法同时使用的情况下confirm遮罩层遮挡dialog内容的问题，messagebox的遮罩层通过设置el-message-box_wrapper的背景色解决
MessageBox.setDefaults({
  modal:false
})