计算日历周视图中的预订高度

Question

我正在建立一个日历，该日历应该可以对您在该周内预订的时间进行抽象的可视化显示。因此，每个.bar-item意味着x分钟花费在某件事上。现在，我正在努力寻找一种方法来确保日子彼此成比例。

我所做的是我花费了一周中最长的一天，以及柱子所在的容器的高度。通过这种方式，我可以计算出最长的一天中1分钟的高度（px），并将此值用于所有那些日子。我希望这是有道理的。

我用一些硬编码的数据制作了这个小提琴：https://jsfiddle.net/luffyyyyy/vate1d4h/13/

new Vue({
        el: '#app',
        data: {
            minuteHeight: 0,
            longestDay: 600
        },
        mounted() {
            window.addEventListener('resize', this.handleResize);
            this.handleResize();
        },
        destroyed() {
            window.removeEventListener('resize', this.handleResize);
        },
        methods: {
            handleResize() {
                this.minuteHeight = this.$refs.container.offsetHeight / this.longestDay;
                console.log(this.minuteHeight);
            }
        }
    });

现在，当您加载页面时，此方法有效；当页面变大（可缩放）时，此方法有效。但是，当您开始缩小页面尺寸时，它会保持最大尺寸（我认为呢？）。

1. 这是解决此问题的正确方法吗？
2. 为什么在缩小浏览器尺寸时不缩小比例？

Answer 1

我建议将longestDay的高度设置为固定，换句话说，您可以说height的1分钟为2px。这样，假设您有足够的垂直空间，您的计算将变得更加容易。在您的代码示例中，在较小的视口中0.396px为1分钟。

如果要为预订加上标签，如果预订太小，则需要考虑这种情况。

编辑：我通过更改handleResize方法的计算方式解决了滚动问题。当前，将参考您的集装箱高度进行计算。它正在扩展但没有收缩，因为容器的高度根据您的CSS规则伸展。缩小窗口时，由于容器高度没有变化，因此会出现滚动条。您必须使用window.innerHeight进行计算。

handleResize() {
    this.minuteHeight = window.innerHeight / this.longestDay;
}