vueJS中的响应式组件

Question

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

现在，多亏了下面这几行代码，我才能调用我的组件：

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

我希望我的pdf-viewer总是使用它的最大宽度来显示PDF。

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

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

现在我有：

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

但它并没有真正起作用，因为clientWidth是在调用挂载之后进行更新的。

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)
    });

},

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