fix: fix IconPicker reporting an error when using search if no icon is found (#6944)
* 修复未搜索图标时分页报错的问题 * 优化`IconPicker` 的分页逻辑,由total触发跳转到第一页,而不是用户控制
This commit is contained in:
@@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -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 };
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user