vue项目中监听div的宽高变化

最新推荐文章于 2024-08-09 07:21:54 发布

suoh's Blog

最新推荐文章于 2024-08-09 07:21:54 发布

阅读量1.3w

点赞数 4

分类专栏： ❤️❤️--vue2核心技术栈文章标签： vue监听元素宽高 vue监听div宽高实现自适应

本文链接：https://blog.csdn.net/qq_41579104/article/details/116194304

版权

❤️❤️--vue2核心技术栈专栏收录该内容

53 篇文章 36 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中如何使用element-resize-detector插件来监听div的宽高变化，从而实现元素的自适应屏幕宽高。通过在组件的mounted阶段进行配置，可以轻松达到动态调整的效果。若遇到监听失效问题，可参考相关文章解决。

摘要由CSDN通过智能技术生成

又是一个新知识点，撸起袖子开始干！！！

1、在vue中安装一个插件element-resize-detector-----这是一个元素调整大小检测器，官网在这 >>> https://www.npmjs.com/package/element-resize-detector

npm install element-resize-detector

2、使用（简洁明了）--直接在mounted使用

  mounted(){
    // 直接导入使用，也可以在main.js中引入
    //elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

suoh's Blog

关注关注

4
点赞
踩
24

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

监听某个DIV的宽高变化

qq_40535197的博客

10-16

3398

监听某个DIV的尺寸变化背景： vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，但是用window带的resize，只能监听浏览器窗口大小变化，像侧边导航隐藏的这种情况不能人echarts重置。为了监听某元素区域的变化而使echarts的尺寸重置，我第一时间想到的是resize事件，但是实际试了试，发现并不能起到我想要的效果，加在DIV上的resize事件根本不能触发，后来百度了一下，发现resize只能加在window对象上，并

vue 监听元素高度的变化_vue中监听元素的宽高变化(强大的自定义指令)

weixin_42381087的博客

12-23

4039

js中可以给window去绑定缩放事件，从而去监听窗口大小的变化:window.addEventListener('resize', () => {})但是有时候窗口的大小并不会变化，变的是元素的大小，好像是没有方法是可以直接监听元素的大小变化的，那如果有这个需求呢？这次超人鸭也从一个真实需求讲解，如何去监听一个元素的宽高变化，看图:image.png在切换侧边栏的收缩时，右边的内容的宽度就...

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

vue监听dom大小改变案例

11-19

需求描述：layout左边菜单栏收缩，右边的content区域的swiper宽度没有改变（没有图，朋友的问题，大体画一下）类似于点击折叠左边目录会变小，右边内容区域会变大，但是swiper在刚开始的时候就确定了宽度，所以我的想法是监听右边宽度大小去updata一下。但是我用vue的watch监听$refs.swiper.offsetwidth失败了！！！！但是宽度确实是在改变的很费解，先说一下解决方法把 1、使用element-resize-detector var elementResizeDetectorMaker = require("element-resize-detector

`element-resize-detector` 开源项目指南

热门推荐

qq_29384639的博客

03-17

1万+

npm install element-resize-detector --save import elementResizeDetectorMaker from "element-resize-detector"; mounted() { const _this = this; const erd = elementResizeDetectorMaker(); ...

vue项目里实时监听某个div宽度的变化，然后执行相应的事件

晚星的博客

08-13

9543

directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象 let width = '', height = ''; function isReize () { const style = document.defaultView.getComputedStyle(el); if.

VUE实时监听元素距离顶部高度的操作

10-15

本文档介绍了一个特定的技术实现点：如何在Vue中实时监听某个元素距离页面顶部的高度变化。这一操作在网页开发中非常有用，比如需要根据页面的滚动情况动态更新某些元素的样式或行为。文档首先提出了一个疑问：...

监听页面高度变化_vue项目如何监听窗口变化，达到页面自适应？

weixin_42501949的博客

02-12

2973

【自适应】向来是前端工程师需要解决的一大问题——即便作为当今非常火热的vue框架，也无法摆脱——虽然elementui、iview等开源UI组件库层出不穷，但官方库毕竟不可能满足全部需求，因此我们可以通过【监听窗口变化】达到想要的绝大部分自适应效果。获取窗口宽度：document.body.clientWidth监听窗口变化：window.onresize同时回顾一下JS里这些方法：网页可见区域宽...

【Vue】监听div宽高的变化（动态渲染echarts宽高）

weixin_52063946的博客

04-28

741

监听div宽高的变化（动态渲染echarts宽高）。echarts 根据 div 宽高的变化而变化

Vue---监听div元素宽高改变时echart图表重新resize

前端与计算机相关知识的分享，博主的qq523235674

10-26

1623

当点击上图的红色框时，echart的div元素宽会改变但是无法触发echarts图表的resize重新渲染，对于浏览器而言，浏览器具有window.resize方法监听浏览器窗口大小的改变，而div元素没有监听宽高改变的方法。element-resize-detector依赖包可以监听div元素宽高的改变，官方文档如下。这里简单演示使用步骤，具体请看官网文档。3、destroyed钩子函数销毁监听。3、mounted钩子函数监听。

vue Tips

qq_41855239的博客

05-28

205

1.移动端点击拨号： a标签href属性添加‘tel:’前缀 <a :href="'tel:'+info.phone" >拨打</a> 2.动态插入HTML字符串: 使用v-html指令，内容按普通 HTML 插入，不会作为 Vue 模板进行编译 <div v-html="info.content"></div> 3.webpack打包文件找不到...

vue小tips

xiaoququ的博客

07-10

246

正则匹配所有两个字符，|，替换成空 text.replace(/[,|]/g, "") 给data中数据设置字段 this.data.forEach(item => { this.$set(item, "text", ""); //存储备注信息对象字段名字段值（任意类型） }） ...

VUE监听（动态/实时）获取元素的宽度变化

陈大文的博客

12-18

2540

1920*1080的云图效果能自适应显示，所以得实时获取屏幕的宽度，然后用屏幕的宽度和1920的宽度进行对比，计算出占比，然后用CSS3的transform scale来实现自适应。在utils文件下创建directive，然后directive文件夹下创建一个resizeObserver.js文件。是可以监听到DOM元素，宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度。第二步：在directive文件夹再创建一个index.js文件，目的是为了集中注册自定义指令。

vue3监听div高宽变化自定义分析

qq_45820271的博客

04-05

1394

对一个监听div变化的自定义vue指令的分析

vue--小tips

impossible1994727的博客

02-13

212

1、使用router-link跳转页面只用写页面的名字不用带后缀名，比如我要跳转到a.vue页面： <router-link to='/a'>to a</router-link> 2、每个vue文件中要有template标签，并且template标签下必须有一个一级div标签，这个一级div标签有且只有一个； ...

vue监听div高度变化

06-01

在中监听`div`元素高度变化可以通过`Vue`提供的`$refs`属性以及`Vue`提供的`$watch`函数实现。首先，在`div`元素上添加一个`ref`属性，例如： ``` <template> <div ref="example"></div> </template> ``` 然后，在组件中定义一个`computed`属性，用于获取`div`元素的高度： ``` <script> export default { computed: { exampleHeight() { return this.$refs.example.clientHeight; } }, watch: { exampleHeight(newHeight, oldHeight) { // 处理高度变化 } } } </script> ``` 在`computed`中，使用`this.$refs.example`获取`div`元素，并调用`clientHeight`获取元素的高度。然后在`watch`中监听`exampleHeight`的变化，当高度发生变化时执行相应的处理逻辑。需要注意的是，由于`$refs`属性是在`mounted`钩子函数中才能获取到，因此需要保证`$refs.example`在`computed`和`watch`中都被正确地引用。同时，需要注意`$refs`属性引用的是原生`DOM`元素，而不是`Vue`组件实例，因此不能在`$refs`上直接调用`Vue`组件实例的方法或属性。