{nextT"/> {nextT">
首页 > web前端 > Vue.js > 正文

vue3页面加载完成后怎么获取宽度、高度

WBOY
发布: 2023-05-29 15:31:22
转载
2822 人浏览过

    vue3页面加载完成后获取宽度、高度

    刚好H5项目有用到这个需求,页面加载完成后获取当前页面高度。

    <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>
    登录后复制

    用vue3.2版本的也可以用语法糖来处理,直接上代码:

    <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页面加载完成后怎么获取宽度、高度

    vue3之vue3.2获取dom元素的宽高

    知识点:ref,nextTike

    • ref可以用于dom对象的获取,以及创建一个响应式的普通对象类型

    • nextTick是一个函数,它接受一个函数作为参数,nextTick官网定义是‘将回调推迟到下一个 DOM 更新周期之后执行’,

    未使用nextTike

    <!--
     * 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>
    登录后复制

    vue3页面加载完成后怎么获取宽度、高度

    **注意:**这里的list并没有立即增加

    问题在于我们改变list的值时,vue并不是立刻去更新dom,而是在一个事件循环最后再去更新dom,这样可以避免不必要的计算和dom操作,对提高性能非常重要。

    那么我们需要在dom更新完成后,再去获取ul的高度,这时候就需要用到nextTick了,

    使用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>
    登录后复制

    vue3页面加载完成后怎么获取宽度、高度

    以上是vue3页面加载完成后怎么获取宽度、高度的详细内容。更多信息请关注PHP中文网其他相关文章!

    相关标签:
    来源:yisu.com
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!