时间戳

首页 > 解决方案 > 在 bootstrap-vue 的 b-button-group 组件中添加图标？

vue.js - 在 bootstrap-vue 的 b-button-group 组件中添加图标？

问题描述

我在这里查看了文档，但似乎没有关于如何在b-button-group按钮中添加图标的详细信息，我可以添加文本。有谁知道任何简单的方法如何做到这一点？

下面是我的代码：

  <b-button-group>
    <b-dropdown
      size="sm"
      right
      variant="primary"
      split
      text="Features"
      v-on:click="$router.push({...})"
    >
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
  </b-button-group>

我想<b-icon :icon="'arrows-expand'"></b-icon>Features在文本中添加它，但似乎没有办法，因为当然text只接受原始文本。

标签： vue.jsbootstrap-vue

解决方案

我实际上在文档中找到了另一个页面的答案，我可以在其中使用插槽，如下所示：

   <template v-slot:button-content>
      Custom <strong>Content</strong> with <em>HTML</em> via Slot
    </template>

https://bootstrap-vue.js.org/docs/components/dropdown

推荐阅读