mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-06 10:38:31 +08:00
refactor(components): [pagination/pager] switch to script-setup syntax (#7746)
* refactor(components): [pagination/pager] switch to script-setup syntax * fix(components): [pagination/pager] cast props to const Co-authored-by: metanas <matanas@pre-history.com>
This commit is contained in:
Anas Boudih
GitHub
parent
5bfa42cfed
commit
66bf5c1280
23
packages/components/pagination/src/components/pager.ts
Normal file
23
packages/components/pagination/src/components/pager.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { buildProps } from '@element-plus/utils'
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import type Pager from './pager.vue'
|
||||
|
||||
export const paginationPagerProps = buildProps({
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
pageCount: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
default: 7,
|
||||
},
|
||||
disabled: Boolean,
|
||||
} as const)
|
||||
|
||||
export type PaginationPagerProps = ExtractPropTypes<typeof paginationPagerProps>
|
||||
|
||||
export type PagerInstance = InstanceType<typeof Pager>
|
||||
@ -67,168 +67,118 @@
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, watchEffect } from 'vue'
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watchEffect } from 'vue'
|
||||
import { DArrowLeft, DArrowRight, MoreFilled } from '@element-plus/icons-vue'
|
||||
import { useNamespace } from '@element-plus/hooks'
|
||||
|
||||
const paginationPagerProps = {
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
pageCount: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
default: 7,
|
||||
},
|
||||
disabled: Boolean,
|
||||
} as const
|
||||
|
||||
export default defineComponent({
|
||||
import { paginationPagerProps } from './pager'
|
||||
defineOptions({
|
||||
name: 'ElPaginationPager',
|
||||
|
||||
components: {
|
||||
DArrowLeft,
|
||||
DArrowRight,
|
||||
MoreFilled,
|
||||
},
|
||||
props: paginationPagerProps,
|
||||
emits: ['change'],
|
||||
|
||||
setup(props, { emit }) {
|
||||
const nsPager = useNamespace('pager')
|
||||
const nsIcon = useNamespace('icon')
|
||||
|
||||
const showPrevMore = ref(false)
|
||||
const showNextMore = ref(false)
|
||||
const quickPrevHover = ref(false)
|
||||
const quickNextHover = ref(false)
|
||||
|
||||
const pagers = computed(() => {
|
||||
const pagerCount = props.pagerCount
|
||||
const halfPagerCount = (pagerCount - 1) / 2
|
||||
const currentPage = Number(props.currentPage)
|
||||
const pageCount = Number(props.pageCount)
|
||||
|
||||
let showPrevMore = false
|
||||
let showNextMore = false
|
||||
if (pageCount > pagerCount) {
|
||||
if (currentPage > pagerCount - halfPagerCount) {
|
||||
showPrevMore = true
|
||||
}
|
||||
if (currentPage < pageCount - halfPagerCount) {
|
||||
showNextMore = true
|
||||
}
|
||||
}
|
||||
const array: number[] = []
|
||||
if (showPrevMore && !showNextMore) {
|
||||
const startPage = pageCount - (pagerCount - 2)
|
||||
for (let i = startPage; i < pageCount; i++) {
|
||||
array.push(i)
|
||||
}
|
||||
} else if (!showPrevMore && showNextMore) {
|
||||
for (let i = 2; i < pagerCount; i++) {
|
||||
array.push(i)
|
||||
}
|
||||
} else if (showPrevMore && showNextMore) {
|
||||
const offset = Math.floor(pagerCount / 2) - 1
|
||||
for (let i = currentPage - offset; i <= currentPage + offset; i++) {
|
||||
array.push(i)
|
||||
}
|
||||
} else {
|
||||
for (let i = 2; i < pageCount; i++) {
|
||||
array.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
return array
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const halfPagerCount = (props.pagerCount - 1) / 2
|
||||
|
||||
showPrevMore.value = false
|
||||
showNextMore.value = false
|
||||
|
||||
if (props.pageCount > props.pagerCount) {
|
||||
if (props.currentPage > props.pagerCount - halfPagerCount) {
|
||||
showPrevMore.value = true
|
||||
}
|
||||
if (props.currentPage < props.pageCount - halfPagerCount) {
|
||||
showNextMore.value = true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function onMouseenter(direction: 'left' | 'right') {
|
||||
if (props.disabled) return
|
||||
if (direction === 'left') {
|
||||
quickPrevHover.value = true
|
||||
} else {
|
||||
quickNextHover.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function onEnter(e: UIEvent) {
|
||||
const target = e.target as HTMLElement
|
||||
if (
|
||||
target.tagName.toLowerCase() === 'li' &&
|
||||
Array.from(target.classList).includes('number')
|
||||
) {
|
||||
const newPage = Number(target.textContent)
|
||||
if (newPage !== props.currentPage) {
|
||||
emit('change', newPage)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onPagerClick(event: UIEvent) {
|
||||
const target = event.target as HTMLElement
|
||||
if (target.tagName.toLowerCase() === 'ul' || props.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
let newPage = Number(target.textContent)
|
||||
const pageCount = props.pageCount
|
||||
const currentPage = props.currentPage
|
||||
const pagerCountOffset = props.pagerCount - 2
|
||||
if (target.className.includes('more')) {
|
||||
if (target.className.includes('quickprev')) {
|
||||
newPage = currentPage - pagerCountOffset
|
||||
} else if (target.className.includes('quicknext')) {
|
||||
newPage = currentPage + pagerCountOffset
|
||||
}
|
||||
}
|
||||
if (!Number.isNaN(+newPage)) {
|
||||
if (newPage < 1) {
|
||||
newPage = 1
|
||||
}
|
||||
if (newPage > pageCount) {
|
||||
newPage = pageCount
|
||||
}
|
||||
}
|
||||
if (newPage !== currentPage) {
|
||||
emit('change', newPage)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
showPrevMore,
|
||||
showNextMore,
|
||||
quickPrevHover,
|
||||
quickNextHover,
|
||||
pagers,
|
||||
nsPager,
|
||||
nsIcon,
|
||||
|
||||
onMouseenter,
|
||||
onPagerClick,
|
||||
onEnter,
|
||||
}
|
||||
},
|
||||
})
|
||||
const props = defineProps(paginationPagerProps)
|
||||
const emit = defineEmits(['change'])
|
||||
const nsPager = useNamespace('pager')
|
||||
const nsIcon = useNamespace('icon')
|
||||
const showPrevMore = ref(false)
|
||||
const showNextMore = ref(false)
|
||||
const quickPrevHover = ref(false)
|
||||
const quickNextHover = ref(false)
|
||||
const pagers = computed(() => {
|
||||
const pagerCount = props.pagerCount
|
||||
const halfPagerCount = (pagerCount - 1) / 2
|
||||
const currentPage = Number(props.currentPage)
|
||||
const pageCount = Number(props.pageCount)
|
||||
let showPrevMore = false
|
||||
let showNextMore = false
|
||||
if (pageCount > pagerCount) {
|
||||
if (currentPage > pagerCount - halfPagerCount) {
|
||||
showPrevMore = true
|
||||
}
|
||||
if (currentPage < pageCount - halfPagerCount) {
|
||||
showNextMore = true
|
||||
}
|
||||
}
|
||||
const array: number[] = []
|
||||
if (showPrevMore && !showNextMore) {
|
||||
const startPage = pageCount - (pagerCount - 2)
|
||||
for (let i = startPage; i < pageCount; i++) {
|
||||
array.push(i)
|
||||
}
|
||||
} else if (!showPrevMore && showNextMore) {
|
||||
for (let i = 2; i < pagerCount; i++) {
|
||||
array.push(i)
|
||||
}
|
||||
} else if (showPrevMore && showNextMore) {
|
||||
const offset = Math.floor(pagerCount / 2) - 1
|
||||
for (let i = currentPage - offset; i <= currentPage + offset; i++) {
|
||||
array.push(i)
|
||||
}
|
||||
} else {
|
||||
for (let i = 2; i < pageCount; i++) {
|
||||
array.push(i)
|
||||
}
|
||||
}
|
||||
return array
|
||||
})
|
||||
watchEffect(() => {
|
||||
const halfPagerCount = (props.pagerCount - 1) / 2
|
||||
showPrevMore.value = false
|
||||
showNextMore.value = false
|
||||
if (props.pageCount! > props.pagerCount) {
|
||||
if (props.currentPage > props.pagerCount - halfPagerCount) {
|
||||
showPrevMore.value = true
|
||||
}
|
||||
if (props.currentPage < props.pageCount! - halfPagerCount) {
|
||||
showNextMore.value = true
|
||||
}
|
||||
}
|
||||
})
|
||||
function onMouseenter(direction: 'left' | 'right') {
|
||||
if (props.disabled) return
|
||||
if (direction === 'left') {
|
||||
quickPrevHover.value = true
|
||||
} else {
|
||||
quickNextHover.value = true
|
||||
}
|
||||
}
|
||||
function onEnter(e: UIEvent) {
|
||||
const target = e.target as HTMLElement
|
||||
if (
|
||||
target.tagName.toLowerCase() === 'li' &&
|
||||
Array.from(target.classList).includes('number')
|
||||
) {
|
||||
const newPage = Number(target.textContent)
|
||||
if (newPage !== props.currentPage) {
|
||||
emit('change', newPage)
|
||||
}
|
||||
}
|
||||
}
|
||||
function onPagerClick(event: UIEvent) {
|
||||
const target = event.target as HTMLElement
|
||||
if (target.tagName.toLowerCase() === 'ul' || props.disabled) {
|
||||
return
|
||||
}
|
||||
let newPage = Number(target.textContent)
|
||||
const pageCount = props.pageCount!
|
||||
const currentPage = props.currentPage
|
||||
const pagerCountOffset = props.pagerCount - 2
|
||||
if (target.className.includes('more')) {
|
||||
if (target.className.includes('quickprev')) {
|
||||
newPage = currentPage - pagerCountOffset
|
||||
} else if (target.className.includes('quicknext')) {
|
||||
newPage = currentPage + pagerCountOffset
|
||||
}
|
||||
}
|
||||
if (!Number.isNaN(+newPage)) {
|
||||
if (newPage < 1) {
|
||||
newPage = 1
|
||||
}
|
||||
if (newPage > pageCount) {
|
||||
newPage = pageCount
|
||||
}
|
||||
}
|
||||
if (newPage !== currentPage) {
|
||||
emit('change', newPage)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user