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

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

标签： javascriptvue.jsresponsive

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

},

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