使用element-resize-detector插件把固定宽高页面改造成自适应宽高的页面

问题描述

开发的可视化页面部署到现场时由于客户的屏幕宽高有多种，我们必须要求页面开发自适应各种屏幕的宽高规格，不能限制死总体的宽高；

但是开发时由于前期需求沟通，客户说只会在一种宽高的屏幕上使用，有同事可能会按照设计图限制死总体的宽高开发。到后期开发到现场部署时客户又改变需求要做到另一种宽高的屏幕上也可以使用；

此时部署到不对应的屏幕时只能显示部分或者屏幕留有空白；

遇到类似问题，不耽误总体开发进度的情况下，如何快速的在一两个小时内或者更短的时间内把页面改造成自适应各种宽高的布局方式就很有必要；

解决方案1

1、首先安装一个可以监听元素尺寸变化的库 element-resize-detector

npm install element-resize-detector

2、根据这个库写一个 vue指令

/*
 * @Author: **
 * @Date: 2021-05-09 14:10:42
 * @Description: 12
 * @Version: 2.0
 * @LastEditors: **
 * @LastEditTime: 2021-10-19 14:14:49
 */
import elementResizeDector from 'element-resize-detector'
const resizeDector = elementResizeDector()

export default {
  // 绑定监听器，监听元素的宽高
  bind (el, binding) {
    el._handleResize = function (el) {
      binding.value({
        el: el,
        width: el.offsetWidth,
        height: el.offsetHeight
      })
    }
    resizeDector.listenTo(el, el._handleResize)
  },
  // 解绑
  unbind (el) {
    resizeDector.removeListener(el, el._handleResize)
  }
}
export {
  resizeDector
}

3、把指令引入到需要改造的可视化页面的主页面

import resize from '@/utils/resize'

directives: {
 resize
},

4、需改造的页面最外层标签样式之前是类似这样的

标签：

<div class="pageFull">
  <h-page-container>
  ...
  </h-page-container>
</div>

样式：

<style lang="scss" scoped>
// 全局样式
.pageFull {
  perspective: 400px;
  width: 3680px;
  height: 1620px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

5、现在需要再外层增加一个标签，并写上指令和样式、方法

标签：

<div v-resize="handleResize" class="outerFull">
  <div class="pageFull" :style="{ transform: tran }">
    <h-page-container>
    ...
    </h-page-container>
  </div>
</div>

样式：

<style lang="scss" scoped>
// 包裹层样式
.outerFull {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
// 全局样式
.pageFull {
  perspective: 400px;
  width: 3680px;
  height: 1620px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

方法：

  data () {
    return {
      tran: '' // 缩放比例
    }
  },
  methods: {
   /**
     * @Author: **
     * @Description: 缩放监听
     * @Version: 1.0
     * @Param {type}: null
     * @return {*}
     * @Date: 2021-06-01 17:13:37
     */
    handleResize ({ width, height }) {
      this.tran = `scale(${width / 3680},${height / 1620})`
    }
  }

6、这样就改好了，下面是几点总结

此例子中的宽3680，高1620只适用于此项目，根据各自的项目最初定义的宽高设置
底层原理是监听元素的宽高变化，等量缩放整个页面