So ermitteln Sie die Breite und Höhe nach dem Laden der vue3-Seite

Erhalten Sie die Breite und Höhe, nachdem die vue3-Seite geladen wurde.

Es kommt vor, dass das H5-Projekt diese Anforderung hat, nachdem die Seite geladen wurde.

<template>
<div class="wrap" :>
</div>
</template>
<script lang=&#39;ts&#39;>
import { defineComponent, reactive, nextTick, onMounted, toRefs } from "vue";
export default defineComponent({
  name: "Aboutus",
  setup() {
    let state = reactive({
      hHeight: 0,//页面高度
    });
  onMounted(() => {
    nextTick(()=>{
        state.hHeight = document.documentElement.clientHeight;
        console.log(document.documentElement.clientHeight)
    })
  })
  return {
      ...toRefs(state)
  }
  },
});
</script>

Wenn Sie die vue3.2-Version verwenden, können Sie zur Verarbeitung auch syntaktischen Zucker verwenden. Geben Sie direkt den Code ein:

<template>
  <div class="wrap" :>
   </div>
</template>
<script setup>
import { reactive, nextTick } from "vue"
const state = reactive({
    hHeight: 0
})
nextTick(()=>{
     state.hHeight = document.documentElement.clientHeight;
     console.log(document.documentElement.clientHeight)
 })
</script>

vue3 von vue3.2, um die Breite und Höhe des Dom-Elements zu erhalten

Wissenspunkte: ref, nextTike

ref kann verwendet werden, um DOM-Objekte abzurufen und einen reaktionsfähigen gemeinsamen Objekttyp zu erstellen
nextTick ist eine Funktion, die eine Funktion als Parameter akzeptiert. Die Definition der offiziellen Website von nextTick lautet um „den Rückruf auf das nächste DOM-Update zu verschieben“ Wird nach dem Zyklus ausgeführt,
nextTike wird nicht verwendet

<!--
 * new page
 * @author: Blaine
 * @since: 2022-06-30
 * page_nextTike.vue
-->
<template>
  <div class="container" >
    <ul ref="myRef">
      <li v-for="(item, index) in pepleList" :key="index">{{ item }}</li>
    </ul>
    <button @click="addHandle">增加</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from &#39;vue&#39;
let pepleList = reactive<string[]>([&#39;蜘蛛侠&#39;, &#39;钢铁侠&#39;, &#39;美国队长&#39;])
const myRef = ref<HTMLElement>();
onMounted(() => {
  console.log(&#39;列表的高度是：&#39;, myRef.value?.clientHeight)
})
const addHandle =  async() => {
  pepleList.push(&#39;闪电侠&#39;)
  // await nextTick()
  console.log(&#39;列表的高度是：&#39;, myRef.value?.clientHeight)
}
</script>

<style scoped>
</style>

**Hinweis: **Die Liste hier erhöht sich nicht sofort

Das Problem ist, dass wann Wenn wir den Wert der Liste ändern, aktualisiert Vue das DOM nicht sofort, sondern aktualisiert das DOM am Ende einer Ereignisschleife. Dadurch können unnötige Berechnungen und DOM-Operationen vermieden werden, was für die Verbesserung der Leistung sehr wichtig ist.

Dann müssen wir die Höhe von ul ermitteln, nachdem das Dom-Update abgeschlossen ist. Zu diesem Zeitpunkt müssen wir nextTick verwenden,

ref+nextTick

<!--
 * new page
 * @author: Blaine
 * @since: 2022-06-30
 * page_nextTike.vue
-->
<template>
  <div class="container" >
    <ul ref="myRef">
      <li v-for="(item, index) in pepleList" :key="index">{{ item }}</li>
    </ul>
    <button @click="addHandle">增加</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from &#39;vue&#39;
let pepleList = reactive<string[]>([&#39;蜘蛛侠&#39;, &#39;钢铁侠&#39;, &#39;美国队长&#39;])
const myRef = ref<HTMLElement>();
onMounted(() => {
  console.log(&#39;列表的高度是：&#39;, myRef.value?.clientHeight)
})
const addHandle =  async() => {
  pepleList.push(&#39;闪电侠&#39;)
  await nextTick()
  console.log(&#39;列表的高度是：&#39;, myRef.value?.clientHeight)
}
</script>

<style scoped>
</style>

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die Breite und Höhe nach dem Laden der vue3-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!