vant库使用遇到的情况van-tab 中定义显示的titlevan-filed -- 输入框自动聚焦van-overlay的使用van-filed 插槽的使用和van-switchvan-drop-downvan-list的列表加载van-popup，遮罩层太黑，原因是该弹窗需要放在最外层的盒子

50 阅读 0 评论 33 点赞

我是靠谱客的博主自由荔枝，最近开发中收集的这篇文章主要介绍vant库使用遇到的情况van-tab 中定义显示的titlevan-filed -- 输入框自动聚焦van-overlay的使用van-filed 插槽的使用和van-switchvan-drop-downvan-list的列表加载van-popup，遮罩层太黑，原因是该弹窗需要放在最外层的盒子，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

van-tab 中定义显示的title

van-filed -- 输入框自动聚焦

插槽的使用 template #label

van-overlay的使用

van-filed 插槽的使用和van-switch

van-drop-down

van-list的列表加载

van-tab 中定义显示的title

（1）当需要显示每个tab的数量时，注意父调用子组件的方法，以及子组件将值传回父组件

设置van-collapse-item的title+van-collapse-item的右边箭头位置

van-filed -- 输入框自动聚焦

多个的情况

（注意查找元素的正确性，以及取值调用focus函数的时机）

插槽的使用 template #label

van-overlay的使用

如若想实现弹出面板且输入框自动聚焦，外层使用van-overlay，来定位定义面板内容的位置

van-filed 插槽的使用和van-switch

van-switch开关的是双向绑定的，不能赋值，赋值之后开关无效，且如若多组中只允许有一个则捕捉change事件，非本次操作的元素进行false赋值

页面上
<van-field
name="IsLeader"
label="是否领队"
class="user-filed1"
clickable
label-width="80"
placeholder="请填写"
>
<template #input>
<div class="cost-num">
<span>{{ item.IsLeader ? "是" : "否" }}</span>
</div>
</template>
<template #right-icon>
<div
style="width:3.5rem;display:flex;font-size:12rem;color:#969799;"
>
<van-switch
v-model="item.IsLeader"
size="30px"
@change="changeSwitchStatus(index)"
/>
</div>
</template>
</van-field>
change事件
changeSwitchStatus(outindex) {
let that = this;
for (let i = 0; i < that.participantList.length; i++) {
let item = that.participantList[i];
if (outindex == i) {
continue;
} else {
item.IsLeader = false;
}
}
},