Question

在<div class="square blink"></div>中，我想对每个项目创建一个动作，所以我有一个按钮：

<b-table>

然后我在边栏中有一个表单

<b-table :items="data" :fields="fields">
  <template v-slot:cell(actions)="data">
    <b-button v-on:click="doIt(data.index)">Do It</b-button>
  </template>
</b-table>

在我的方法中，我想响应该操作：

<b-sidebar id="do-it-form" title="Do it" right>
...
</b-sidebar>

当然，这最后一部分无效。在Bootstrap Vue manual上，我没有找到如何从Vue到Bootstrap组件进行交互。有任何线索吗？

Answer 1

您可以在$root上发出事件，该事件可用于切换边栏。第二个参数是您要打开的侧边栏的id。 this.$root.$emit('bv::toggle::collapse', 'my-sidebar-id')

<b-collapse>和<b-sidebar>监听同一事件，这就是为什么它在事件中说collapse的原因。

new Vue({
  el: '#app',
  methods: {
    openSidebar() {
      this.$root.$emit('bv::toggle::collapse', 'my-sidebar')
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.17.1/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.17.1/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-sidebar id="my-sidebar" right>
    My sidebar
  </b-sidebar>

  <b-btn @click="openSidebar">
    Open sidebar
  </b-btn>
</div>

或者，您可以在边栏上的v-model上绑定一个布尔属性，并在要打开边栏时将布尔值设置为true。

new Vue({
  el: '#app',
  data() {
    return {
      isSidebarOpen: false
    }
  },
  methods: {
    openSidebar() {
      this.isSidebarOpen = true
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.17.1/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.17.1/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-sidebar v-model="isSidebarOpen" right>
    My sidebar
  </b-sidebar>

  <b-btn @click="openSidebar">
    Open sidebar
  </b-btn>
</div>

Answer 2

此外，您可以使用侧边栏内置的公共方法 show、hide 或 toggle 之一。您只需要添加对侧边栏的引用

<b-sidebar ref="mySidebar" id="do-it-form">
...
</b-sidebar>

然后在您需要的任何方法中，您可以简单地调用它们中的任何一个

this.$refs.mysidebar.show();
this.$refs.mysidebar.hide();
this.$refs.mysidebar.toggle();

Answer 3

您也可以只为 visible 组件上的 b-sidebar 属性分配一个布尔值，然后根据需要切换布尔值。

<b-sidebar ref="mySidebar" id="do-it-form" :visible="showSidebar">
...
</b-sidebar>

并切换它：

data: {
   showSidebar: false, //starts off invisible
},
methods: {
   toggleSidebar(){
      this.showSidebar = !this.showSidebar
   }
}

在您有其他组件更新侧边栏可见性的方法中，这种方法乍一看并不是最好的方法。此用例适用于使用中央布尔值从中央存储对侧边栏可见性进行的所有更新的情况。

例如

const state = {
  showSidebar: null
}

const mutations: {
  toggleSidebar(state, payload){
     if (payload) { //payload incase you want to force a value and not just toggle
            state.showSidebar = payload;
     } else {
            state.showSidebar = !state.showSidebar;
     }
  }
}

在你的组件中：

computed: {
   showSidebar(){
     return this.$store.state.showSidebar
   }, //starts off invisible
},
methods: {
   toggleSidebar(){
      this.$store.commit("toggleSidebar");
   }
}

更新后的侧边栏组件如下所示：

<b-sidebar ref="mySidebar" id="do-it-form" :visible="showSidebar" @change="updateSidebar">
...
</b-sidebar>

和方法：

methods: {
   updateSidebar(value){
      this.$store.commit("toggleSidebar", value);
   }
}

从Vue方法切换侧边栏？

3 个答案: