有什么方法可以在 VueJS 中的元素高度上设置观察者吗?
我正在尝试修复搜索结果页面上的过滤器部分。但如果结果发生变化,则无法找到它并取消修复过滤器。
原文由 Saeed 发布,翻译遵循 CC BY-SA 4.0 许可协议
有什么方法可以在 VueJS 中的元素高度上设置观察者吗?
我正在尝试修复搜索结果页面上的过滤器部分。但如果结果发生变化,则无法找到它并取消修复过滤器。
原文由 Saeed 发布,翻译遵循 CC BY-SA 4.0 许可协议
您可以使用 ResizeObserver 并将其集成到您的 Vue 组件中
function observeHeight() {
const resizeObserver = new ResizeObserver(function() {
console.log("Size changed");
});
resizeObserver.observe(document.getElementById('yourId'));
}
function changeHeight() {
var elem = document.getElementById('yourId');
console.log('...loading data...')
setTimeout(function(){
elem.style = "height: 200px";
}, 3000);
}
observeHeight();
changeHeight();
#yourId {
background-color: beige;
height: 100px;
}
<div id="yourId">
</div>
原文由 Paul 发布,翻译遵循 CC BY-SA 4.0 许可协议
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
2 回答4.7k 阅读✓ 已解决
4 回答4.3k 阅读✓ 已解决
在搜索结果返回数据后,您可以通过 $ref.yourElement.clientHeight 获取高度。有了它,您可以将高度设置为数据部分的一部分,然后从那里应用一个观察者。检查 这个例子