vue写个Tabs组件

1.首先

搭建好vue的项目，然后找到 components 目录在这个目录里创建一个文件夹tabs，再创建 index.vue 的文件

图例

2.在需要引入的地方引入

首先在需要引入的vue组件里引入(注意我这里的路径“_c”是设置里路径别名)。
接着设置默认高亮项，和具体的tab要显示的内容选项。

图例

3.编写tabs文件下index.vue

图例

<template>
    <div class="tabs">
        <div v-for="(i,index) in list" class="items" :class="[idx == index?'actives':'']" :key="index" @click="clickFun(index)">{{i.title}}</div>
    </div>
</template>

<script>
    export default {
        name: "tabs",
        props:['idx','list'],
        methods:{
            clickFun(idx){
                this.$emit('on-change',idx)
            }
        }
    }
</script>

<style scoped lang="less">
    .tabs{
        display:flex;font-size:15px;text-align:center;height:50px;line-height:50px;
        .items{width:100%;}
        .actives{color:#f00;border-bottom:3px solid #f00;}
    }
</style>

4.在父组件里接受子组件$emit传的数据

<template>
    <zsq_tabs :idx="index" :list="tabsList" @on-change="changesFun"></zsq_tabs>
</template>

<script>
    import test from '_c/tabs'
    export default {
        name: "test.vue",
        data(){
            return {
                index:0, //默认
                tabsList:[ //具体tab
                    {title: '待付款'},{title:'待收货'},{title:'待评价'}
                ]
            }
        },
        methods:{
            changesFun(idx){
                this.index = idx
            }
        },
        components:{
            'zsq_tabs':test
        }
    }
</script>

一个简单vue的组件完成了
点击预览：https://87ui.com/#/tabstest