Question

我有这个TabPanel，可以在其中渲染多个标签。 TabPanel内的每个面板都使用/扩展我正在使用插槽的面板。但是，在选项卡切换期间，“选项卡”的内容将被合并。

<template>
  <div class>
    <div class>
      <ul class>
        <li
          style="display: inline-block; padding:10px; margin: 10px; border: 1px solid #ccc"
          v-for="(panel, index) in panels"
          :key="index"
          @click="selectTab(index)"
          :ref="'panel' + index"
        >{{ panel.title }}</li>
      </ul>
    </div>
    <div class>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabPanel",
  data() {
    return {
      panels: [],
      selectedIndex: 0
    };
  },
  methods: {
    selectTab(panelIndex) {
      this.selectedIndex = panelIndex;
      this.panels.forEach((panel, index) => {
        panel.isActive = index === panelIndex;
      });
    }
  },
  created() {
    this.panels = this.$children;
  },
  mounted() {
    this.selectTab(0);
  }
};
</script>

面板代码

<template>
  <div v-show="isActive">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "Panel",
  props: {
    title: {
      type: String,
      required: true
    },
    panelId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isActive: true
    };
  }
};
</script>

仍然可以解决此问题。这是CodeSandbox link来演示此问题的原因，因为按照我的想法更容易将其可视化。

Answer 1

RosePanel.vue和isActive更改了<Panel>数据，但他们并没有为此做任何事情。

一个选项是为每个<Panel v-show="isActive" :title="title" :panelId="panelId">Content from Dashboard</Panel>设置一个v-show / v-if：

onRenderItemLink

CodeSandbox：https://codesandbox.io/s/charming-hamilton-jz1og

Answer 2

解决此问题的最简单方法是将所有组件包装在.md-form label { left: unset !important; display: block;-s中：

<Panel>

https://codesandbox.io/s/eager-brown-6ethk?file=/src/App.vue

但这可能不是您的初衷。

据我所见，您只是忘了将“ is-active”属性传播到嵌入式面板：

<TabPanel>
  <Panel title="Dashboard" panel-id="dashboard">
    <Dashboard></Dashboard>
  </Panel>
  <Panel title="Test" panel-id="test">Content from Panel</Panel>
  <Panel title="Rose Panel" panel-id="rose-panel">
    <RosePanel></RosePanel>
  </Panel>
</TabPanel>

（例如<Panel :title="title" :panelId="panelId" :is-isActive="isActive">Content from Dashboard</Panel>组件中的e）x

插槽内容在VueJS中的Tab之间合并

2 个答案: