Comment obtenir la largeur et la hauteur après le chargement de la page vue3

Obtenez la largeur et la hauteur après le chargement de la page vue3

Il arrive que le projet H5 ait cette exigence Une fois la page chargée, obtenez la hauteur actuelle de la page.

<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>

Si vous utilisez la version vue3.2, vous pouvez également utiliser du sucre syntaxique pour le traiter. Entrez directement le code :

<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 de vue3.2 pour obtenir la largeur et la hauteur de l'élément dom

. Points de connaissance : ref, nextTike

• ref peut être utilisé pour obtenir des objets DOM et créer un type d'objet commun réactif

• nextTick est une fonction qui accepte une fonction comme paramètre. La définition du site officiel de nextTick est. pour "différer le rappel à la prochaine mise à jour du DOM" Exécuté après le cycle,

nextTike n'est pas utilisé

<!--
 * 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>

**Remarque : **La liste ici n'augmente pas immédiatement

Le problème est que lorsque nous modifions la valeur de la liste, vue ne met pas immédiatement à jour le dom , mais met à jour le DOM à la fin d'une boucle d'événement. Cela peut éviter des calculs et des opérations DOM inutiles, ce qui est très important pour améliorer les performances.

Ensuite, nous devons obtenir la hauteur de ul une fois la mise à jour de dom terminée. À ce stade, nous devons utiliser nextTick,

utilisez 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>

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!