vue监听页面元素宽度和高度变化
·
1.安装element-resize-detector
npm install element-resize-detector
2.引入到script中
<script>
import elementResizeDetectorMaker from "element-resize-detector";
</script>
3.在mounted中使用
mounted() {
this.watchSize();
},
methods: {
watchSize() {
const _this = this;
var erd = elementResizeDetectorMaker();
erd.listenTo(this.$refs.fan, (element) => { // 这里的this.$refs.fan指定要监听的元素对象,对应的是<div ref="fan"></div>
var width = element.offsetWidth;
var height = element.offsetHeight;
_this.$nextTick(() => { // 这里填写监听改变后的操作
//const element_style = _this.$refs.gif1.style;
//console.log("Size: " + width + "x" + height);
//if (width > height) {
// element_style.height = "100%";
// element_style.width = "auto";
//} else {
// element_style.height = "auto";
// element_style.width = "100%";
//}
});
});
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)