Question

我正在使用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>

Answer 1

HTML标记示例：

     <b-btn v-b-toggle.myCollapse>
          <span class="when-opened">
<i class="fa fa-chevron-down" aria-hidden="true"></i></span>
          <span class="when-closed">
    <i class="fa fa-chevron-up" aria-hidden="true"></i></span>
          My Collapse
        </b-btn>
        <b-collapse id="myCollapse">
          <!-- content here -->
        </b-collapse>

示例自定义CSS：

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

您可以在上述CSS类的帮助下实现这一目标。

Answer 2

这是我最终的解决方案，基于Riddhi的回答：

<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>

我安装并导入了Font Awesome软件包，如此处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所述。导入代码在main.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);
...

Answer 3

通过事件this.$root.$on更改状态时，您可以使用自定义行为检查此文档：

https://bootstrap-vue.org/docs/components/collapse#collapse

一个简单的例子：）

Vue.use(BootstrapVue);
new Vue({
  el: '#app',
  data() {
      // collapsed has the status
      return { collapsed: false };
    },
    mounted() {
     // Emitted when collapse has
     // changed its state
     this.$root.$on(
      'bv::collapse::state',
      // id of the collapse component
      // collapse is the state
      // true => open, false => close
       (id, collapsed) => {
        if (id === "my-collapse") {
          this.collapsed = collapsed;
        }
      });// $on
    },
    // plus
    computed: {
      btnVariant: function () {
        return this.collapsed?
          'danger' : 'info'
      },
      btnTxt:  function () {
        return this.collapsed?
           '? Show ' : '? Hide';
      }
    }
});

<!-- Required Stylesheets -->
<link
 type="text/css"
 rel="stylesheet"  href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
  type="text/css"
  rel="stylesheet"
  href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
/>

<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<!-- markup template -->
<div id="app">
  <b-button
    v-b-toggle:my-collapse
    :variant="btnVariant">
    {{ btnTxt }} - Collapse
  </b-button>
  <b-collapse id="my-collapse">
    Lorem ipsum dolor sit amet...
  </b-collapse>
</div>

祝你好运：）

Bootstrap-Vue折叠：用箭头显示状态

3 个答案: