方法:使用element-resize-detector插件来实现
实现:
1、安装插件,npm install element-resize-detector
2、在main.js中引入依赖,并挂在vue原型链上:
import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()
3、在界面中使用_this.$erd.listenTo()去做监听,示例代码如下:
mounted() {
const _this = this
_this.$erd.listenTo(_this.$refs.advertisement, element => {
// 这里写监听到尺寸变化后需要做的事
// 我这里是想让类名为advertisement的dom元素的宽高比为780:230
const newHeight = Math.floor(230 / 780 * element.clientWidth) + 'px'
_this.$nextTick(() => {
document.getElementsByClassName('advertisement')[0].style.height = newHeight
})
})
},
beforeDestroy() {
const _this = this
// 离开页面删除检测器和所有侦听器
_this.$erd.uninstall(_this.$refs.advertisement) // 这里用ref是因为vue离开页面后获取不到dom
},
参考地址:vue中如何实现对dom元素大小改变的监听_vue监听dom尺寸变化_coldriversnow的博客-CSDN博客