Vuejs: динамически устанавливать вертикальное расположение вкладок в соответствии с размером экрана. - PullRequest
Новая
       18

Vuejs: динамически устанавливать вертикальное расположение вкладок в соответствии с размером экрана.

0 голосов
/ 13 июля 2020

Задание вертикальной опоры делает вкладку вертикальной. Но я хочу, чтобы он был выше определенного размера экрана (992 пикселей). Остальная часть может быть горизонтальной. Обратился к документации vuejs для вкладок - https://bootstrap-vue.org/docs/components/tabs, не удалось найти какой-либо метод.Есть ли способ динамически установить вертикальную опору для вкладки 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>

1 Ответ

1 голос
/ 13 июля 2020

Вы можете добавить прослушиватель событий к событию изменения размера, а затем иметь вычисляемое свойство, чтобы сказать, должно ли оно быть установлено вертикальным или нет. может передать ему логическое значение, но установка его в элементе / компоненте, например 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>

Скорее всего, вы захотите убить прослушиватель событий, когда компонент больше не используется, но этого должно быть достаточно, чтобы вы собирается

...