|
|
<template>
|
|
|
<view :class="`wd-pager ${customClass}`" v-if="!(hideIfOnePage && totalPageNum === 1)">
|
|
|
<view class="wd-pager__content">
|
|
|
<wd-button :plain="modelValue > 1" type="info" size="small" :disabled="modelValue <= 1" custom-class="wd-pager__nav" @click="sub">
|
|
|
<text v-if="!showIcon">{{ prevText }}</text>
|
|
|
<wd-icon
|
|
|
v-else
|
|
|
size="14px"
|
|
|
:custom-class="`wd-pager__left ${modelValue <= 1 ? 'wd-pager__nav--disabled' : 'wd-pager__nav--active'}`"
|
|
|
name="arrow-right"
|
|
|
></wd-icon>
|
|
|
</wd-button>
|
|
|
<view class="wd-pager__size">
|
|
|
<text class="wd-pager__current">{{ modelValue }}</text>
|
|
|
<text class="wd-pager__separator">/</text>
|
|
|
<text>{{ totalPageNum }}</text>
|
|
|
</view>
|
|
|
<wd-button
|
|
|
:plain="modelValue < totalPageNum"
|
|
|
type="info"
|
|
|
size="small"
|
|
|
:disabled="modelValue >= totalPageNum"
|
|
|
custom-class="wd-pager__nav"
|
|
|
@click="add"
|
|
|
>
|
|
|
<text v-if="!showIcon">{{ nextText }}</text>
|
|
|
<wd-icon
|
|
|
v-else
|
|
|
size="14px"
|
|
|
:custom-class="modelValue >= totalPageNum ? 'wd-pager__nav--disabled' : 'wd-pager__nav--active'"
|
|
|
name="arrow-right"
|
|
|
></wd-icon>
|
|
|
</wd-button>
|
|
|
</view>
|
|
|
<view class="wd-pager__message" v-if="showMessage">
|
|
|
<text>当前页：{{ modelValue }}，</text>
|
|
|
<text v-if="total">当前数据：{{ total }}，</text>
|
|
|
<text>分页大小：{{ pageSize }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
export default {
|
|
|
name: 'wd-pagination',
|
|
|
options: {
|
|
|
virtualHost: true,
|
|
|
addGlobalClass: true,
|
|
|
styleIsolation: 'shared'
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { ref, watch } from 'vue'
|
|
|
|
|
|
interface Props {
|
|
|
customClass?: string
|
|
|
modelValue: number // 当前页
|
|
|
totalPage?: number
|
|
|
showIcon?: boolean // 是否展示分页为Icon图标
|
|
|
showMessage?: boolean
|
|
|
total?: number
|
|
|
pageSize?: number
|
|
|
prevText?: string
|
|
|
nextText?: string
|
|
|
hideIfOnePage?: boolean
|
|
|
}
|
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
customClass: '',
|
|
|
totalPage: 1,
|
|
|
showIcon: false, // 是否展示分页为Icon图标
|
|
|
showMessage: false,
|
|
|
total: 0,
|
|
|
pageSize: 10, // 分页大小
|
|
|
prevText: '上一页',
|
|
|
nextText: '下一页',
|
|
|
hideIfOnePage: true
|
|
|
})
|
|
|
|
|
|
const totalPageNum = ref<number>(0) // 总页数
|
|
|
|
|
|
const emit = defineEmits(['change', 'update:modelValue'])
|
|
|
|
|
|
watch(
|
|
|
() => props.totalPage,
|
|
|
(newValue) => {
|
|
|
if (!totalPageNum.value && newValue) {
|
|
|
totalPageNum.value = newValue
|
|
|
}
|
|
|
},
|
|
|
{ immediate: true, deep: true }
|
|
|
)
|
|
|
|
|
|
watch(
|
|
|
() => props.total,
|
|
|
() => {
|
|
|
updateTotalPage()
|
|
|
},
|
|
|
{ immediate: true, deep: true }
|
|
|
)
|
|
|
|
|
|
function add() {
|
|
|
const { modelValue } = props
|
|
|
if (modelValue > totalPageNum.value - 1) {
|
|
|
return
|
|
|
}
|
|
|
emit('change', { value: modelValue + 1 })
|
|
|
emit('update:modelValue', modelValue + 1)
|
|
|
}
|
|
|
|
|
|
function sub() {
|
|
|
const { modelValue } = props
|
|
|
if (modelValue < 2) {
|
|
|
return
|
|
|
}
|
|
|
emit('change', { value: modelValue - 1 })
|
|
|
emit('update:modelValue', modelValue - 1)
|
|
|
}
|
|
|
|
|
|
function updateTotalPage() {
|
|
|
const { total, pageSize } = props
|
|
|
if (total) {
|
|
|
totalPageNum.value = Math.ceil(total / pageSize)
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import './index.scss';
|
|
|
</style>
|