Question

我想创建一个自定义元素，它将像其他元素的手风琴容器一样工作。我打算使用Bootstrap 4 Collapse。我希望能够在其中放置可变数量的其他自定义元素，因此使用插槽是不够的。

例如，如果我知道手风琴中会放置3个元素，我会在accordion.html中放置三个插槽，然后像这样使用它：

<accordion>
    <first-custom-element slot="first-element"></first-custom-element>
    <second-custom-element slot="second-element"></second-custom-element>
    <third-custom-element slot="third-element"></third-custom-element>
</accordion>

问题是，我不知道需要在手风琴中放置多少元素，因为我想让它更通用和可重复使用，所以我可以在我的应用程序中的多个页面中使用它。我想要的是一种方法来读取放置在<accordion>标签内的所有内容，并为这些元素中的每一个创建插槽。 Aurelia中是否有这样的功能，还是应该进行自定义实现？

Answer 1

将整个手风琴元素中的项目拆分出来，如下所示：

<强> accordion.html

<template>
  <div id="accordion" role="tablist" aria-multiselectable="true">
      <slot></slot>
  </div>
</template>

<强>手风琴item.html

<template bindable="panelTitle, headingId, itemId">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="${headingId}">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#${itemId}" aria-expanded="true" aria-controls="${itemId}">
            ${panelTitle}
          </a>
        </h4>
    </div>
    <div id="${itemId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="${headingId}">
      <slot></slot>
    </div>
  </div>
</template>

<强>用法

<template>
    <require from="accordian.html"></require>
    <require from="accordian-item.html"></require>

    <accordian>
        <accordian-item panel-title="Panel 1 Title" heading-id="headingOne" item-id="collapseOne">
            <accordian item 1 content>
        </accordian-item>
        <accordian-item panel-title="Panel 2 Title" heading-id="headingTwo" item-id="collapseTwo">
            <accordian item 2 content>
        </accordian-item>
    </accordian>
</template>

Answer 2

如果您只需要一支手风琴，请在您的slot中使用一个template：

<template>
    <slot></slot>
</template>

请勿在内部元素中添加slot属性，并且整个内容将插入<slot>位置。

<accordion>
    <first-custom-element></first-custom-element>
    <second-custom-element></second-custom-element>
    <third-custom-element></third-custom-element>
    ...
</accordion>

Aurelia中可变数量的槽位

2 个答案: