94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
<template>
|
||
<view class="u-pagination" :style="$u.toStyle(customStyle)" :class="customClass">
|
||
<u-button
|
||
custom-class="custom-class"
|
||
shape="circle"
|
||
type="info"
|
||
size="medium"
|
||
:throttle-time="0"
|
||
:disabled="current <= 1"
|
||
@click="handleChange('prev')"
|
||
>
|
||
<u-icon v-if="showIcon" :name="prevIcon"></u-icon>
|
||
<text v-else>{{ prevText }}</text>
|
||
</u-button>
|
||
<view class="u-pagination-text">
|
||
<slot>
|
||
<u-text type="primary" :text="current"></u-text>
|
||
<text> / </text>
|
||
<text>{{ totalPages }}</text>
|
||
</slot>
|
||
</view>
|
||
<u-button
|
||
custom-class="custom-class"
|
||
shape="circle"
|
||
type="info"
|
||
size="medium"
|
||
:throttle-time="0"
|
||
:disabled="current >= totalPages"
|
||
@click="handleChange('next')"
|
||
>
|
||
<u-icon v-if="showIcon" :name="nextIcon"></u-icon>
|
||
<text v-else>{{ nextText }}</text>
|
||
</u-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-pagination',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import { type PaginationEmits, PaginationProps } from './types';
|
||
import type { PaginationDirection } from '../../types/global';
|
||
import { $u } from '../../';
|
||
|
||
const props = defineProps(PaginationProps);
|
||
const emit = defineEmits<PaginationEmits>();
|
||
|
||
const current = defineModel({ type: Number, default: 1 });
|
||
|
||
// 自动计算总页数
|
||
const totalPages = computed(() => {
|
||
const size = props.pageSize || 10;
|
||
return Math.ceil((props.total || 0) / size);
|
||
});
|
||
|
||
// 切换分页
|
||
function handleChange(type: PaginationDirection) {
|
||
// 先计算新值，确保获取到的是更新后的值
|
||
const newCurrent = type === 'prev' ? current.value - 1 : current.value + 1;
|
||
|
||
// 更新 current 值
|
||
current.value = newCurrent;
|
||
|
||
// current为当前页，type值为：next/prev，表示点击的是上一页还是下一页
|
||
// 使用计算后的新值，而不是 current.value，避免异步更新导致的值不同步问题
|
||
emit('change', { type, current: newCurrent });
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.u-pagination {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
:deep(.custom-class) {
|
||
margin: 0;
|
||
padding: 0 30rpx;
|
||
min-width: 120rpx;
|
||
}
|
||
}
|
||
</style>
|