VueJs: Bootstrap Vue Как отключить заголовок Tabs и перемещаться по кнопке в начальной загрузке - PullRequest
Новая
       30

VueJs: Bootstrap Vue Как отключить заголовок Tabs и перемещаться по кнопке в начальной загрузке

0 голосов
/ 25 мая 2018

Я пробую вкладку начальной загрузки для своего приложения.Я хотел отключить все нажатия вкладок, но хотел перемещаться по вкладкам с помощью навигационной кнопки.

Однако, когда я попытался увеличить индекс вкладки, он автоматически снова устанавливается на ноль.

Есть ли способ отключить щелчок вкладки, но перемещаться по предыдущей и следующей кнопке. 

new Vue({
  el: '#app',
  data: {
      tabIndex:0
   }
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<div id="app">
<b-card no-body >
  <b-tabs warning pills card vertical v-model="tabIndex" class="generictab" ref="wizard">
    <b-tab title="Tab Contents 1">
              <b-row>
              <b-col sm="12">
                <b-form-group>
                  <label for="name">Name</label>
                  <b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
                </b-form-group>
              </b-col>
          </b-row>
    </b-tab>
    <b-tab title="Tab Contents 2" :disabled="!(tabIndex==2)">
      Tab Contents 2
    </b-tab>
    <b-tab title="Tab Contents 3" :disabled="!(tabIndex==3)">
      Tab Contents 3
    </b-tab>
  </b-tabs>
      <div class="text-center">
      <b-button-group class="mt-2">
        <b-btn @click="tabIndex--">Previous</b-btn>
        <b-btn @click="tabIndex++">Next</b-btn>
      </b-button-group>
      <br>
      <span class="text-muted">Current Tab: {{tabIndex}}</span>
    </div>
</b-card>
</div>

1 Ответ

0 голосов
/ 25 мая 2018

Насколько я понимаю, вы хотите перемещаться, нажимая кнопки «Далее» и «Предыдущие», а не нажимая на название вкладки.Вот рабочий пример.Надеюсь, это поможет. 

new Vue({
  el: '#app',
  data: {
      tabIndex:0
   }
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<style>
  .disabledTab{
      pointer-events: none;
  }
</style>

<div id="app">
<b-card no-body >
  <b-tabs warning pills card vertical v-model="tabIndex" class="generictab" ref="wizard">
    <b-tab title="Tab Contents 1" title-item-class="disabledTab">
              <b-row>
              <b-col sm="12">
                <b-form-group>
                  <label for="name">Name</label>
                  <b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
                </b-form-group>
              </b-col>
          </b-row>
    </b-tab>
    <b-tab title="Tab Contents 2" title-item-class="disabledTab">
      Tab Contents 2
    </b-tab>
    <b-tab title="Tab Contents 3" title-item-class="disabledTab">
      Tab Contents 3
    </b-tab>
  </b-tabs>
      <div class="text-center">
      <b-button-group class="mt-2">
        <b-btn @click="tabIndex--">Previous</b-btn>
        <b-btn @click="tabIndex++">Next</b-btn>
      </b-button-group>
      <br>
      <span class="text-muted">Current Tab: {{tabIndex}}</span>
    </div>
</b-card>
</div>
...