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

引言今天使用Vant组件库的时候希望在Tab标签栏的左边加一段文字，看了Vant的官方文档关于Tabs Slot的使用发现没有详细的用法说明，看了一下tabs的源码才了解怎么使用。源码我们可以看到<slot name=“nav-left”/> , 这不就是Vue中的插槽语法吗？用法我们只需要用加一个slot=“nav-left”就能把这部分内容插到Tabs标签栏的左边，右边也同理&lt

欧业

6492人浏览 · 2022-01-23 19:16:15

欧业 · 2022-01-23 19:16:15 发布

引言

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^