Vuejs：根据屏幕大小动态设置标签的垂直属性答案

【问题标题】：Vuejs : Set the vertical prop of tabs dynamically according to screen sizeVuejs：根据屏幕大小动态设置标签的垂直属性
【发布时间】：2020-11-02 21:34:57
【问题描述】：

提供垂直属性使标签垂直。但我希望它垂直于特定屏幕尺寸（992px）之上。其余的可以是水平的。参考 vuejs 的 tabs 文档 - https://bootstrap-vue.org/docs/components/tabs，找不到任何方法。有没有办法为 Vue-bootstrap tab 动态设置垂直属性？

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

【问题讨论】：

标签： javascript css vue.js bootstrap-vue

【解决方案1】：

您可以在 resize 事件上添加一个事件侦听器，然后有一个计算属性来说明它是否应该设置为垂直。

我认为误解可能是在阅读文档时，您可以将布尔值传递给它，但是将其设置在元素/组件上，如 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>

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

【讨论】：