直接上代码
app.vue
import { zoomPlugin } from '@/utils/zoomPlugin'
let zoom = 1 - (1920 - window.innerWidth) / 1920
const oldZoom = {
value: 1,
}
mounted() {
// 监听页面的窗口的变化,每次窗口变化调用等比例缩放方法
window.addEventListener('resize', this.handleResize)
this.autoSelf()
},
methods:{
handleResize() {
this.autoSelf()
},
autoSelf() {
let screenWidth = window.innerWidth
if (screenWidth < 1024) {
screenWidth = 1024
} else if (screenWidth > 1920) {
screenWidth = 1920
}
zoom = 1 - (1920 - screenWidth) / 1920
zoomPlugin(zoom, oldZoom.value)
oldZoom.value = zoom
console.log(screenWidth)
document.body.style.zoom = (1 - (1920 - screenWidth) / 1920) * 100 + '%'
},
}
新建 zoomPlugin.js
//针对于 不同的谷歌浏览器版本做处理
const isChromeHighVersion = () => {
const ua = navigator.userAgent.toLowerCase()
const chromeIndex = ua.indexOf('chrome')
if (chromeIndex > -1) {
const version = ua.substring(chromeIndex + 7)
const majorVersion = parseInt(version.split('.')[0], 10)
return majorVersion > 127
}
return false
}
export function zoomPlugin(newZoom, currentZoom) {
const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect
if (!isChromeHighVersion()) {
return
}
// 计算累积缩放比例
const cumulativeZoom = currentZoom / newZoom
Element.prototype.getBoundingClientRect = function () {
const rect = originalGetBoundingClientRect.call(this)
const newRect = new DOMRect(
rect.x * cumulativeZoom,
rect.y * cumulativeZoom,
rect.width * cumulativeZoom,
rect.height * cumulativeZoom
)
return newRect
}
}
对于其他特殊的组件,其他的问题(持续更新)
//可以尝试使用
:getCalendarContainer="(node) => node.parentNode"
:getPopupContainer="(node) => node.parentNode"