el-tabs el-tab-pane 分别封装

以下是分别封装 el-tabs 和 el-tab-pane 的示例：

<!-- MyTabs.vue -->
<template>
  <div class="my-tabs">
    <el-tabs v-model="activeTab">
      <slot></slot>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "MyTabs",
  props: {
    value: {
      type: String,
      default: "tab1"
    }
  },
  data() {
    return {
      activeTab: this.value
    };
  }
};
</script>

<style scoped>
.my-tabs {
  max-width: 600px;
  margin: 0 auto;
}
</style>

<!-- MyTabPane.vue -->
<template>
  <el-tab-pane :label="label" :name="name">
    <slot></slot>
  </el-tab-pane>
</template>

<script>
export default {
  name: "MyTabPane",
  props: {
    label: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  }
};
</script>

在这个示例中，我们将 el-tabs 封装到了 MyTabs 组件中，将 el-tab-pane 封装到了 MyTabPane 组件中。MyTabs 组件接受一个 value 属性，用于指定默认活动标签页，它会将这个值绑定到 el-tabs 的 v-model 上。MyTabPane 组件接受 label 和 name 两个属性，用于设置标签页的标签和名称。

你可以在其他组件中使用这些封装好的组件，例如：

<template>
  <div>
    <my-tabs>
      <my-tab-pane label="Tab 1" name="tab1">
        <p>Content of Tab Pane 1</p>
      </my-tab-pane>
      <my-tab-pane label="Tab 2" name="tab2">
        <p>Content of Tab Pane 2</p>
      </my-tab-pane>
    </my-tabs>
  </div>
</template>

<script>
import MyTabs from "@/components/MyTabs.vue";
import MyTabPane from "@/components/MyTabPane.vue";

export default {
  name: "App",
  components: {
    MyTabs,
    MyTabPane
  }
};
</script>

在这个示例中，我们导入了 MyTabs 和 MyTabPane 组件，并在 template 中使用了它们。这样，我们就可以在页面上显示一个带有标签页的组件。