龙岩网站定制,海北州公司网站建设,制作网站协议,腾讯企业qq官网Vant-list的二次封装
场景#xff1a;在写项目需求的时候#xff0c;移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜索和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便#xff0c;所以封了一层。
二次封装代码
template…Vant-list的二次封装
场景在写项目需求的时候移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜索和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便所以封了一层。
二次封装代码
templatevan-listv-model:loadingloading:finishedfinishedloadhandleLoaddiv :classlistClassslotv-foritem in listData:keyitem.idv-binditem//divdiv v-ifloadOnce !listData?.length classlayout-list__empty暂无数据/div/van-list
/templatescript setup
const props defineProps({request: {},listClass: {},pageSize: {type: Number,default: 10,},
});const listData ref([]);
const loading ref(false);
const finished ref(false);
const loadOnce ref(false);let pageNum 0;
let requesting false;const handleLoad async () {if (requesting || unref(finished)) { return }requesting true;pageNum;const formContent {page: pageNum,pageSize: props.pageSize,};const { total, data } await props.request(formContent);unref(listData).push(...data);loadOnce.value true;if (!unref(listData).length || unref(listData).length total) {finished.value true;}loading.value false;requesting false;
};const resetSearch () {listData.value [];loading.value false;finished.value false;loadOnce.value false;pageNum 0;requesting false;handleLoad();
};defineExpose({resetSearch,
});
/scriptstyle langscss scoped
.layout-list {__empty {padding: 12px 0;color: #666;text-align: center;}
}
/style
组件使用
mb-searchupdated-searchupdatedSearch
/
mb-listrefmbListRefv-slotitem:requestgetList(() (loadForm))
div内容/div
/mb-listscript setup
import { getList } from /services/activiti/instance;defineProps({selectTypeList: {type: Array,default: () [],},
});
const mbListRef ref();const loadForm ref({title: ,defName: ,instStatus: running,
});function updatedSearch(title) {loadForm.value.title title;mbListRef.value.resetSearch();
}/script
