Vue.js Bootstrapvue 折叠：用箭头显示状态

发布于02月08日

我使用的是Bootstrap vue，有一个简单的折叠组件，可以切换内容的可见性.我正在寻找一种方法，在切换按钮中包含一个箭头图标，指示折叠状态:打开内容时箭头指向下方，关闭时箭头指向侧面.

我已经看了Bootstrap 4 Collapse show state with Font Awesome icon个答案.然而，虽然这适用于Bootstrap 4，但我无法使其适用于Bootstrap vue，因为标记元素不同.那么，考虑到下面的标记，如何实现折叠状态箭头？

<div>
  <b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
  <b-collapse visible id="collapse3">
     <b-card> some content </b-card>
  </b-collapse>
</div>

推荐答案

根据里德的回答，这是我最终的解决方案:

<b-btn block href="#" v-b-toggle.accordion1 variant="secondary">
   Time Period
     <span class="when-opened">
         <font-awesome-icon icon="chevron-down" />
     </span>
     <span class="when-closed">
         <font-awesome-icon icon="chevron-right" />
     </span>
</b-btn>

<b-collapse id="accordion1" role="tabpanel">
   <!-- some content -->
</b-collapse>

附加CSS:

<style scoped>
...
    .collapsed > .when-opened,
    :not(.collapsed) > .when-closed {
        display: none;
    }

...
</style>

我安装并导入了字体很棒的软件包，如这里https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs和https://origin.fontawesome.com/how-to-use/with-the-api/setup/importing-icons所述.主要是进口代码.js文件，如下所示:

import Vue from 'vue'
...
import { library } from '@fortawesome/fontawesome-svg-core'
import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faChevronRight, faChevronDown);

Vue.component('font-awesome-icon', FontAwesomeIcon);
...