您的位置:首页 > 产品设计 > UI/UE

vant-ui van-tabs 插入图片

2020-07-14 06:08 15 查看

vant-ui 中的Tab标签页 标题插入图片:

方式1: 插入图片,通过 title 插槽可以自定义标签内容

<van-tabs v-model="active">
<van-tab>
<div slot="title">
<img  src="../../assets/images/home/douyinSmail.png">普通任务
</div>
内容1
</van-tab>
<van-tab>
<div slot="title">
<img  src="../../assets/images/home/douyinSmail.png">白银任务
</div>
内容 2
</van-tab>
<van-tab title="黄金任务">
<div slot="title">
<img  src="../../assets/images/home/douyinSmail.png">黄金任务
</div>
内容 3
</van-tab>
<van-tab>
<div slot="title">
<img  src="../../assets/images/home/douyinSmail.png">钻石任务
</div>
内容 4
</van-tab>
</van-tabs>

方式2:插入字体图标

<van-tabs v-model="active">
<van-tab v-for="index in 2">
<div slot="title">
<van-icon name="more-o" />选项
</div>
内容 {{ index }}
</van-tab>
</van-tabs>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: