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

作者：我是上帝可爱多

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!