Vuejs：在特定选项卡处于活动状态时打开折叠菜单，在不活动时关闭它

Question

我有两个方法 forceOpenSettings() 和 forceCloseSettings()。我需要这些来打开和关闭可折叠部分。当我单独测试时，这些方法运行良好。但我需要根据一个条件执行此操作，我有 4 个选项卡的 b-tab。如果我点击Collpase应该打开的选项卡时，并且只要选项卡变为非活动，崩溃必须关闭

<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>

我在 b-collapse 中使用 @show 和 @hide 实现了同样的目标，并且效果很好，

<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。

  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-collapse 组件交互

{
  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 实例的答案。

运行 sn-p 以查看它的实际效果。

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>