javascript - 集中统一调用函数的解决方案/想法

Question

所以这个有点难以解释，但我会尝试一下:

我有一个带有 .boxes 类的 div。它是一些循环元素的包装。循环元素具有类.box。在这个元素中，还有两个元素。一种是 .box-header 类的 header ，一种是 .box-content 类的内容。我可以通过单击打开和关闭此元素，因此如果它关闭，我只会看到 .box-header，如果它打开，我还可以看到 .box-content .

这是一个屏幕截图，向您展示了它的外观(灰色容器.boxes，其中元素.box处于不同的关闭/打开状态):

我在不同的组件中都有这样的列表，所以不止一次。结构大部分相同。因此，它的示例模板如下所示:

<!--wrapper boxes-->
<div class="boxes">
    <!--looped element box-->
    <div class="box boxFor{{::box.id}}" ng-repeat="box in boxes" ng-class="{fill-container: boxes.length == 1}">
        <!--box header-->
        <div class="box-header" ng-click="box.open = !box.open">
            {{::box.name}}
        </div>
        <!--box content-->
        <div class="box-content" ng-if="box.open">
            <!--some content-->
        </div>
    </div>
</div>

以下是类的示例样式:

.boxes {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: auto;
    .box {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        margin-bottom: 5px;
    }
    .box-header {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        min-height: 30px;
        line-height: 20px;
        font-size: 16px;
        padding: 5px;
    }
    .box-content{
        padding: 5px;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        margin-top: 5px;
    }
    .fill-container {
        flex: 1 1 auto;
    }
}

现在的一个要求是，每次我打开一个盒子时，它应该占据他 wrapper 高度的 50%。因此，.box 的 height: 50%; 应该为 .boxes。这意味着，我最多可以同时看到 2 个打开的盒子。当我打开第三个等时，它也应该采用与 .boxes 相同的 50% 高度，但我必须滚动才能看到它。如果我只有一个盒子，当我打开它时它应该填充整个容器，这是通过 ng-class="{fill-container:boxes.length == 1}"解决的并且可以工作美好的。我还实现了一个函数，它可以正确计算 50% 并将其设置为 .box，并且它在屏幕上也是正确的，就像我的屏幕截图一样。我是这样做的:

在 .box-header 的 ng-click 中，我在 Controller 中调用一个名为 setBoxHeight() 的函数，该函数计算并设置正确的高度:

<div class="box-header" ng-click="box.open = !box.open; ctrl.setBoxHeight()">
    {{::box.name}}
</div>

该函数如下所示:

setBoxHeight() {
    if (this.boxes.length > 1) {
        let boxHeaderHeight = $('.box-header').outerHeight();
        let halfHeight = Math.round($('.boxes').outerHeight() / 2);

        this.boxes.forEach((box: any) => {
            let element = $('.boxFor' + box.id);
            if (box.open) {
                element.height(halfHeight);
            } else {
                element.height(boxHeaderHeight);
            }
        });
    }
}

如果你比较我的模板和这个函数，应该很清楚发生了什么。这也很好用。问题是，我必须在不同组件的不同 Controller 上的每个列表中实现它。我想统一它并集中运行所有列表。它应该是一个干净的解决方案。我尝试构建一个外部组件，并通过一些绑定(bind)传递框及其类名，并调用一次函数，如下所示:

<my-component items="ctrl.boxes" header-class="'.box-header'" wrapper-class="'.boxes'"></my-component>

我很确定，有一种更干净的方法可以做到这一点。我希望我的问题足够清楚。有什么想法吗？

Answer 1

您可以选择全 CSS 解决方案，并使用 flex-basis 属性(请参阅 documentation )。基本上，它设置灵活子项的默认大小；所以你可以将其设置为50%，这样每个box将占据boxes高度的一半(因为你的flex-direction 设置为列)。

当然，需要进行一些实现来使其适应您的项目，但值得一试(也许更干净？)。

这里是a codepen向你展示这个技巧。

编辑:正如@MrBuggy指出的，这个解决方案在他们的情况下不起作用，因为boxes容器没有固定的高度。