blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore(Pagination): use tsx

Browse Source
This commit is contained in:
chenjiahan 2020-10-10 17:49:10 +08:00
parent d86a0900e1
commit 99d42852e5
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/pagination/index.js → src/pagination/index.tsx
View File

@ -4,7 +4,17 @@ import { computed, watch } from 'vue';
const [createComponent, bem, t] = createNamespace('pagination'); const [createComponent, bem, t] = createNamespace('pagination');
function makePage(number, text, active) { type PageItem = {
text: string | number;
number: number;
active?: boolean;
};
function makePage(
number: number,
text: string | number,
active?: boolean
): PageItem {
return { number, text, active }; return { number, text, active };
} }
@ -44,18 +54,18 @@ export default createComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const count = computed(() => { const count = computed(() => {
const { pageCount, totalItems, itemsPerPage } = props; const { pageCount, totalItems, itemsPerPage } = props;
const count = pageCount || Math.ceil(totalItems / itemsPerPage); const count = +pageCount || Math.ceil(+totalItems / +itemsPerPage);
return Math.max(1, count); return Math.max(1, count);
}); });
const pages = computed(() => { const pages = computed(() => {
const pages = []; const items: PageItem[] = [];
const pageCount = count.value; const pageCount = count.value;
const showPageSize = +props.showPageSize; const showPageSize = +props.showPageSize;
const { modelValue, forceEllipses } = props; const { modelValue, forceEllipses } = props;
if (props.mode !== 'multi') { if (props.mode !== 'multi') {
return pages; return items;
} }
// Default page limits // Default page limits
@ -79,26 +89,26 @@ export default createComponent({
// Add page number links // Add page number links
for (let number = startPage; number <= endPage; number++) { for (let number = startPage; number <= endPage; number++) {
const page = makePage(number, number, number === modelValue); const page = makePage(number, number, number === modelValue);
pages.push(page); items.push(page);
} }
// Add links to move between page sets // Add links to move between page sets
if (isMaxSized && showPageSize > 0 && forceEllipses) { if (isMaxSized && showPageSize > 0 && forceEllipses) {
if (startPage > 1) { if (startPage > 1) {
const prevPages = makePage(startPage - 1, '...'); const prevPages = makePage(startPage - 1, '...');
pages.unshift(prevPages); items.unshift(prevPages);
} }
if (endPage < pageCount) { if (endPage < pageCount) {
const nextPages = makePage(endPage + 1, '...'); const nextPages = makePage(endPage + 1, '...');
pages.push(nextPages); items.push(nextPages);
} }
} }
return pages; return items;
}); });
const select = (page, emitChange) => { const select = (page: number, emitChange?: boolean) => {
page = Math.min(count.value, Math.max(1, page)); page = Math.min(count.value, Math.max(1, page));
if (props.modelValue !== page) { if (props.modelValue !== page) {
@ -134,7 +144,7 @@ export default createComponent({
const value = props.modelValue; const value = props.modelValue;
const simple = props.mode !== 'multi'; const simple = props.mode !== 'multi';
const onSelect = (value) => () => { const onSelect = (value: number) => () => {
select(value, true); select(value, true);
}; };