vue3获取、设置元素高度

媒介

在web端常见的需求场景中，会经常遇到table表格需要根据页面可视区域使高度自适应的情况。 傻喵(作者本人)昨天在实利用用vue3实现这个需求时，看了几篇网上写的回答，都不太全面，以是干脆自己写个总结吧.(第一次写，轻喷QAQ)
正文

先一起来看看页面结构

在vue2中，实现这个结果大多是在mounted生命周期中操作DOM元素，进行元素属性的获取和修改。 升级到vue3后，生命周期前都加了on，以是在onMounted这个生命周期中操作DOM。
1、起首获取页面可视区域、header组件，至于为什么在header组件外又套了一层div，是想实行另外一个东西，先卖个关子。

1. setup(props) {
2.     console.log(props);
3.     const hd = ref(null);
4.     let allHeight = ref("");
5.     const test = ref(null);
6.     onMounted(() => {
7.       //可视区域高度
8.       allHeight.value = `${document.documentElement.clientHeight}`;
9.       //header组件高度
10.       let hdHeight = hd.value.$el.clientHeight;
11.     });
12.     return {
13.       hd,
14.       test,
15.       clienHeight,
16.     };
17.   },

复制代码

const hd = ref(null)定义的名字必须与HTML中<Header ref="hd" />这里的值相同(不相同会报错)
2、接下来就是给test组件高度赋值了，傻喵原来是想直接将值赋值的

1. test.value.clientHeight = headerHeight;

复制代码

但是没有实现结果，具体原因不得而知(有知道原因的可以在评论区告诉傻喵).
以是只能用另一种方法，style动态绑定

1. <Test ref="test" :style="testStyle" />
2. let testStyle = reactive({ height: "0px", });
3. testStyle.height = testHeight + "px";

复制代码

这样终于实现了DOM元素的赋值
3、关于在header组件外多加的一层div，是因为傻喵在获取页面元素时，发现ref获取的组件和div、span等基础标签打印出的结构不同。

如上图，依次打印的分别为<div ref="top"></div>以及它内部的header组件，基础标签会直接.value打印出来，而header组件会打印出一个Proxy对象(傻喵推测应该是跟vue3的响应式有关,有待考究)。
这同时导致了获取两者元素属性方式的不同
div属性直接可以const top = ref(null);定义，并通过top.value.clientHeight来获取它的高度。
而header组件必须hd.value.$el.clientHeight才可以.
下面贴上完整代码

1. <template>
2.   <div ref="top">
3.     <Header ref="hd" />
4.   </div>
5.   <Test ref="test" :style="testStyle" />
6. </template>
8. <script>
9. import Header from "./components/Header.vue";
10. import Test from "./components/Test.vue";
11. import { onMounted, reactive, ref } from "vue";
12. export default {
13.   name: "App",
14.   components: {
15.     Header,
16.     Test,
17.   },
18.   setup(props) {
19.     console.log(props);
20.     const hd = ref(null);
21.     const top = ref(null);
22.     const test = ref(null);
23.     let allHeight = ref("");
24.     let testStyle = reactive({
25.       height: "0px",
26.     });
27.     onMounted(() => {
28.       allHeight.value = `${document.documentElement.clientHeight}`;
29.       let hdHeight = hd.value.$el.clientHeight;
30.       let testHeight = allHeight.value - hdHeight;
31.       testStyle.height = testHeight + "px";
32.       console.log(top)
33.       console.log(hd)
34.       console.log(top.value.clientHeight)
35.       console.log(hd.value.$el.clientHeight)
36.     });
37.     return {
38.       hd,
39.       top,
40.       test,
41.       testStyle,
42.       allHeight,
43.     };
44.   },
45. };
46. </script>
48. <style>
49. #app {
50.   font-family: Avenir, Helvetica, Arial, sans-serif;
51.   -webkit-font-smoothing: antialiased;
52.   -moz-osx-font-smoothing: grayscale;
53.   text-align: center;
54.   color: #2c3e50;
55.   margin: 0px;
56.   padding: 0px;
57.   /* margin-top: 60px; */
58. }
59. </style>

复制代码

结语

以上就是傻喵使用vue3来操作元素高度的总结，另有很多坑点需要去研究。 也接待各位大大在评论区留言，指点一下。
文章出处：vue3获取、设置元素高度 - 掘金 (juejin.cn)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。