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();
}

最后实现效果如下图:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐