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