vant4.0+vue3.0 遇到的那些坑

前端小老弟儿

于 2024-09-26 14:50:51 发布

阅读量187

点赞数 6

文章标签： javascript 前端开发语言 vue.js vue 前端框架

本文链接：https://blog.csdn.net/weixin_42994352/article/details/142555404

版权

vant的下拉菜单

van-dropdown-menu

这个问题主要是：

所有的下拉列表都在通过一个van-dropdown-menu 这个容器中
option属性是固定的，不能自定义
没有单独的标题，不想pc端那样，有个placeholder

 <van-dropdown-menu>
        <van-dropdown-item
          v-model="paramsObj.params.status"
          :options="listDataObject.runListData"
          @change="changeDropDown"
        />
        <van-dropdown-item
          v-model="paramsObj.params.jtype"
          :options="listDataObject.taskTypeArr"
          @change="changeDropJtype"
        />
        <van-dropdown-item
          v-model="paramsObj.params.owner"
          :options="listDataObject.ownerList"
          @change="changeDropOwner"
        />
        <van-dropdown-item
          v-model="paramsObj.params.cluster"
          :options="listDataObject.clusterArr"
          @change="changeDropCluster"
        />
      </van-dropdown-menu>

vant下拉刷新上提加载

其实是list+下拉刷新的组合

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-listv-model:loading="loading":finished="finished"finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onLoad = () => {
  paramsObj.params.page = paramsObj.params.page + 1;
  if (refreshing.value) {
    taskListMessage.taskListArr = [];
    refreshing.value = false;
  }
  getTaskList();
  loading.value = false;
};
const onRefresh = () => {
  finished.value = false;
  paramsObj.params.page = 0
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

vant选择器

vant4.0+vue3.0 实现van-picker 初始化时默认选中指定选项

[图片]

vant4和 vant3的区别：

vant3.0 实现选中默认选项 defaultIndex
直接配置这个属性就可以

vant4.0 取消了这个属性，用的是这个方法：

const selectedValues = ref(['Wenzhou']) 这个selectedValues 的值必须是数组必须是v-model这种写法，不能改成:value

最终实现代码：

<van-picker
              :columns-field-names="{ text: 'projectName', value: 'projectId' }"
              cancel-button-text=""
              :columns="listDataObject.projectListArr"
              @confirm="onConfirmProject"
              v-model="listDataObject.selectedValue"
            />
            
            onMounted(async () => {
              listDataObject.selectedValue[0] = myLocalStorage.getItem("projectMessage").projectId

  
        });