引言

今天使用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>
# 小程序 # ui # vue.js
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue