Browse Source

fix: fix `IconPicker` reporting an error when using search if no icon is found (#6944)

* 修复未搜索图标时分页报错的问题
 * 优化`IconPicker` 的分页逻辑,由total触发跳转到第一页,而不是用户控制
pull/6937/head^2
ming4762 2 months ago
committed by GitHub
parent
commit
a810cd0b48
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 10
      packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
  2. 26
      packages/effects/hooks/src/use-pagination.ts

10
packages/effects/common-ui/src/components/icon-picker/icon-picker.vue

@ -71,17 +71,10 @@ const modelValue = defineModel({ default: '', type: String });
const visible = ref(false); const visible = ref(false);
const currentSelect = ref(''); const currentSelect = ref('');
const currentPage = ref(1);
const keyword = ref(''); const keyword = ref('');
const keywordDebounce = refDebounced(keyword, 300); const keywordDebounce = refDebounced(keyword, 300);
const innerIcons = ref<string[]>([]); const innerIcons = ref<string[]>([]);
/* 当检索关键词变化时,重置分页 */
watch(keywordDebounce, () => {
currentPage.value = 1;
setCurrentPage(1);
});
watchDebounced( watchDebounced(
() => props.prefix, () => props.prefix,
async (prefix) => { async (prefix) => {
@ -122,7 +115,7 @@ const showList = computed(() => {
); );
}); });
const { paginationList, total, setCurrentPage } = usePagination( const { paginationList, total, setCurrentPage, currentPage } = usePagination(
showList, showList,
props.pageSize, props.pageSize,
); );
@ -145,7 +138,6 @@ const handleClick = (icon: string) => {
}; };
const handlePageChange = (page: number) => { const handlePageChange = (page: number) => {
currentPage.value = page;
setCurrentPage(page); setCurrentPage(page);
}; };

26
packages/effects/hooks/src/use-pagination.ts

@ -1,6 +1,6 @@
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { computed, ref, unref } from 'vue'; import { computed, ref, unref, watch } from 'vue';
/** /**
* Paginates an array of items * Paginates an array of items
@ -22,7 +22,11 @@ function pagination<T = any>(list: T[], pageNo: number, pageSize: number): T[] {
return ret; return ret;
} }
export function usePagination<T = any>(list: Ref<T[]>, pageSize: number) { export function usePagination<T = any>(
list: Ref<T[]>,
pageSize: number,
totalChangeToFirstPage = true,
) {
const currentPage = ref(1); const currentPage = ref(1);
const pageSizeRef = ref(pageSize); const pageSizeRef = ref(pageSize);
@ -38,11 +42,21 @@ export function usePagination<T = any>(list: Ref<T[]>, pageSize: number) {
return unref(list).length; return unref(list).length;
}); });
if (totalChangeToFirstPage) {
watch(total, () => {
setCurrentPage(1);
});
}
function setCurrentPage(page: number) { function setCurrentPage(page: number) {
if (page < 1 || page > unref(totalPages)) { if (page === 1 && unref(totalPages) === 0) {
throw new Error('Invalid page number'); currentPage.value = 1;
} else {
if (page < 1 || page > unref(totalPages)) {
throw new Error('Invalid page number');
}
currentPage.value = page;
} }
currentPage.value = page;
} }
function setPageSize(pageSize: number) { function setPageSize(pageSize: number) {
@ -54,5 +68,5 @@ export function usePagination<T = any>(list: Ref<T[]>, pageSize: number) {
currentPage.value = 1; currentPage.value = 1;
} }
return { setCurrentPage, total, setPageSize, paginationList }; return { setCurrentPage, total, setPageSize, paginationList, currentPage };
} }

Loading…
Cancel
Save