Vue2.0 多 Tab切换组件的封装实例

下面我将为您详细讲解“Vue2.0 多 Tab切换组件的封装实例”的完整攻略。

第一步：编写Tab组件的基本结构

首先，在编写多 Tab 切换组件之前，我们需要一些基本的结构，如：

<template>
  <div class="tabs">
    <div class="tabs-header">
      <ul>
        <li v-for="(item, index) in tabs" :key="index"></li>
      </ul>
    </div>
    <div class="tabs-content">
      <div v-for="(item, index) in tabs" :key="index"></div>
    </div>
  </div>
</template>

第二步：定义Tab组件的数据结构

其次，我们需要定义组件的数据结构，如：

export default {
  name: 'tabs',
  props: {
    // 定义标签名称和内容
    tabs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: 0
    };
  },
}

第三步：定义Tab组件的事件处理

接着，我们需要定义组件的事件处理，如：

export default {
  name: 'tabs',
  props: {
    // 定义标签名称和内容
    tabs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: 0
    };
  },
  methods: {
    handleTabClick(index) {
      this.activeIndex = index;
    }
  }
}

第四步：渲染Tab组件的标签和内容

最后，我们需要渲染组件的标签和内容，如：

export default {
  name: 'tabs',
  props: {
    // 定义标签名称和内容
    tabs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: 0
    };
  },
  methods: {
    handleTabClick(index) {
      this.activeIndex = index;
    }
  },
  render() {
    return (
      <div class="tabs">
        <div class="tabs-header">
          <ul>
            {this.tabs.map((item, index) => (
              <li
                key={index}
                class={{ active: index === this.activeIndex }}
                onClick={() => this.handleTabClick(index)}
              >
                {item.label}
              </li>
            ))}
          </ul>
        </div>
        <div class="tabs-content">
          {this.tabs.map((item, index) => (
            <div
              key={index}
              class={{ active: index === this.activeIndex }}
            >
              {item.content}
            </div>
          ))}
        </div>
      </div>
    );
  }
};

这样，就完成了多 Tab 切换组件的封装实例。

示例一：使用Tab组件进行首页内容的展示

<template>
  <div class="home">
    <tabs :tabs="tabs"></tabs>
  </div>
</template>

<script>
import Tabs from "@/components/Tabs";

export default {
  name: 'Home',
  components: {
    Tabs
  },
  data() {
    return {
      tabs: [
        {
          label: "推荐",
          content: "推荐的内容"
        },
        {
          label: "热门",
          content: "热门的内容"
        },
        {
          label: "新闻",
          content: "新闻的内容"
        }
      ]
    };
  }
};
</script>

示例二：使用Tab组件进行订单页不同状态的展示

<template>
  <div class="order">
    <tabs :tabs="tabs"></tabs>
  </div>
</template>

<script>
import Tabs from "@/components/Tabs";

export default {
  name: 'Order',
  components: {
    Tabs
  },
  data() {
    return {
      tabs: [
        {
          label: "全部订单",
          content: "全部订单的内容"
        },
        {
          label: "待付款",
          content: "待付款的内容"
        },
        {
          label: "待发货",
          content: "待发货的内容"
        },
        {
          label: "待收货",
          content: "待收货的内容"
        },
        {
          label: "已完成",
          content: "已完成的内容"
        }
      ]
    };
  }
};
</script>

以上就是多 Tab 切换组件的封装实例以及两个示例的说明。