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。

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

},

这可能不是最好的解决方案，因此如有需要，请随时添加

vueJS中的响应组件

1 个答案: