Algolia 和 Vue InstantSearch：使用插槽自定义小部件

Posted 2023-02-23

【中文标题】Algolia 和 Vue InstantSearch：使用插槽自定义小部件

【英文标题】：Algolia & Vue InstantSearch: Customising widgets with slot

【发布时间】：2020-02-15 07:32:27

【问题描述】：

我正在尝试修改 Vue 的 InstantSearch 小部件的输出。

在文档 (https://www.algolia.com/doc/api-reference/widgets/hits/vue/#customize-the-ui) 中说，使用 scope-slot 它将覆盖小部件的完整 DOM 输出：

但这里似乎并非如此。这是我在下面使用带有简单<tr> 和<td> 元素的插槽的代码：

我没有在其中渲染 <tr> 和 <td>，而是在这里看到：

具有

ais-Hits

类的

div

具有

ais-Hits-list

类的嵌套

ol

具有

ais-Hits-item

类的嵌套

li

输出是这样的：

如果我去 inspect element 并删除我上面提到的元素（查看 div、ol 和 li 被删除）：

那么结果是正确的：

我做错了吗？ slot 不应该覆盖 DOM 输出并将其余部分留给开发人员设置样式吗？

任何帮助将不胜感激！

【参考方案1】：

您必须使用default 插槽而不是item。您将完全控制渲染。

<ais-hits>
  <ol slot-scope=" items ">
    <li v-for="item in items" :key="item.objectID">
      <ais-highlight :hit="item" attribute="name" />
      <p>
        <ais-highlight :hit="item" attribute="description" />
      </p>
    </li>
  </ol>
</ais-hits>

这是CodeSandbox 上的示例。

---

ais-Hits 将始终使用div 包装默认插槽（有关说明，请参阅GitHub）。避免此问题的唯一替代方法是使用 mixin createWidgetMixin create your own widget：

<template>
  <ol v-if="state">
    <li v-for="item in state.hits" :key="item.objectID">
      <ais-highlight :hit="item" attribute="name" />
      <p>
        <ais-highlight :hit="item" attribute="description" />
      </p>
    </li>
  </ol>
</template>

<script>
import  createWidgetMixin  from "vue-instantsearch";
import  connectHits  from "instantsearch.js/es/connectors";

export default 
  mixins: [createWidgetMixin( connector: connectHits )]
;
</script>

这是CodeSandbox 的示例。

【讨论】：

感谢您的回复！我设法删除了 ol 和 li 但 创建了一个 class="ais-Hits" 的 div 打破了桌子。有没有办法避免这个div？

有了插槽，您无法摆脱***div。这是 Vue 的限制，根元素不能是插槽或模板。唯一的选择是使用 mixin 创建一个自定义小部件。我已经更新了答案。

【参考方案2】：

尽管@Samuel Vaillant 为我指出了正确的路径，但我相信下面的代码可以帮助其他人解决与我相同的问题（使用 Algolia 结果填充 html 表格），而无需创建自定义小部件：

<template>
  <ais-hits>
    <table slot-scope=" items ">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.objectID">
          <td>
            <ais-highlight :hit="item" attribute="name" />
          </td>
          <td>
            <ais-highlight :hit="item" attribute="description" />
          </td>
        </tr>
      </tbody>
    </table>
  </ais-hits>
</template>

【讨论】：

这应该是最佳答案