web-dev-qa-db-ja.com

BOOTSTRAP-VUE折りたたみ：arrowの状態を表示します

Bootstrap-Vueを使用しています。 Collapseの状態を示すトグルボタンに矢印アイコンを含める方法を探しています。コンテンツが開かれている場合は矢印を指している矢印が閉じている場合は矢印を指しています。

私はここで解決策を見ました Bootstrap 4折りたたみのフォント素晴らしいアイコンでの状態を表示 。ただし、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>
_
cssvue.jsbootstrap-4bootstrap-vue
10
fralla

このステータスをイベントで変更すると、カスタムの動作を使用できます.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>

幸運を ：）

1
fitorec