针对于antd-vue,antd版本v1.7版本,适配zoom

直接上代码
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"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。