防止事件更改选项卡

Posted 2023-02-22

【中文标题】防止事件更改选项卡

【英文标题】：prevent event change Tab

【发布时间】：2020-01-21 16:25:15

【问题描述】：

在 BootstrapVue 选项卡中，当我们单击一个选项卡以更改为另一个选项卡 => 事件单击将触发。事件单击触发后，我需要进行一些验证。然后，如果失败，我将取消该事件并阻止选项卡更改。但是我在 BootstrapVue 文档中找不到任何方法来做到这一点。我需要你的帮助！！

<b-tabs pills content-class="mt-3" v-model="tabIndex" >
   <b-tab title="Profile" active @click="onChange" id="test" title-item-class="btnTab"> 
       <information @changeTab="changeTabInformation" ></information>
   </b-tab>
   <b-tab title="Preferences" @click="onChange"  title-item-class="btnTab">
       <preference  @changeTab="changeTabPreference" ></preference>
   </b-tab>
</b-tabs>

(希望你能理解我，因为我的英文写作能力很差:()

【问题讨论】：

将@click="onChange" 更改为@click.stop="onChange" 会阻止标签更改吗？

【参考方案1】：

你做这样的事情。使用activate-tab事件...

<b-tabs card v-on:activate-tab="tabActivated">
      <b-tab> ...</b-tab>
      <b-tab> ...</b-tab>
</b-tabs>

然后在

methods:    
  tabActivated(newTabIndex,oldTabIndex, event)
    if(youValidationFailed)
      event.preventDefault();
   
,

【参考方案2】：

很遗憾，这是不可能的。在满足使用计算值转到选项卡的所有要求之前，您不能通过禁用选项卡来解决您的问题吗？

<div id='app'>
  <div>
  <b-card no-body>
    <b-tabs card>
      <b-tab title="Tab 1">
        <b-btn @click="counter++">increase</b-btn>
      </b-tab>
      <b-tab title="Tab 2" :disabled="status" >
        <b-card-text>Tab Contents 2</b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
     counter
</div>
</div>

JS：

new Vue(
  el: "#app",
  data: 
    counter: 0,
  ,
  computed: 
    status: function() 
      return this.counter < 2
    
  
);

【讨论】：

是的，禁用其他 b-tab 是最好的选择，并在满足前一个标签内容（即子表单）中的某些条件时启用它们。对于仅使用键盘的用户或屏幕阅读器用户来说，这会更直观……因为他们不知道为什么单击链接（标签按钮）不起作用。