快捷導(dǎo)航

vue3獲取、設(shè)置元素高度的代碼舉例

更新時(shí)間：2024年08月20日 09:42:42 作者：一條傻喵

這篇文章主要給大家介紹了關(guān)于vue3獲取、設(shè)置元素高度的相關(guān)資料,小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單易懂,需要的朋友可以參考下

前言

在web端常見的需求場(chǎng)景中，會(huì)經(jīng)常遇到table表格需要根據(jù)頁面可視區(qū)域使高度自適應(yīng)的情況。傻喵(作者本人)昨天在嘗試使用vue3實(shí)現(xiàn)這個(gè)需求時(shí)，看了幾篇網(wǎng)上寫的回答，都不太全面，所以干脆自己寫個(gè)總結(jié)吧.(第一次寫，輕噴QAQ)

正文

先一起來看看頁面結(jié)構(gòu)

在vue2中，實(shí)現(xiàn)這個(gè)效果大多是在mounted生命周期中操作DOM元素，進(jìn)行元素屬性的獲取和修改。升級(jí)到vue3后，生命周期前都加了on，所以在onMounted這個(gè)生命周期中操作DOM。

代碼示例

1、首先獲取頁面可視區(qū)域、header組件，至于為什么在header組件外又套了一層div，是想實(shí)驗(yàn)另外一個(gè)東西，先賣個(gè)關(guān)子。

setup(props) {
    console.log(props);
    const hd = ref(null);
    let allHeight = ref("");
    const test = ref(null);
    onMounted(() => {
      //可視區(qū)域高度
      allHeight.value = `${document.documentElement.clientHeight}`;
      //header組件高度
      let hdHeight = hd.value.$el.clientHeight;
    });
    return {
      hd,
      test,
      clienHeight,
    };
  },

const hd = ref(null)定義的名字必須與HTML中<Header ref="hd" />這里的值相同(不相同會(huì)報(bào)錯(cuò))

2、接下來就是給test組件高度賦值了，傻喵本來是想直接將值賦值的 test.value.clientHeight = headerHeight;但是沒有實(shí)現(xiàn)效果，具體原因不得而知(有知道原因的可以在評(píng)論區(qū)告訴傻喵).

所以只能用另一種方法，style動(dòng)態(tài)綁定
<Test ref="test" :style="testStyle" />let testStyle = reactive({ height: "0px", });testStyle.height = testHeight + "px";這樣終于實(shí)現(xiàn)了DOM元素的賦值

3、關(guān)于在header組件外多加的一層div，是因?yàn)樯颠髟讷@取頁面元素時(shí)，發(fā)現(xiàn)ref獲取的組件和div、span等基礎(chǔ)標(biāo)簽打印出的結(jié)構(gòu)不同。

如上圖，依次打印的分別為<div ref="top"></div>以及它內(nèi)部的header組件，基礎(chǔ)標(biāo)簽會(huì)直接.value打印出來，而header組件會(huì)打印出一個(gè)Proxy對(duì)象(傻喵猜測(cè)應(yīng)該是跟vue3的響應(yīng)式有關(guān),有待考究)。

這同時(shí)導(dǎo)致了獲取兩者元素屬性方式的不同

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>