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