vueJS中的响应组件

Question

我正在将我的jQuery PDFViewer迁移到vueJS。

现在，由于以下线路，我正在调用我的组件：

<div class="card-body" id="bodyContainer">
<pdf-viewer :url="fileUrl"></pdf-viewer>
</div>

我希望我的pdf查看器始终使用其可用的最大宽度来显示pdf。

问题是，每次更新可用的最大宽度时，我都需要注意。

我如何使用VueJS做到这一点？

现在我有：

mounted: function() {
this.containerWidth = this.$el.clientWidth;
}

但它并没有真正起作用，因为clientWidth是在调用mounted后更新的。

Answer 1

这是我用来检测任何宽度变化的代码。我正在使用SO.上另一篇帖子中的一个功能

// Additional function to detect resizes
function ResizeSensor(element, callback)
{
let zIndex = parseInt(getComputedStyle(element));
if(isNaN(zIndex)) { zIndex = 0; };
zIndex--;
let expand = document.createElement('div');
expand.style.position = "absolute";
expand.style.left = "0px";
expand.style.top = "0px";
expand.style.right = "0px";
expand.style.bottom = "0px";
expand.style.overflow = "hidden";
expand.style.zIndex = zIndex;
expand.style.visibility = "hidden";
let expandChild = document.createElement('div');
expandChild.style.position = "absolute";
expandChild.style.left = "0px";
expandChild.style.top = "0px";
expandChild.style.width = "10000000px";
expandChild.style.height = "10000000px";
expand.appendChild(expandChild);
let shrink = document.createElement('div');
shrink.style.position = "absolute";
shrink.style.left = "0px";
shrink.style.top = "0px";
shrink.style.right = "0px";
shrink.style.bottom = "0px";
shrink.style.overflow = "hidden";
shrink.style.zIndex = zIndex;
shrink.style.visibility = "hidden";
let shrinkChild = document.createElement('div');
shrinkChild.style.position = "absolute";
shrinkChild.style.left = "0px";
shrinkChild.style.top = "0px";
shrinkChild.style.width = "200%";
shrinkChild.style.height = "200%";
shrink.appendChild(shrinkChild);
element.appendChild(expand);
element.appendChild(shrink);
function setScroll()
{
expand.scrollLeft = 10000000;
expand.scrollTop = 10000000;
shrink.scrollLeft = 10000000;
shrink.scrollTop = 10000000;
};
setScroll();
let size = element.getBoundingClientRect();
let currentWidth = size.width;
let currentHeight = size.height;
let onScroll = function()
{
let size = element.getBoundingClientRect();
let newWidth = size.width;
let newHeight = size.height;
if(newWidth != currentWidth || newHeight != currentHeight)
{
currentWidth = newWidth;
currentHeight = newHeight;
callback();
}
setScroll();
};
expand.addEventListener('scroll', onScroll);
shrink.addEventListener('scroll', onScroll);
};
</script>

这是我安装的函数，在需要时更新属性，使用setTimeout，以便在我确定调整大小结束时重新绘制PDF。

mounted: function() {
this.containerWidth = this.$el.clientWidth;
var _ = this;
_.fetchPDF();
var resizeTimer;
new ResizeSensor(this.$el, function()
{
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
if(_.containerWidth != container.clientWidth){
_.containerWidth = container.clientWidth;
}
}, 125)
});
},

这可能不是最好的解决方案，所以如果需要，可以随意添加