Question

我有两种方法forceOpenSettings（）和forceCloseSettings（）。我需要这些来打开和关闭可折叠部分。这些方法在我分别测试时效果很好。但是我需要根据条件执行此操作，我有带有4个标签的b-tab。当我单击选项卡时，collapase应该会从中打开，并且每当该选项卡变为非活动状态时，折叠都必须关闭

<b-tabs content-class="mt-3">
  <b-tab title="First" active><p>I'm the first tab</p></b-tab>
  <b-tab title="Second"><p>I'm the second tab</p></b-tab>
</b-tabs>

我使用@show和@hide在b折叠中实现的同样效果，并且效果很好，

<b-collapse role="tabpanel" @show="forceOpenSettings" @hide="forceCloseSettings">......</b-collapse>

Answer 1

Vanilla JS：这是一个动态迭代器，它将检查是否将active设置为属性...

function opendiv() {
  document.getElementById('myDiv').style.display = "block";
}

function closediv() {
  document.getElementById('myDiv').style.display = "none";
}

let tabs = document.getElementsByTagName('b-tab');
for (let i = 0; i < tabs.length; i++) {
  tabs[i].addEventListener('click', event => {
    if (tabs[i].getAttribute("active") !== null) {
      opendiv();
    } else {
      closediv();
    }
  });
}

<b-tabs content-class="mt-3">
  <b-tab title="First">
    <p>I'm the first tab</p>
  </b-tab>
  <b-tab title="Second" active>
    <p>I'm the second tab</p>
  </b-tab>
</b-tabs>

<div id="myDiv" style="display:none;">Show this div when second tab has an attribute named 'active'</div>

通过标签名称获取元素...然后编写条件语句以使用键1（第二个选项卡）搜索元素的第二次迭代，检查该属性是否不是null，表示已设置，但未设置任何内容。如果标记中不存在它，则它将返回null。

  let tabs = document.getElementsByTagName('b-tab');

  if(tabs[1].getAttribute("active") !== null){
    // run opendiv();
  }else{
    // run closediv();
  }

Answer 2

Vue是数据驱动的，您不需要执行此操作的功能：

{
  ...,
  data(){
    return {
      ...,
      active: 'first',
      tabs: ["first", "second", "third"]
    }
  }
}

<b-tabs content-class="mt-3">
  <b-tab
    v-for="tab in tabs"
    :key="tab"
    :title="tab" 
    :active="active==tab" 
    @click="active=tab" 
    :style="`display:${active==tab? 'block':'none}`'"
  >
    <p>I'm the {{tab}} tab</p>
  </b-tab>

</b-tabs>

好，将其扩展为与b折叠组件进行交互

{
  props: ["tab", "active"],
  computed(){
    collapse: {
      get: function(){
        return this.active == this.tab
      },
      set: function(value){
        this.$emit('update:active', this.tab)
      }
    }
  }
}

<!-- wrap in component for prop management -> no collapse[tab] needed than -->
<template>
<b-collapse 
  role="tabpanel" 
  v-model="collapse"
 ><slot></slot></b-collapse>
 </template>

 <!-- then in scope of tabs -->
 <wrapped-collapse 
    v-for="tab in tabs"
    :key="tab"
    :active.sync="active" :tab="tab"  
  >...</wrapped-collapse>

Answer 3

您不需要多个功能来执行此操作。

您可以使用一项功能来从所有标签中删除active属性，然后仅使您单击active的属性。只需为所有<b-tab>组件提供tab类，然后您就可以对所有具有tab类的选项卡使用此功能。然后，您可以使用@click="doTabs()"指令运行该方法。

我已经更新了答案，适用于Vue实例。

运行该代码段以查看其运行情况。

new Vue({
  el: '#app',
  methods: {
    doTabs() {
      const tabs = document.querySelectorAll('.tab')
      tabs.forEach(i => i.removeAttribute('active'))
      event.currentTarget.setAttribute('active', true)
    }
  }
})

.tab {padding: 10px; border: 1px solid #ccc; cursor: pointer; display: flex; display: block}
[active] {background-color: #eee}
.content {padding-left: 20px; font-size: 12px; visibility: hidden; opacity: 0; transition: all 0.2s ease; margin-top: -40px}
[active] .content {visibility: visible; opacity: 1;margin-top: 0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div title="First" class="tab" @click="doTabs()" active>
    <p>I'm the first tab</p>
    <div class="content">
      <p>Here is all the<br>accordion content</p>
    </div>
  </div>
  <div title="Second" class="tab" @click="doTabs()">
    <p>I'm the second tab</p>
    <div class="content">
      <p>Here is all the<br>accordion content</p>
    </div>
  </div>
</div>

Vuejs：当特定选项卡处于活动状态时打开一个折叠菜单，而在非活动状态时将其关闭

3 个答案: