Vue tab组件

今天跟大家分享一个tab切换的组件，功能相对完善。
话不多说，直接上代码：

<tab-content :list="elList" :fnoptions="optionsFn">
              <div class="" slot="0">
                     <the-all-game :list="gameAllList"></the-all-game>
              </div>
              <div class="" slot="1">
                     <the-collect :list="gameCollectList"></the-collect>
             </div>
</tab-content>

slot里面是tab的内容。

script代码：

data () {
      elList: [
                {
                    id: 0,
                    name: '全部游戏'
                },
                {
                    id: 1,
                    name: '我的最爱'
                }
            ],
       optionsFn: [
                {runFn:() => console.log('click tab1')},
                {runFn:() => console.log('click tab2')}
            ],
}

以上就是tab头部要显示的内容，及点击tab后触发的回调函数。

接下来看看组件里面如何写的:

<template>
    <div class="container">
        <div class="header">
            <span class="title" :class="index === active? 'active' : ''" v-for="(item, index) in tabList" :key="index" @click="open(item.id)">{{item.name}}</span>
        </div>
        <div class="content">
                <div class="wrap">
                    <slot :name="active"></slot>
                </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'tab-content',
    data () {
        return {
            active: 0,
            tabList: this.list,
            runfn: this.fnoptions
        };
    },
    components: {
        // ScrollComponent
    },
    props: {
        list: {
            type: Array,
            default () {
                return [
                    {
                        id: 0,
                        name: '页面一'
                    },
                    {
                        id: 1,
                        name: '页面二'
                    }
                ];
            }
        },
        fnoptions: {
            type: Array,
            default () {
                return 【】;
            }
       }     
    },
    methods: {
        open (id) {
            this.active = id;
            if (this.runfn[id]) {
                this.runfn[id].runFn();
            }
        }
    }
};
</script>

想必看到这里大家也该明白了，就是通过组件的slot控制显影。今天就到这。。。