Vue 获取div 的宽度

最新推荐文章于 2024-05-28 12:00:00 发布
最新推荐文章于 2024-05-28 12:00:00 发布
阅读量3w 收藏 9
点赞数 4
分类专栏： 前端经验记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/purple_lumpy/article/details/90406517
版权

在template 某个元素中添加ref 属性。

之前使用ref 的style.width 就可以获取得到。

但今天在使用的时候突然不能获得了。

尝试了下面的方式即可：

在js 中获取这个 ref 的 “clientWidth” 属性

const eWidth = this.$refs.echartsWrapper.clientWidth

具体原因，占个坑先

purple_lumpy
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
web前端之vue通过ref获取元素的宽高、单个或多个ref的处理、多种方法、getComputedStyle
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
04-26 1026
web前端之vue通过ref获取元素的宽高、单个或多个ref的处理、多种方法、getComputedStyle
vue获取一个div的宽度大小
weixin_42579969的博客
01-08 1416
你可以在 vue 组件的 data 选项中声明一个变量来存储 div 的宽度，然后在组件的 mounted 钩子函数中使用 JavaScript 的 offsetWidth 属性来获取 div 的宽度并将它赋值给变量。 例如： <template> <div ref="myDiv">{{ width }}</div> </template> &...
Vue 中获取 DOM 元素的高度
最新发布
qq_44776454的博客
05-28 583
Vue 获取DOM 大小位置 属性
Vue动态获取width的方法
12-29
vue里想用Bootstrap的进度条， <div class=progress> <div class=progress-bar role=progressbar aria-valuenow=60 aria-valuemin=0 aria-valuemax=100 xss=removed> <span class=sr-only>20%</span> </div> </div> 主要是把style=”width: 20%;”变成动态获取的。 :style='width:' + perce
vue.js 获取当前屏幕的宽度_Vue动态获取width的方法
weixin_39984661的博客
12-19 2666
vue里想用Bootstrap的进度条，aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"style="width: 20%;">20%主要是把style="width: 20%;"变成动态获取的。:style="'width:' + percent + '%'"这样写就好了。也可是这样：用vue 获取动态元素的宽度。首页，要放在...
vue如何获取div的宽度_vue 动态获取div宽高有时候为0的情况
weixin_39979948的博客
12-19 857
项目背景：需要使用echarts进行图表展示。由于div宽高是不固定的，因此需要先获取父级的宽高再把值赋予到图表的div中。需要使用this.$nextTick(() => { });方法，在mounted中，保证DOM渲染完全后，在进行echarts初始化。import echarts from 'echarts';export default {name: "wifiCollect...
vue获取div的宽高、位置、浏览器宽高、设置位置
a15240780264的博客
02-01 3101
vue获取div的宽高、位置、浏览器宽高、设置位置
vue取div当前宽度_Vue 基础知识之 Vue.extend
weixin_39926016的博客
11-21 129
Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。官方文档学习开始之前我们先来看一下官方文档是怎么描述的。Vue.extend( options )参数：{Object} optio...
vue 判断元素内容是否超过宽度的方式
10-15
在Vue中，有时我们需要判断元素内容是否超过了其自身的宽度，特别是在实现文本省略或自适应布局时。一种常见的做法是检查元素的clientWidth（可视区域宽度）与scrollWidth（包括不可见部分的总宽度）之间的关系。...
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
01-21
this.$refs[‘通过设置ref获取到的dom元素’]....以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决vue项目获取dom元素宽高总是不准确问题
11-20
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0].offsetHeight; 原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕； 解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识：vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度） 使用 vue 的时候，想要
无法获取隐藏元素宽度和高度的解决方案
08-31
无法获取隐藏元素宽度和高度的解决方案 在实际开发中，我们经常会遇到需要获取隐藏元素的宽高的情况，这里的隐藏元素是指display为none的元素。在默认情况下，获取隐藏元素的宽高是非常困难的，因为浏览器不会计算...
vue取div当前宽度_前端开发思路超详解（Vue组件篇）
weixin_39915081的博客
11-21 413
其实不管是什么框架，在开发中都有一些比较常规和通用的东西，那就是思想，接下来我将从以下三个点并基于vue开发一个Slider（滑条）组件，在这里我默认大家都会基本使用vue，若对vue相关概念还不是很清楚的可以转到，知乎的文档展示貌似对markdown不是很友好，大家可以直接转到Bennnis/slider查看文档介绍 — Vue.js​cn.vuejs.org概览步骤1. 组件抽象 (api设计...
vue如何获取div的宽度_vue获取dom元素高度的方法
weixin_39815031的博客
12-19 1万+
获取DOM高度：要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式等操作(参照生命周期钩子mounted语法：https://cn.vuejs.org/v2/api/#mounted)mounted() {let h = window.innerHeight || document.documentElement.clientHeight || document.body...
Vue 获取元素的宽度高度
weixin_52365350的博客
08-30 3747
ref.scrollWidth 包含元素宽度、padding、溢出宽度，不包含border、margin，如果不溢出。ref.scrollHeight 包含元素高度、padding、溢出高度，不包含border、margin，如果不溢出。ref.clientWidth 包含元素宽度、padding，不包含border、margin；ref.clientHeight 包含元素高度、padding，不包含border、margin；与clientWidth一致；...
Vue动态渲染div宽度
hql1024的博客
10-21 2886
:style="{width: item.wc_bili + '%'}"
vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）
热门推荐
KLW75
07-14 5万+
使用 vue 的时候，想要获得一个指定的元素的高度时，可以使用 vue 中的ref 。 当 ref 加在普通的元素上，使用 this.ref.name 获取到的是 dom 元素 示例 写在 页面 html 部分的 <div ref="init"></div> 写在 页面 方法 部分 这里的offsetHeight 是返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） let height= this.$refs.init.offsetHeight...
vue 获取元素宽高
lgg1997的博客
07-05 1万+
vue 获取元素宽高
vue怎么获取div的宽度
05-30
可以使用 Vue.js 提供的 $refs 来获取 DOM 元素的宽度。具体做法如下： 1. 在需要获取宽度的 div 上添加一个 ref 属性，例如： ``` <div ref="myDiv">这是一个 div</div> ``` 2. 在 Vue 实例中，通过 this.$refs.myDiv 可以获取到该 div 元素的引用。 3. 使用 offsetWidth 属性可以获取该元素的宽度，例如： ``` let width = this.$refs.myDiv.offsetWidth; console.log("div的宽度为：" + width); ``` 这样就可以获取到该 div 元素的宽度了。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值