Vue tab组件

发布时间:2019-04-10 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了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控制显影。

作者:我是上帝可爱多

总结

以上是脚本之家为你收集整理的Vue tab组件全部内容,希望文章能够帮你解决Vue tab组件所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签:tab组件