vue3获取、设置元素高度
媒介在web端常见的需求场景中，会经常遇到table表格需要根据页面可视区域使高度自适应的情况。 傻喵(作者本人)昨天在实利用用vue3实现这个需求时，看了几篇网上写的回答，都不太全面，以是干脆自己写个总结吧.(第一次写，轻喷QAQ)
正文
先一起来看看页面结构
https://img-blog.csdnimg.cn/img_convert/2f0a82f0d2057891afb5cceb98a63fb9.webp?x-oss-process=image/format,png
在vue2中，实现这个结果大多是在mounted生命周期中操作DOM元素，进行元素属性的获取和修改。 升级到vue3后，生命周期前都加了on，以是在onMounted这个生命周期中操作DOM。
1、起首获取页面可视区域、header组件，至于为什么在header组件外又套了一层div，是想实行另外一个东西，先卖个关子。
setup(props) {
console.log(props);
const hd = ref(null);
let allHeight = ref("");
const test = ref(null);
onMounted(() => {
//可视区域高度
allHeight.value = `${document.documentElement.clientHeight}`;
//header组件高度
let hdHeight = hd.value.$el.clientHeight;
});
return {
hd,
test,
clienHeight,
};
},
const hd = ref(null)定义的名字必须与HTML中<Header ref="hd" />这里的值相同(不相同会报错)
2、接下来就是给test组件高度赋值了，傻喵原来是想直接将值赋值的
test.value.clientHeight = headerHeight; 但是没有实现结果，具体原因不得而知(有知道原因的可以在评论区告诉傻喵).
以是只能用另一种方法，style动态绑定
<Test ref="test" :style="testStyle" />
let testStyle = reactive({ height: "0px", });
testStyle.height = testHeight + "px"; 这样终于实现了DOM元素的赋值
3、关于在header组件外多加的一层div，是因为傻喵在获取页面元素时，发现ref获取的组件和div、span等基础标签打印出的结构不同。
https://img-blog.csdnimg.cn/img_convert/c0c4b032dc02e1f344dd06c8e4ee0f0f.webp?x-oss-process=image/format,png
如上图，依次打印的分别为<div ref="top"></div>以及它内部的header组件，基础标签会直接.value打印出来，而header组件会打印出一个Proxy对象(傻喵推测应该是跟vue3的响应式有关,有待考究)。
这同时导致了获取两者元素属性方式的不同
div属性直接可以const top = ref(null);定义，并通过top.value.clientHeight来获取它的高度。
而header组件必须hd.value.$el.clientHeight才可以.
下面贴上完整代码
<template>
<div ref="top">
<Header ref="hd" />
</div>
<Test ref="test" :style="testStyle" />
</template>
<script>
import Header from "./components/Header.vue";
import Test from "./components/Test.vue";
import { onMounted, reactive, ref } from "vue";
export default {
name: "App",
components: {
Header,
Test,
},
setup(props) {
console.log(props);
const hd = ref(null);
const top = ref(null);
const test = ref(null);
let allHeight = ref("");
let testStyle = reactive({
height: "0px",
});
onMounted(() => {
allHeight.value = `${document.documentElement.clientHeight}`;
let hdHeight = hd.value.$el.clientHeight;
let testHeight = allHeight.value - hdHeight;
testStyle.height = testHeight + "px";
console.log(top)
console.log(hd)
console.log(top.value.clientHeight)
console.log(hd.value.$el.clientHeight)
});
return {
hd,
top,
test,
testStyle,
allHeight,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0px;
padding: 0px;
/* margin-top: 60px; */
}
</style>
结语
以上就是傻喵使用vue3来操作元素高度的总结，另有很多坑点需要去研究。 也接待各位大大在评论区留言，指点一下。
文章出处：vue3获取、设置元素高度 - 掘金 (juejin.cn)
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]