移动端Vant-list的二次封装，查询参数重置

Vant-list的二次封装

场景：在写项目需求的时间，移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜刮和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便，以是封了一层。
二次封装代码

1. <template>
2.   <van-list
3.     v-model:loading="loading"
4.     :finished="finished"
5.     @load="handleLoad"
6.   >
7.     <div :class="listClass">
8.       <slot
9.         v-for="item in listData"
10.         :key="item.id"
11.         v-bind="item"
12.       />
13.     </div>
14.     <div v-if="loadOnce && !listData?.length" class="layout-list__empty">暂无数据</div>
15.   </van-list>
16. </template>
18. <script setup>
19. const props = defineProps({
20.   request: {},
21.   listClass: {},
22.   pageSize: {
23.     type: Number,
24.     default: 10,
25.   },
26. });
28. const listData = ref([]);
29. const loading = ref(false);
30. const finished = ref(false);
31. const loadOnce = ref(false);
33. let pageNum = 0;
34. let requesting = false;
36. const handleLoad = async () => {
37.   if (requesting || unref(finished)) { return }
38.   requesting = true;
39.   ++pageNum;
40.   const formContent = {
41.     page: pageNum,
42.     pageSize: props.pageSize,
43.   };
44.   const { total, data } = await props.request(formContent);
45.   unref(listData).push(...data);
46.   loadOnce.value = true;
47.   if (!unref(listData).length || unref(listData).length >= total) {
48.     finished.value = true;
49.   }
50.   loading.value = false;
51.   requesting = false;
52. };
54. const resetSearch = () => {
55.   listData.value = [];
56.   loading.value = false;
57.   finished.value = false;
58.   loadOnce.value = false;
59.   pageNum = 0;
60.   requesting = false;
61.   handleLoad();
62. };
64. defineExpose({
65.   resetSearch,
66. });
67. </script>
69. <style lang="scss" scoped>
70. .layout-list {
71.   &__empty {
72.     padding: 12px 0;
73.     color: #666;
74.     text-align: center;
75.   }
76. }
77. </style>

复制代码

组件利用

1. <mb-search
2.         @updated-search="updatedSearch"
3. />
4. <mb-list
5.         ref="mbListRef"
6.         v-slot="item"
7.         :request="getList(() => (loadForm))"
8. >
9.         <div>内容</div>
10. </mb-list>
12. <script setup>
13. import { getList } from '@/services/activiti/instance';
15. defineProps({
16.   selectTypeList: {
17.     type: Array,
18.     default: () => [],
19.   },
20. });
21. const mbListRef = ref();
23. const loadForm = ref({
24.   title: '',
25.   defName: '',
26.   instStatus: 'running',
27. });
29. function updatedSearch(title) {
30.   loadForm.value.title = title;
31.   mbListRef.value.resetSearch();
32. }
34. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金