87 lines
2.1 KiB
Vue
87 lines
2.1 KiB
Vue
<script lang="tsx">
|
|
import { onKeyStroke } from "@vueuse/core"
|
|
import type { PropType } from "vue";
|
|
import { computed, defineComponent, onUnmounted } from "vue"
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
page: {
|
|
type: Number,
|
|
default: () => 0
|
|
},
|
|
totalPage: {
|
|
type: Number,
|
|
default: () => 0
|
|
},
|
|
minPage: {
|
|
type: Number,
|
|
default: () => 1
|
|
},
|
|
parent: {
|
|
type: Object as PropType<HTMLElement>,
|
|
default: () => document
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const totalPage = computed(() => (Number.isNaN(props.totalPage) ? props.minPage : props.totalPage))
|
|
|
|
const page = computed({
|
|
get() {
|
|
if (Number.isNaN(props.page)) {
|
|
return props.minPage
|
|
}
|
|
return Math.max(Math.min(props.page, totalPage.value), props.minPage)
|
|
},
|
|
set(val) {
|
|
emit("update:page", val)
|
|
}
|
|
})
|
|
|
|
|
|
function prev(e: Event) {
|
|
e.preventDefault()
|
|
if (page.value > 1 && !props.disabled) {
|
|
page.value--
|
|
emit("prev")
|
|
emit("change", page.value)
|
|
}
|
|
}
|
|
|
|
function next(e: Event) {
|
|
e.preventDefault()
|
|
if (page.value < totalPage.value && !props.disabled) {
|
|
page.value = page.value + 1
|
|
emit("next")
|
|
emit("change", page.value)
|
|
}
|
|
}
|
|
|
|
const removePrev = onKeyStroke(["F1", "PageUp"], prev, { target: props.parent })
|
|
const removeNext = onKeyStroke(["F2", "PageDown"], next, { target: props.parent })
|
|
|
|
onUnmounted(() => {
|
|
removePrev()
|
|
removeNext()
|
|
})
|
|
|
|
return () => {
|
|
return (
|
|
<div class="flex space-x-1 h-10 w-full items-center justify-center">
|
|
<calc-button icon="prev" disabled={page.value <= 1 || props.disabled} onClick={prev}></calc-button>
|
|
<span class="text-center w-8">
|
|
{page.value}/{totalPage.value}
|
|
</span>
|
|
<calc-button icon="next" disabled={page.value >= totalPage.value || props.disabled} onClick={next}></calc-button>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss"></style>
|