Vuejs：根据屏幕大小动态设置选项卡的垂直属性

Question

提供 vertical 属性使选项卡垂直。但我希望它垂直于特定屏幕尺寸（992px）。它的其余部分可以是水平的。参考了选项卡的 vuejs 文档 - https://bootstrap-vue.org/docs/components/tabs，找不到任何 method.Is 有什么方法可以为 Vue-bootstrap 选项卡动态设置垂直属性？

<b-tabs pills card vertical>
  <b-tab title="Tab 1" active><b-card-text>Tab contents 1</b-card-text></b-tab>
  <b-tab title="Tab 2"><b-card-text>Tab contents 2</b-card-text></b-tab>
  <b-tab title="Tab 3"><b-card-text>Tab contents 3</b-card-text></b-tab>
</b-tabs>

Answer 1

您可以在调整大小事件上添加一个事件侦听器，然后计算属性来说明是否应将其设置为垂直。

我认为误解可能是在阅读文档时产生的，您可以向它传递一个布尔值，但是将它设置在 element/component 上，就像 vertical 一样，就像您已经完成了 :vertical="true"

new Vue({
  el: "#app",
  computed: {
    vertical() {
      if (this.size > 992)
        return true
      return false
    }
  },
  data() {
    return {
      size: 0
    }
  },
  mounted() {
    var that = this
    window.onresize = function() {
      that.size = window.innerWidth
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css">
<div id="app">
  <b-tabs pills card :vertical="vertical">
    <b-tab title="Tab 1" active>
      <b-card-text>Tab contents 1</b-card-text>
    </b-tab>
    <b-tab title="Tab 2">
      <b-card-text>Tab contents 2</b-card-text>
    </b-tab>
    <b-tab title="Tab 3">
      <b-card-text>Tab contents 3</b-card-text>
    </b-tab>
  </b-tabs>
</div>

您很可能希望在不再使用该组件时终止事件侦听器，但这应该足以让您继续前进

Vuejs：根据屏幕大小动态设置选项卡的垂直属性

Vuejs : Set the vertical prop of tabs dynamically according to screen size

javascript

css

vue.js

bootstrap-vue