vue3页面加载完成后如何获取宽度、高度
目录
- vue3页面加载完成后获取宽度、高度
- vue3之vue3.2获取dom元素的宽高
- 未使用nextTike
- 使用ref+nextTick
- 总结
vue3页面加载完成后获取宽度、高度
刚好H5项目有用到这个需求，页面加载完成后获取当前页面高度，记录一下。^_^
<template>
<div class="wrap" :style="{height:hHeight+'px'}">
</div>
</template>
<script lang='ts'>
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" :style="{height:state.hHeight+'px'}">
</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.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 'vue'
let pepleList = reactive<string[]>(['蜘蛛侠', '钢铁侠', '美国队长'])
const myRef = ref<HTMLElement>();
onMounted(() => {
console.log('列表的高度是：', myRef.value?.clientHeight)
})
const addHandle = async() => {
pepleList.push('闪电侠')
// await nextTick()
console.log('列表的高度是：', myRef.value?.clientHeight)
}
</script>
<style scoped>
</style>
**注意：**这里的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 'vue'
let pepleList = reactive<string[]>(['蜘蛛侠', '钢铁侠', '美国队长'])
const myRef = ref<HTMLElement>();
onMounted(() => {
console.log('列表的高度是：', myRef.value?.clientHeight)
})
const addHandle = async() => {
pepleList.push('闪电侠')
await nextTick()
console.log('列表的高度是：', myRef.value?.clientHeight)
}
</script>
<style scoped>
</style>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
解决vue项目获取dom元素宽高总是不准确问题
dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(
-
VUE中操作dom元素的几种方法(最新推荐)
目录 VUE中操作dom元素 方法一: 方法二: vue操作dom元素的三种方法介绍和分析 以下是常用的三种方法: 1.jQuery操作dom(推荐指数:★☆☆☆☆): 2.原生js操作dom(推荐指数:★★★★☆): 3.vue官方方法:ref(推荐指数:★★★★★): VUE中操作dom元素 方法一: 访问子组件实例或子元素尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件.为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋
-
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script>
-
如何在Vue中获取DOM元素的实际宽高
目录 前言 一.获取元素 二.获取元素宽高 补充:vue项目获取dom元素宽高总是不准确 总结 前言 最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素. 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中. <template> <div class="box
-
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况. 解决思路: 1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签. 2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数. 方法1案例:tab页里的子页面如果没有内容就隐藏 父页面代码 <e
-
页面加载完毕后滚动条自动滚动一定位置
昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置. 一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~ 今天抽空一查,才发现: 使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效: 想要页面加载完毕时自动滚动一定距离,则使用jquery的animate,如下面例子: $("html,body").animate({"scrollLeft
-
在页面加载完成后通过jquery给多个span赋值
由于我想在页面加载完成后,有几个地方显示当前时间,所以我需要给多个span赋值. span代码的写法如下: 复制代码 代码如下: <span name="currentDate"></span> (多个span) jQuery写法: 复制代码 代码如下: <script> $(document).ready(function() { var currentDate = new Date().toLocaleDateString(); $("
-
Vue页面加载完成后如何自动加载自定义函数
目录 页面加载完成后自动加载自定义函数 created mounted vue之自执行函数 页面加载完成后自动加载自定义函数 created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. methods: { indexs:function(){ this.$http.post('{:url("Index/fun")}') .then(function(res){
-
jquery实现在页面加载完毕后获取图片高度或宽度
日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片的高度,以此来调整图片上面的覆盖层相对于图片顶端的位置. 但在jquery(function(){ /*XXXXXX*/});里面写了之后发现不是很理想,因为当jquery准备就绪的时候,此时图片绝大部分情况下都没加载完毕,这可急坏了本屌丝~~~T~T 本屌丝就想啊,要是jquery有个跟js的onload()的方法多好啊,擦~真是天上掉下个大狗屎,恰巧砸到本屌丝~~在网上搜了下,还真有这么个方法,写法如下:
-
如何让页面加载完成后执行js
javascript 当页面dom模型加载完成后才执行javascript不能使用<body onload="">加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/x
-
页面加载完后自动执行一个方法的js代码
1.在body中用onload: <body onload="myfunction()"> 2.在脚本中用window.onload: <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号 </scr
-
页面加载完成后再执行JS的jquery写法以及区别说明
1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add
-
两种方法实现在HTML页面加载完毕后运行某个js
js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery文件. 复制代码 代码如下: <script type="text/javascript"> $(documen
-
多种方法实现当jsp页面完全加载完成后执行一个js函数
方法1:如下程序,当页面完全加载后执行openTheIndexPage()方法 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Telecommunications Data Collection System</title> <script t