vue mixins（vue3 hooks）动态获取div高度

之前转载过一篇文章:
https://blog.csdn.net/qq_37167049/article/details/103084927
可以动态计算div 高度,但是比较繁琐的痛点是:

需要在每个需要计算高度的.vue中 都需要 copy一份,这样就很麻烦

那怎么样 能解决这个问题呢?

可以 参照vue 官网 使用 mixins来解决:
https://cn.vuejs.org/v2/guide/mixins.html

demo 如下:
新建 mixins 文件夹:
下 建立 getHeightPX.js 文件

const getHeightPX = {
  data() {
    return {
      contentStyleObj: {
        height: ""
      }
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    getHeight() {
      console.log('mixins 方法 触发了!!!!!!!!!!!!!!!!!!!!!!!!!!')
      this.contentStyleObj.height = window.innerHeight - 110 + "px";
    }
  }
};
export default getHeightPX;

在 .vue文件中:
// 功能补充 如下
如果 在一个页面同时 动态获取 2个 div 高度呢?
比如 1个 height:100px; 1个 height:200px;

import getHeightPX from "../../mixins/getHeightPX";
    <div :style="contentStyleObj" v-loading="tableLoading">
        1231231231231123123
    </div>
        <div class="extraction-bg" :style="`height:${contentStyleObj.extractionHeight}`">
          1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>
          1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>
          1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>
          1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br> 1<br>
        </div>
export default {
	mixins: [getHeightPX],
	data(){
		return{
		  contentStyleObj: {
        	height: "",
        	extractionHeight :""
      	},
      }
	},
	methods: {
		  getHeight() {
		  		console.log('--------------------------vue调用 mixins方法')
      			this.contentStyleObj.height = window.innerHeight - 300 + "px";
      			// 动态获取 第二个 div高度
      			this.contentStyleObj.extractionHeight = window.innerHeight - 114 + "px";
    	  },
	}
}

通过打印的log 可以看到:
如果 .vue 文件 复用 getHeight()方法 意味着 重写了 mixins 的方法,mixins的方法不会触发
如果 .vue 文件 不调用 getHeight()方法,就会默认调用mixins的方法.

vue3 获取 div 动态 高度 见：

https://blog.csdn.net/qq_37167049/article/details/124672147?spm=1001.2014.3001.5502