vant-tab 自定义带图标的标题

最新推荐文章于 2022-11-21 09:24:34 发布

tingting@Wang

最新推荐文章于 2022-11-21 09:24:34 发布

阅读量4.4k

点赞数

本文链接：https://blog.csdn.net/Tingting_Wang152/article/details/106698910

版权

<template>
    <div>
        <van-tabs v-model="active">
            <van-tab v-for="(item,index) in tabDatas" :key="index" >
                <div slot="title">
                <img :src="item.img" style="width:20px;height:20px;"/>{{item.name}}
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
export default {
    name: 'taba',
    data(){
        return {
           active: 0,
           tabDatas:[
               {
                   name: "标签1",
                   img: '1.png',  //动态图片放到public里面的
               },
                {
                   name: "标签2",
                   img: '2.png',
               },
                {
                   name: "标签3",
                   img: '3.png',
               }, {
                   name: "标签4",
                   img: '4.png'  ,
               }
           ]
        }
    },
    methods:{

    }
}
</script>
<style scoped>

</style>