小程序UI组件库Vant的Tab标签页Tabs Slot的使用

最新推荐文章于 2024-09-06 14:22:25 发布

欧业

最新推荐文章于 2024-09-06 14:22:25 发布

阅读量6.4k

点赞数 2

分类专栏：微信小程序文章标签：小程序 ui vue.js

本文链接：https://blog.csdn.net/weixin_50877746/article/details/122655512

版权

微信小程序专栏收录该内容

3 篇文章 1 订阅

订阅专栏

引言

今天使用Vant组件库的时候希望在Tab标签栏的左边加一段文字，看了Vant的官方文档关于Tabs Slot的使用
在这里插入图片描述
发现没有详细的用法说明，看了一下tabs的源码才了解怎么使用。

源码

我们可以看到<slot name=“nav-left”/> , 这不就是Vue中的插槽语法吗？
在这里插入图片描述

用法

我们只需要用加一个slot=“nav-left”就能把这部分内容插到Tabs标签栏的左边，右边也同理


<van-tabs type="card" color="green" id="tabs"  animated swipeable nav-left="text">
  <view slot="nav-left">
    <text style="margin:10rpx">位置</text>
  </view>
  <van-tab title="设备">
    <list/>
  </van-tab>
  <van-tab title="工程师"></van-tab>
</van-tabs>