博客

1、背景

在窗口大小没改变的时候，有些dom元素的大小发生了变化，导致页面某些元素没有重新渲染，出现不适应的情况。如下图所示：

2、处理方案

（1）方案一、vue项目中，我们可以使用

element-resize-detector

插件来实现，简单粗暴。实现方案如下：

1、安装相关插件，npm install element-resize-detector

2、在main.js中引入依赖，并挂在vue原型链上：


import ElementResizeDetectorMaker from "element-resize-detector"



Vue.prototype.$erd = ElementResizeDetectorMaker()


3、在界面中使用_this.$erd.listenTo()去做监听，示例代码如下：

 mounted() {
      let _this = this
      _this.$erd.listenTo(_this.$refs.container, element => {
        _this.$nextTick(() => {
          _this.$refs.messageInfoTableRef.resizeTo(element.clientWidth)
          _this.$refs.transcodingTableRef.resizeTo(element.clientWidth)
        })
      })
    },
    beforeDestroy() {
      let _this = this
      // 离开页面删除检测器和所有侦听器
      _this.$erd.uninstall(_this.$refs.container) // 这里用ref是因为vue离开页面后获取不到dom
    }

（2）方案二、最开始我也是用方案一去实现的，但是因为项目中用到了handsonTable,使用方案一，导致表格的复选框无法勾选，排查发现可能是resizeTo（）影响到了，所以才有了方案二，通过

ResizeObserver

来实现的监听方案。

ResizeObserver接口参考

，实现代码如下：

//import ResizeObserver from "resize-observer-polyfill";

data() {
	   return {
	     resizeObserver: null,
	   }
 },
 
mounted() {
	 let _this = this
	  _this.resizeObserver = new ResizeObserver(entries => {
	      _this.$nextTick(() => {
	      _this.$refs.messageInfoTableRef.resizeTo(entries[0].target.clientWidth)
	      _this.$refs.transcodingTableRef.resizeTo(entries[0].target.clientWidth)
	    })
	  });
	  _this.resizeObserver.observe(document.getElementById("container"));
},
beforeDestroy() {
	  let _this = this
	  // 离开页面删除检测器和所有侦听器
	  _this.resizeObserver.disconnect();
}

最后实现效果如下图：