每日一练26：vue的选项卡功能编写

参考vue官网：动态组件，component

 

效果如下：

<template>
  <div class="demo">
    <button
      v-for="tab in tabs"
      :key="tab.name"
      :class="['tab-button', { active: currentTab.name === tab.name }]"
      @click="currentTab = tab"
    >
      {{ tab.name }}
    </button>

    <component :is="`Tab${currentTab.name}`" class="tab"></component>
  </div>
</template>
<script>
import TabHome from "./tab-home";
import TabCart from "./tab-cart";
import TabMe from "./tab-me";
var tabs = [
  {
    name: "Home"
  },
  {
    name: "Cart"
  },
  {
    name: "Me"
  },
];

export default {
  middleware: "",
  components: {
    TabHome,
    TabCart,
    TabMe,
  },
  data() {
    return {
      tabs: tabs,
      currentTab: tabs[0],
    };
  },
  methods: {},
};
</script>
<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

 tab-home.vue

<template>
  <div>首页</div>
</template>
<script>
export default {
  middleware: "",
};
</script>
<style>
</style>

tab-cart.vue

<template>
  <div>购物车</div>
</template>
<script>
export default {
  middleware: "",
};
</script>
<style>
</style>

tab-me.vue

<template>
  <div>我的</div>
</template>
<script>
export default {
  middleware: "",
};
</script>
<style>
</style>

ok,搞定