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控制显影。

作者：我是上帝可爱多