使用 elementResizeDetectorMaker 插件实现页面自适应

1. 安装 elementResizeDetectorMaker
2. 引用 js 代码:

import elementResizeDetectorMaker from 'element-resize-detector'

mounted() {
    elementResizeDetectorMaker().listenTo(document.getElementById('pages'), (element) => {
        this.resize_window(element.clientWidth)
    })
},
methods: {
    resize_window (width) {
      const scalseNum = Number((width) / 1920)
      this.scalseNum = scalseNum
      this.pagesHeight = 1080 * scalseNum
    }
}

3. html代码

<template>
  <el-scrollbar id="pages">
        <div :style="{'height': `${pagesHeight}px`}">
            <div class="databoard"
              :style="{
                'transformOrigin':'left top',
                'transform':`scale(${scalseNum})`,
                '-webkit-transform':`scale(${scalseNum})`,
                '-moz-transform':`scale(${scalseNum})`,
                '-o-transform':`scale(${scalseNum})`,
                '-ms-transform':`scale(${scalseNum})`
              }">
      </div>
  </el-scrollbar>
</template>

备注：pagesHeight 默认为为固定值1080