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控制显影。今天就到这。。。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,020评论 3 119
  • 朋友,龙年春节好,看见了吗?我特意换上红衣服跟您说话。28天极限的生命体验,你陪我走过。昨天,您又帮我在惊魂未定中...
    余俊娟阅读 339评论 0 0
  • 玉树临风细叶扬,清芬隐隐夏花黄。 谁人唤做台湾柳,一寸相思一串芳。 (注:台湾相思柳,原产台湾。高大的乔木。材质好...
    繁花落尽深眸阅读 1,076评论 15 20
  • 2018年2月4号的一个黑咕隆咚的早上,我和妈妈准备把我去太原要用的东西收拾好,一起去高铁站,因为我要和我的朋友们...
    细雨若晴阅读 672评论 0 1
  • 锅盔,这个中国人的汉堡包、快餐食品,在我们成都市的大街小巷到处都有。按种类分,有白面的、糖的、猪肉的、牛肉的。按牌...
    晚晴_fe62阅读 302评论 0 1