vant库使用遇到的情况

目录

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滚动）vant 自定义遮罩层van-overlay时局部滚动_vant lock-scroll_WYG_王雅格的博客-CSDN博客^v29^pc_relevant_default_base3&spm=1001.2101.3001.4242.1&utm_relevant_index=3

van-field如何限制数字输入范围

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;
        }
      }
    },

van-drop-down

样式的修改（一般样式修改不了都要使用>>>方式） 

van-list的列表加载

（1）当列表默认触底，就会触发分页加载函数，所以注意设置盒子的高度

（2）当该页面底部有固定的盒子时，则需要在列表底部设置一个差不多一样高度的盒子

列表的数据加载一定是loading和finished两个变量进行控制的，如若是父组件的值变化，子组件做出相应的动作，比如列表数据的加载，此时不仅仅需要将所有的数据进行一个初始化，还需要将变量也进行一个初始化，否则列表的数据不会加载，导致显示的不合适

修改van-list 自带的加载中提示的样式

van-popup，遮罩层太黑，原因是该弹窗需要放在最外层的盒子（即vuetemplate的最外层div盒子上）

van-轮播的按钮 add点击事件进行轮播

van-image的图片的样式问题

 van-uploade的使用

（1）注意转换为64进制（所选画布一定要具有一定的宽度，否则会转换成data： 空的），以及64进制的获取（因为是异步的）

（2）图片选取后不显示（原因先查看上传后是否有对应的64进制，再查看上传绑定的图片数组是否有进行初始化，且要初始化为数组才会显示）

（3）文件上传没有后缀

Vant 的 Calendar 日历组件 自定义日期区间minDate、maxDate_vant 日历_前端小程的博客-CSDN博客