Vue实现监听dom节点宽高变化方式
更新时间:2023年10月21日 10:17:11 作者:風灬雲
这篇文章主要介绍了Vue实现监听dom节点宽高变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
原生js方法
该方法适用所有vue项目,原生js开发的思维
<div ref="datas"> <div class="scroll_box" ref="scroll" style="width:20%;height: 20%;overflow:scroll;position: absolute;left: 0;top: 0;background-color: #000;"> <div class="scroll_child" style="width:300%;height: 300%;"></div> </div> <div class="scroll_box2" ref="scroll2" style="width:20%;height: 20%;overflow:scroll;position: absolute;left: 0;top: 0;background-color: #000;"> <div class="scroll_child" style="width:300px;height: 300px;"></div> </div> </div>
mounted(){ // 监听节点宽高变小 (this.$refs.scroll as HTMLElement).scrollTop = 1000; (this.$refs.scroll as HTMLElement).scrollLeft = 1000; (this.$refs.scroll as HTMLElement).addEventListener('scroll', () => { this.width = ((this.$refs.datas as Vue).$el as HTMLElement).offsetWidth; (this.$refs.scroll2 as HTMLElement).scrollTop = 1000; (this.$refs.scroll2 as HTMLElement).scrollLeft = 1000; }); // 监听节点宽高变大 (this.$refs.scroll2 as HTMLElement).scrollTop = 1000; (this.$refs.scroll2 as HTMLElement).scrollLeft = 1000; (this.$refs.scroll2 as HTMLElement).addEventListener('scroll', () => { this.width = ((this.$refs.datas as Vue).$el as HTMLElement).offsetWidth; (this.$refs.scroll as HTMLElement).scrollTop = 1000; (this.$refs.scroll as HTMLElement).scrollLeft = 1000; }) }
element-ui element-resize-detector插件
vue + element 开发项目时的首选,简单有效
<div ref="datas"></div>
mounted(){ let erd = elementResizeDetectorMaker(); erd.listenTo((this.$refs.datas as Vue).$el, (element: HTMLElement) => { this.width = element.offsetWidth; }) }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue+element DatePicker实现日期选择器封装
Vue Element DatePicker是一款基于Vue.js的日期选择控件,它提供了丰富的日期选择功能,支持日期范围选择、日期格式化、自定义日期格式、快捷选择等功能,极大地提高了用户的体验,是开发者必备的日期选择控件。2023-02-02vue中使用百度脑图kityminder-core二次开发的实现
这篇文章主要介绍了vue中使用百度脑图kityminder-core二次开发的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论