又是一个新知识点，撸起袖子开始干！！！
1、在vue中安装一个插件element-resize-detector—–这是一个元素调整大小检测器，官网在这 >>> https://www.npmjs.com/package/element-resize-detector
npm install element-resize-detector2、使用（简洁明了）–直接在mounted使用
mounted(){
// 直接导入使用，也可以在main.js中引入
//elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
var elementResizeDetectorMaker = require("element-resize-detector")
// 创建实例，无参数
var erd = elementResizeDetectorMaker();//使用默认选项（将使用基于对象的方法）。
// 创建实例带参数
// 使用基于超快速滚动的方法。
// 这是推荐的策略。
var erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll",
callOnAdd: true, //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
//如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
//被调用（不会阻止其被调用）
debug: true
});
//监听class为staticNextMain的元素 大小变化
var self = this
//侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
//覆盖实例选项
erd.listenTo(document.getElementsByClassName("staticNextMain"), function(element) {
var width = element.offsetWidth;
var height = element.offsetHeight;
self.tableHeight = height-100 //将监听到的宽高进行赋值
self.tableWidth = width-20
console.log("Size: " + width + "x" + height,tableHeight);
});
},有了它，实现某些自适应屏幕宽高的元素可是方便多了呢！！！！
注意：有些情况会出现监听失效，前往https://blog.csdn.net/qq_41579104/article/details/116205523查看
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149764.html
