b-tab 标题内表单输入的事件监听器

Posted 2023-02-22

【中文标题】b-tab 标题内表单输入的事件监听器

【英文标题】：Event listeners of form input inside b-tab title

【发布时间】：2021-06-04 02:34:32

【问题描述】：

我目前正在尝试在 bootstrap-vue 中实现动态 b-tab 组件的可编辑标题。

因此我使用下面的代码sn-p。

 <b-tab v-for="attribute in test.attributes" :key="test.attributes.indexOf(attribute)">
   <template #title>
    <b-input-group>
      <b-form-input
        id="input-id"
        v-model="attribute.id"
        size="sm"
        :plaintext="isEditable(attribute)"
      />
      <b-input-group-append>
        <b-button size="sm" variant="danger" class="float-right" @click="removeAttribute(attribute)">
          x
        </b-button>
      </b-input-group-append>
    </b-input-group>
  </template>
 </b-tab>

这对于编辑选项卡标题效果很好，但是表单输入的事件侦听器在选择文本和更改光标位置时遇到了一些问题。对我来说，@click 被选项卡标题的 b-link 消耗是有道理的，但我找不到任何阻止双击选择文本或拖动选择文本的侦听器。

是否有可能在标签标题内实现正常的 b-form-input 行为？

【参考方案1】：

您可以使用 sn-p 在 b-tab 中使用 b-form-input 来更改标题。我使用:disabled 来防止点击非活动标签。

new Vue(
  el: '#app',
  data() 
    return 
      tab_index: 0,
      items: [
          id: 1,
          input_model_var: ""
        ,
        
          id: 2,
          input_model_var: ""
        
      ]
    
  
)

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  Tab index: tab_index
  <b-tabs v-model="tab_index">
    <b-tab v-for="(item, index) in items" :key="item.id">
      <template #title>
    <b-input-group>
      <b-form-input
        id="input-id"
        v-model="item.input_model_var"
        size="sm"
        :disabled="index != tab_index"
      />
  </template> Item is:  item.input_model_var 
    </b-tab>
  </b-tabs>

</div>