dtScreen/src/components/ui/TechTabPane.vue

<template>
  <div class="tech-tab-pane" v-show="active">
    <div v-if="loading" class="tab-pane-loading">加载中...</div>
    <slot v-else></slot>
  </div>
</template>

<script>
export default {
  name: 'TechTabPane',
  props: {
    label: { type: String, required: true }, // 头部显示的文字
    name: { type: [String, Number], required: true }, // 唯一标识符
    loading: { type: Boolean, default: false }
  },
  computed: {
    // 核心：动态判断自己是否被选中
    active() {
      // 通过 this.$parent 拿到 TechTabs 组件绑定的 v-model (即 value 属性)
      return this.$parent.value === this.name;
    }
  },
  created() {
    // 组件创建时，把自己注册到父组件的 panes 数组中去，让父组件能渲染出头部
    if (this.$parent && this.$parent.addPane) {
      this.$parent.addPane(this);
    }
  },
  beforeDestroy() {
    if (this.$parent && this.$parent.removePane) {
      this.$parent.removePane(this);
    }
  }
};
</script>

<style scoped>
.tech-tab-pane {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tab-pane-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: #758599;
  font-size: 14px;
}
</style>