2024-05-06 vue获取页面元素高度（注意view标签无法获取到高度，请用div）

时间：2024-05-06 22:23:38浏览次数：17

要获取元素高度要满足以下条件： 1、组件或页面已加载完毕； 2、使用ref绑定的是标准的dom 先贴获取方法：用ref绑定元素title，然后在mounted使用this.$refs.title.offsetHeight获取。为什么要满足条件1？因为页面没渲染完成是无法获取到元素的。为什么要满足条件2？如果你是使用的是view标签，你会发现打印this.$refs.title.offsetHeight是undefined，而使用标签div则没事，这是为什么？ <view class="title" ref='title'>分类</view> <div class="title" ref='title'>分类</div> 因为view是作为自定义组件或者特殊标签存在的，它不能直接映射到原生dom里去，当你使用$refs时，无法通过view拿到dom里面的一些方法。 so，这种情况下请用div。

标签：vue,标签,refs,高度,获取,div,页面,view
From： https://www.cnblogs.com/iuniko/p/18176055

vue3.4中KeepAlive的一个bug
KeepAlive可以缓存组件，在不使用include时没有任何问题，可以正常缓存。但是一旦使用了include，如果动态组件中没有导入ref函数，缓存功能就消失了比如editcom.vue<template><input></template><scriptsetup>import{ref}from'vue'</script><style></style&g......
07-vue-router的使用
vue-router使用//npm导入npminstallvue-router--save//cnpm淘宝镜像导入cnpminstallvue-router--save//如果没有安装淘宝镜像需要先安装npminstall-gcnpm--registry=https://registry.npm.taobao.org直接跳转：this.$router如果获取参数，需要使用this.$route......
08-初始vue3
写在前面https://juejin.cn/post/7106374777601785893https://juejin.cn/post/7253828299938906169配置项写法<body><divid="app"></div></body><script>constapp=Vue.createApp({//...})app.mo......
vue3
【介绍】#vue3的变化1.性能的提升-打包大小减少41%-初次渲染快55%,更新渲染快133%-内存减少54%2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking3.拥抱TypeScriptV......
如何使用 JavaScript 获取当前页面帧率 FPS
可以通过计算每秒 window.requestAnimationFrame 的调用频率来做为FPS值。它接收一个回调函数，该回调函数会在浏览器下一次重绘之前执行。所以只要我们循环调用并记录单位时间内的调用次数就能计算当前页面的帧率了。效果展示在线预览-使用JavaScript获取当前页面帧率FP......
Android adb 启动界面、获取当前界面应用名称
前言全局说明一、说明二、adb启动设置界面adbshellamstart-aandroid.intent.action.MAIN-ncom.android.settings/com.android.settings.SubSettings三、获取当前界面应用名称adbshelldumpsyswindow|findstrmCurrentFocus下面是用adb进入android命令......
vue怎么设置html不缓存但是js、css等文件做缓存
在 Vue.js 项目中，我们通常使用 webpack 打包工具进行编译构建，其中 HTML 文件通常不做缓存，而 JS、CSS 文件需要做缓存。这可以通过 webpack 的配置实现。下面是针对你的问题的步骤：1. 打开 webpack 的配置文件 webpack.config.js 或者 webpack.prod.config.js（如果你......
工程化之创建vue项目
工程化之创建vue项目清空缓存npmcacheclean--force搭建vue2的环境装cnpm这个包,cnpm替代npmnpminstall-gcnpm--registry=https://registry.npmmirror.com安装vue脚手架cnpminstall-g@vue/cli通过vue命令创建vue项目vuecreatemyfirstvue步骤：......
vue ref
ref1vue2ref属性也可以实现组件间通信：子和父都可以实现通信ref放在标签上，拿到的是原生的DOM节点ref放在组件上，拿到的是组件对象，对象中的数据、函数都可以直接使用通过这种方式实现子传父（this.$refs.mychild.text）通过这种方式实现父传子（调用子组件方法传参数）......
vue 组件通信
组件通信1.父传子在全局组件中自定义属性：<Child:myname="qname"></Child>在组件中获取：{{myname}}<divid="app"><h1>组件使用-父传子-自定义属性</h1><Child:myname="qname"></Child></div><script>......

2024-05-06 vue获取页面元素高度（注意view标签无法获取到高度，请用div）

相关文章

赞助商

阅读排行