(vue)动态获取容器宽高

nyf_unknown

已于 2022-10-24 10:26:18 修改

阅读量2.4k

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端 1024程序员节

于 2022-08-26 19:38:55 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/126549405

版权

VUE 专栏收录该内容

189 篇文章 2 订阅

订阅专栏

(vue)动态获取容器宽高

data() 里：

   width: document.querySelector(".bottom-left").clientWidth,
   height: document.querySelector(".bottom-left").clientHeight,

方法里：

    const conWidth = document.querySelector('#mountNode').clientWidth + 'px'
    const conHeight = document.querySelector('#mountNode').clientHeight + 'px'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

nyf_unknown

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue中获取高度的方法

Meng_qi8816的博客

08-09

5679

一.Vue 中获取滚动条高度的方法 <script type="text/Babel"> mounted() {//可以在这里面直接进行滚动条的获取 window.addEventListener('scroll', this.getTopHeight , true) } methods: { getTopHeight () { //方法...

vue如何获取div的宽度_vue 动态获取div宽高有时候为0的情况

weixin_39801613的博客

12-19

3427

项目背景：需要使用echarts进行图表展示。由于div宽高是不固定的，因此需要先获取父级的宽高再把值赋予到图表的div中。需要使用this.$nextTick(() => { });方法，在mounted中，保证DOM渲染完全后，在进行echarts初始化。import echarts from 'echarts';export default {name: "wifiCollec...

参与评论您还未登录，请先登录后发表或查看评论

vue获取标签,容器，元素的宽度和高度

橙-极纪元-cplvfx-JJY.Cheng

10-27

2679

vue获取标签的高度， vue获取标签的宽度， vue获取容器的高度， vue获取容器的宽度， vue获取元素的宽度和高度

vue3 自定义指令自动获取节点的width 和 height

最新发布

Angel_Tears_的博客

08-01

610

想写一个依赖库, 但是需要监听组件的width和height这些数据, 就找到了这个方法,不想每次使用的时候都要创建和销毁, 索性就直接封装成为一个指令用来获取想要的信息,对象上能够获取的信息还是非常多的, 除了还有等, 需要使用到这些可以到MDN去查看他的使用方法实现效果当元素大小发生改变时,会自动更新width 和height 的值。

Vue 获取/设置指定组件高度

Lionel_SSL的博客

10-17

2288

'split-pane-left-area’是要获取的组件class，可以通过浏览器F12调试，在样式页面查看class信息。目的：将div的高度设置和split-pane-left-area 组件的高度一致。

Vue3子组件动态获取父组件盒子宽度

m0_52010962的博客

03-27

1109

vue3通过元素ID实现子组件获取父组件元素信息

uni-app结合Vue （动态获取div容器宽与高）

Martin的博客

12-08

1675

uni-app结合Vue（动态获取div容器宽与高）

vue获取屏幕高度并赋值给盒子

agua001的博客

07-20

1049

html: <div class="contentLeft"> <div id="echartBox" ref="echartBox"></div> </div> js: data() { return { clientHeight: "", // echarts高度动态改变 }; }, watch: { // 实时监听年度变化，等于当年年度则不可操作 year: { deep: true, immediate:

vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

01-21

this.$refs[‘通过设置ref获取到的dom元素’]....以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue 动态获取div宽高有时候为0的情况

weixin_30485799的博客

12-18

2106

项目背景：　　需要使用echarts进行图表展示。由于div宽高是不固定的，因此需要先获取父级的宽高再把值赋予到图表的div中。　　需要使用this.$nextTick(() => { });方法，在mounted中，保证DOM渲染完全后，在进行echarts初始化。  <template> <div...

vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应

weixin_39797381的博客

01-13

7798

本文章是我一个实习两个月的练习生，在项目中遇到的问题，在此记录，防治以后再踩坑！！Element ui 本身使用的Container 布局容器，组件采用 flex 布局。所以用了它的布局就可以做到宽度实时自适应，当我想试试高度是否自适应时发现一个问题，它的高度无法实时自适应！高度实时自适应这个问题让我研究了好久，因为我做的是一个后台管理系统左边是一个竖着的导航栏右边是内容，我左边导航栏的高度是根据...

vue 获取当前div离边框距离_vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法...

weixin_39626369的博客

01-17

5666

vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();//示例: 获取元素距离顶部的距离this.$refs.journalUpward.getBoundingClientRect().top以上这篇vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法就是小编...

Vue 获取元素的宽度高度

weixin_52365350的博客

08-30

3843

ref.scrollWidth 包含元素宽度、padding、溢出宽度，不包含border、margin，如果不溢出。ref.scrollHeight 包含元素高度、padding、溢出高度，不包含border、margin，如果不溢出。ref.clientWidth 包含元素宽度、padding，不包含border、margin；ref.clientHeight 包含元素高度、padding，不包含border、margin；与clientWidth一致；...

Vue 3 中动态获取高宽

weixin_41680080的博客

05-18

1万+

: 引入监听并实现如何得到动态宽度 (此时的 div2 会与 divDom 宽度会保持一致): 一般用于父组件动态变换宽高,子组件需要同步修改宽高。2.将监听到的高度赋给你需要设置的对象。1、了解如何获取组件的对象。2、了解如何获取元素中的宽高。实现简介 : Vue3 写法。1.监听父组件的宽高。

vue获取组件中元素的宽度

qq_42463588的博客

07-29

820

在 Vue 中，获取组件中元素的宽度可以通过几种不同的方法实现。

Vue 绑定Class增加容器的高度

GhostUncledrew-blogs

03-27

918

Vue绑定Class增加容器的高度  <div class="container" :class="{active: test != ''}"> <input type="text" v-model="test"> </div> export default...

vue div盒子宽高随另一个盒子自适应

细节怪的博客

09-13

2234

两个盒子的高度不固定，且右侧盒子高度随左侧盒子高度变化。

Vue，JS获取屏幕，浏览器高度宽度

qq_53461589的博客

05-25

2925

一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。通过Js的一些对象可以获取这些容器的高度、宽度。

Vue中获取元素的宽高

热门推荐

ilovexiaoming1的博客

12-25

2万+

一、获取元素 1、this.$refs 2、document.querySelector() document.getElementById() document.getElementByTagName()等等确保获取到的元素不是undefined或null vue中，在mounted()生命周期函数中才能获取dom元素，建议在修改样式时加个定时器，或者将代码放入 $nextTick()中执行。二、获取元素的宽高 1、如果是内嵌样式style="width:100px,height:10..

vue3 改变echarts宽高

09-07

你可以通过使用Vue 3中的响应式特性来改变echarts的宽高。下面是一个示例： 1. 首先，你需要在Vue组件中引入echarts库： ```javascript import * as echarts from 'echarts'; ``` 2. 在Vue组件的`mounted`钩子函数中初始化echarts实例，并设置初始的宽高： ```javascript mounted() { this.chart = echarts.init(this.$refs.chartContainer); this.chart.resize({ width: this.width, height: this.height }); }, ``` 这里的`chartContainer`是一个ref，用于获取容器元素。 3. 在Vue组件的`watch`中监听宽高的变化，并在变化时更新echarts的宽高： ```javascript watch: { width(newWidth) { this.chart.resize({ width: newWidth, height: this.height }); }, height(newHeight) { this.chart.resize({ width: this.width, height: newHeight }); } }, ``` 这样，当`width`或`height`的值发生变化时，echarts的宽高会自动更新。 4. 在模板中使用ref来指定容器元素，并绑定宽高属性： ```html <template> <div ref="chartContainer" :style="{ width: width + 'px', height: height + 'px' }"></div> </template> ``` 在这里，`width`和`height`是Vue组件中定义的响应式数据，你可以根据需要进行修改。这样就可以通过改变Vue组件中的`width`和`height`来动态改变echarts的宽高了。