tab-switcher

Tab page switcher component by vue.

Install

# install dependencies
npm install --save tab-switcher

预览

##use

<template>
  <div id="app">
    <tab-switcher :tabList="tabList" v-on:changType="change"></tab-switcher>
    <section v-show="changeShowType == 'goods'"><h2>goods</h2></section>
    <section v-show="changeShowType == 'detail'"><h2>detail</h2></section>
    <section v-show="changeShowType == 'rating'"><h2>rating</h2></section>
  </div>
</template>

<script>
import tabSwitcher from 'tab-switcher'; // 引入
export default {
  name: 'app',
  components: {
    tabSwitcher
  },
  data () {
    return {
      tabList: [
        {
          name: "商品",
          type: "goods"
        },
        {
          name: "详情",
          type: "detail"
        },
        {
          name: "评价",
          type: "rating"
        }
      ],
      changeShowType: "goods"
    }
  },
  methods: {
    change(type) {
      this.changeShowType = type
    }
  }
}
</script>