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

引言

今天使用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>

1
2
3
4
5
6
7
8
9
10
11