代码之家 › 专栏 › 技术社区 › Vico

vueJS中的响应组件

responsive vue.js javascript

Vico · 技术社区 · 8 年前

现在,我正在调用我的组件,这得益于以下几行代码:

<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之后更新的,所以它实际上不起作用。

1 回复 | 直到 8 年前

Vico 8 年前

这是我用来检测宽度变化的代码。我用的是另一篇文章中的函数。

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

},

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