-
-
{{ internalPageSize }}
-
{{ $t('ui.page.page') }}
+
+
+
-
+
{{ internalPageSize }}
+
{{ t('ui.page.page') }}
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
{{ $t('ui.page.loadingTotals') }}
+
-
-
{{ $t('ui.page.total') }}
-
- {{ customTotal ? totalText : internalTotal }}
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- {{ $parent.$slots.default() }}
-
-
- {{ $parent.$slots.default }}
+
+
+
+
+ {{ $parent.$slots.default() }}
+
+
+ {{ $parent.$slots.default }}
+
-
-
+
+
@@ -180,7 +191,7 @@ import Pager from '@opentiny/vue-pager-item'
import Popover from '@opentiny/vue-popover'
import Loading from '@opentiny/vue-loading'
import { t } from '@opentiny/vue-locale'
-import { defineComponent, $props } from '@opentiny/vue-common'
+import { defineComponent, $props, hooks } from '@opentiny/vue-common'
import { IconChevronDown, IconChevronLeft, IconChevronRight } from '@opentiny/vue-icon'
import { emitEvent } from '@opentiny/utils'
@@ -193,6 +204,17 @@ export default defineComponent({
TinyIconChevronRight: IconChevronRight(),
TinyIconChevronDown: IconChevronDown()
},
+ emits: [
+ 'update:currentPage',
+ 'update:pageSize',
+ 'size-change',
+ 'page-change',
+ 'before-change',
+ 'before-page-change',
+ 'current-change',
+ 'prev-click',
+ 'next-click'
+ ],
props: {
...$props,
accurateJumper: {
@@ -247,63 +269,86 @@ export default defineComponent({
total: Number,
changeCompat: Boolean
},
- data() {
- return {
- internalCurrentPage: 1,
- internalPageSize: 0,
- lastEmittedPage: -1,
- userChangePageSize: false,
- internalTotal: this.total,
- showSizes: false,
- jumperValue: 1 as number
- }
- },
- methods: {
- // 国际化方法
- $t(key: string): string {
- return t(key)
- },
- // 跳转器相关方法
- handleJumperFocus(e: FocusEvent) {
+ setup(props, { emit }) {
+ const { ref, reactive, computed, watch, onMounted, nextTick } = hooks
+ const sizesList = ref<{ hide: () => void } | null>(null)
+
+ // 响应式数据
+ const state = reactive({
+ internalCurrentPage: 1, // 内部当前页码
+ internalPageSize: 0, // 内部每页条数
+ lastEmittedPage: -1, // 最后触发的页码
+ userChangePageSize: false, // 用户是否改变了每页条数
+ internalTotal: props.total, // 内部总条数
+ showSizes: false, // 是否显示每页条数选择器
+ jumperValue: 1 as number // 跳转器输入值
+ })
+
+ /**
+ * 处理跳转器输入框获得焦点事件
+ * @param e - 焦点事件对象
+ */
+ const handleJumperFocus = (e: FocusEvent) => {
const target = e.target as HTMLInputElement
- this.jumperValue = Number(target.value)
- },
- handleJumperInput(e: Event) {
+ state.jumperValue = Number(target.value)
+ }
+
+ /**
+ * 处理跳转器输入事件
+ * @param e - 输入事件对象
+ * 确保输入值为有效的数字
+ */
+ const handleJumperInput = (e: Event) => {
const target = e.target as HTMLInputElement
const value = String(target.value)
if (!value) {
- this.jumperValue = 1
+ state.jumperValue = 1
} else if (/^\d+$/.test(value)) {
- this.jumperValue = Number(value) || 1
+ state.jumperValue = Number(value) || 1
}
- target.value = String(this.jumperValue)
- },
- handleJumperChange() {
- this.parseJumperValue()
+ target.value = String(state.jumperValue)
+ }
+
+ /**
+ * 处理跳转器值变化事件
+ * 在值变化时进行验证并触发页面跳转
+ */
+ const handleJumperChange = () => {
+ parseJumperValue()
const callback = () => {
- this.handleJumperClick()
+ handleJumperClick()
}
const rollback = () => {
- this.jumperValue = this.internalCurrentPage
+ state.jumperValue = state.internalCurrentPage
}
- const newPage = this.jumperValue
- const currentPage = this.internalCurrentPage
+ const newPage = state.jumperValue
+ const currentPage = state.internalCurrentPage
- if (this.isBeforePageChange && newPage !== currentPage) {
+ if (props.isBeforePageChange && newPage !== currentPage) {
const params = { newPage, currentPage, callback, rollback }
- this.beforePagerChangeHandler(params)
+ beforePagerChangeHandler(params)
} else {
callback()
}
- },
- handleJumperClick() {
- if (!this.canJumperGo()) return
- this.internalCurrentPage = this.getValidCurrentPage(Number(this.jumperValue))
- this.emitChange()
- },
- parseJumperValue() {
+ }
+
+ /**
+ * 处理跳转器点击事件
+ * 验证并执行页面跳转
+ */
+ const handleJumperClick = () => {
+ if (!canJumperGo()) return
+ state.internalCurrentPage = getValidCurrentPage(Number(state.jumperValue))
+ emitChange()
+ }
+
+ /**
+ * 解析跳转器输入值
+ * 确保输入值在有效范围内
+ */
+ const parseJumperValue = () => {
let value = Number(
- String(this.jumperValue)
+ String(state.jumperValue)
.split(/[^0-9-+.]/)
.join('')
)
@@ -314,65 +359,76 @@ export default defineComponent({
value = Number(value.toFixed(0))
- if (this.internalPageCount) {
- if (value >= this.internalPageCount) {
- this.jumperValue = this.internalPageCount
+ if (internalPageCount.value) {
+ if (value >= internalPageCount.value) {
+ state.jumperValue = internalPageCount.value
} else if (value <= 1) {
- this.jumperValue = 1
+ state.jumperValue = 1
} else {
- this.jumperValue = value
+ state.jumperValue = value
}
}
- },
+ }
- // 每页条数选择器相关方法
- handleSizeChange(val: number) {
- if (val !== this.internalPageSize) {
+ /**
+ * 处理每页条数变化事件
+ * @param val - 新的每页条数值
+ */
+ const handleSizeChange = (val: number) => {
+ if (val !== state.internalPageSize) {
const callback = () => {
- if (!this.beforeChangeHandler()) {
+ if (!beforeChangeHandler()) {
return false
}
- this.internalPageSize = val
- this.userChangePageSize = true
- this.showSizes = false
- this.$emit('update:pageSize', val)
- this.$emit('size-change', val)
- this.$emit('page-change', {
- currentPage: this.internalCurrentPage,
+ state.internalPageSize = val
+ state.userChangePageSize = true
+ state.showSizes = false
+ emit('update:pageSize', val)
+ emit('size-change', val)
+ emit('page-change', {
+ currentPage: state.internalCurrentPage,
pageSize: val,
- total: this.internalTotal
+ total: state.internalTotal
})
- if (this.$refs.sizesList) {
- ;(this.$refs.sizesList as any).state.showPopper = false
+ if (sizesList.value) {
+ sizesList.value.hide()
}
}
- if (this.isBeforePageChange) {
+ if (props.isBeforePageChange) {
const newPageSize = val
- const currentPageSize = this.internalPageSize
+ const currentPageSize = state.internalPageSize
const params = { newPageSize, currentPageSize, callback }
- this.beforeSizeChangeHandler(params)
+ beforeSizeChangeHandler(params)
} else {
callback()
}
}
- },
+ }
- // 其他方法保持不变
- canJumperGo() {
- const inputValue = Number(this.jumperValue || 0)
- const currentPage = Number(this.internalCurrentPage || 0)
- return this.accurateJumper ? inputValue !== currentPage : true
- },
- beforeSizeChangeHandler(params: any) {
+ /**
+ * 检查跳转器是否可以执行跳转
+ * @returns {boolean} 是否可以跳转
+ */
+ const canJumperGo = () => {
+ const inputValue = Number(state.jumperValue || 0)
+ const currentPage = Number(state.internalCurrentPage || 0)
+ return props.accurateJumper ? inputValue !== currentPage : true
+ }
+
+ /**
+ * 处理每页条数变化前的钩子函数
+ * @param params - 包含新页码、当前页码和回调函数的参数对象
+ */
+ const beforeSizeChangeHandler = (params: any) => {
const { newPageSize, currentPageSize, callback } = params as {
newPageSize: number
currentPageSize: number
callback: () => void
}
const newPage = 1
- const currentPage = this.internalCurrentPage
+ const currentPage = state.internalCurrentPage
const temp = {
newPage,
newPageSize,
@@ -381,17 +437,22 @@ export default defineComponent({
callback
}
- this.$emit('before-page-change', temp)
- },
- beforePagerChangeHandler(params: any) {
+ emit('before-page-change', temp)
+ }
+
+ /**
+ * 处理页码变化前的钩子函数
+ * @param params - 包含新页码、当前页码和回调函数的参数对象
+ */
+ const beforePagerChangeHandler = (params: any) => {
const { newPage, currentPage, callback, rollback } = params as {
newPage: number
currentPage: number
callback: () => void
rollback?: () => void
}
- const newPageSize = this.internalPageSize
- const currentPageSize = this.internalPageSize
+ const newPageSize = state.internalPageSize
+ const currentPageSize = state.internalPageSize
const temp = {
newPage,
newPageSize,
@@ -401,17 +462,22 @@ export default defineComponent({
rollback
}
- this.$emit('before-page-change', temp)
- },
- beforeJumperChangeHandler(params: any) {
+ emit('before-page-change', temp)
+ }
+
+ /**
+ * 处理跳转器变化前的钩子函数
+ * @param params - 包含新页码、当前页码和回调函数的参数对象
+ */
+ const beforeJumperChangeHandler = (params: any) => {
const { newPage, currentPage, callback, rollback } = params as {
newPage: number
currentPage: number
callback: () => void
rollback?: () => void
}
- const newPageSize = this.internalPageSize
- const currentPageSize = this.internalPageSize
+ const newPageSize = state.internalPageSize
+ const currentPageSize = state.internalPageSize
const temp = {
newPage,
newPageSize,
@@ -421,77 +487,114 @@ export default defineComponent({
rollback
}
- this.$emit('before-page-change', temp)
- },
- copyEmit(...args: any[]) {
- ;(this.$emit as (...args: any[]) => void)(...args)
- },
- beforeChangeHandler(val = -1) {
- return emitEvent(this.copyEmit as (...args: any[]) => void, 'before-change', this.internalCurrentPage, this, val)
- },
- handleCurrentChange(val: number) {
- if (!this.beforeChangeHandler(val)) {
+ emit('before-page-change', temp)
+ }
+
+ /**
+ * 复制并触发事件
+ * @param args - 事件参数数组
+ */
+ const copyEmit = (...args: any[]) => {
+ emit(args[0], ...args.slice(1))
+ }
+
+ /**
+ * 处理变化前的钩子函数
+ * @param val - 变化值
+ * @returns {boolean} 是否允许变化
+ */
+ const beforeChangeHandler = (val = -1) => {
+ return emitEvent(copyEmit, 'before-change', state.internalCurrentPage, null, val)
+ }
+
+ /**
+ * 处理当前页码变化事件
+ * @param val - 新的页码值
+ * @returns {boolean} 是否成功改变页码
+ */
+ const handleCurrentChange = (val: number) => {
+ if (!beforeChangeHandler(val)) {
return false
}
- this.internalCurrentPage = this.getValidCurrentPage(Number(val))
- this.userChangePageSize = true
- this.emitChange()
- },
- prev() {
+ state.internalCurrentPage = getValidCurrentPage(Number(val))
+ state.userChangePageSize = true
+ emitChange()
+ }
+
+ /**
+ * 处理上一页按钮点击事件
+ */
+ const prev = () => {
const callback = () => {
- if (this.disabled || !this.beforeChangeHandler(this.internalCurrentPage - 1)) {
+ if (props.disabled || !beforeChangeHandler(state.internalCurrentPage - 1)) {
return false
}
- const newVal = this.internalCurrentPage - 1
+ const newVal = state.internalCurrentPage - 1
- this.internalCurrentPage = this.getValidCurrentPage(newVal)
- this.$emit('prev-click', this.internalCurrentPage)
- this.emitChange()
+ state.internalCurrentPage = getValidCurrentPage(newVal)
+ emit('prev-click', state.internalCurrentPage)
+ emitChange()
}
- if (this.isBeforePageChange) {
- const newPage = this.internalCurrentPage - 1
- const temp = this.buildBeforePageChangeParam({ newPage, callback })
+ if (props.isBeforePageChange) {
+ const newPage = state.internalCurrentPage - 1
+ const temp = buildBeforePageChangeParam({ newPage, callback })
- this.$emit('before-page-change', temp)
+ emit('before-page-change', temp)
} else {
callback()
}
- },
- next() {
+ }
+
+ /**
+ * 处理下一页按钮点击事件
+ */
+ const next = () => {
const callback = () => {
- if (this.disabled || !this.beforeChangeHandler(this.internalCurrentPage + 1)) {
+ if (props.disabled || !beforeChangeHandler(state.internalCurrentPage + 1)) {
return false
}
- const newVal = this.internalCurrentPage + 1
+ const newVal = state.internalCurrentPage + 1
- this.internalCurrentPage = this.getValidCurrentPage(newVal)
- this.$emit('next-click', this.internalCurrentPage)
- this.emitChange()
+ state.internalCurrentPage = getValidCurrentPage(newVal)
+ emit('next-click', state.internalCurrentPage)
+ emitChange()
}
- if (this.isBeforePageChange) {
- const newPage = this.internalCurrentPage + 1
- const temp = this.buildBeforePageChangeParam({ newPage, callback })
+ if (props.isBeforePageChange) {
+ const newPage = state.internalCurrentPage + 1
+ const temp = buildBeforePageChangeParam({ newPage, callback })
- this.$emit('before-page-change', temp)
+ emit('before-page-change', temp)
} else {
callback()
}
- },
- buildBeforePageChangeParam(param: any) {
- const currentPage = this.internalCurrentPage
- const newPageSize = this.internalPageSize
- const currentPageSize = this.internalPageSize
+ }
+
+ /**
+ * 构建页码变化前的参数对象
+ * @param param - 包含新页码和回调函数的参数对象
+ * @returns {Object} 完整的参数对象
+ */
+ const buildBeforePageChangeParam = (param: any) => {
+ const currentPage = state.internalCurrentPage
+ const newPageSize = state.internalPageSize
+ const currentPageSize = state.internalPageSize
return Object.assign({ currentPage, newPageSize, currentPageSize }, param)
- },
- getValidCurrentPage(val: number) {
+ }
+
+ /**
+ * 获取有效的当前页码
+ * @param val - 输入的页码值
+ * @returns {number} 有效的页码值
+ */
+ const getValidCurrentPage = (val: number) => {
val = parseInt(String(val), 10)
- const hasPageCount = typeof this.internalPageCount === 'number'
+ const hasPageCount = typeof internalPageCount.value === 'number'
let resetVal
if (!hasPageCount) {
@@ -501,8 +604,8 @@ export default defineComponent({
} else {
if (val < 1) {
resetVal = 1
- } else if (this.internalPageCount && val > this.internalPageCount) {
- resetVal = this.internalPageCount
+ } else if (internalPageCount.value && val > internalPageCount.value) {
+ resetVal = internalPageCount.value
}
}
@@ -513,31 +616,44 @@ export default defineComponent({
}
return resetVal === undefined ? val : resetVal
- },
- emitChange() {
- this.$nextTick(() => {
- if (this.internalCurrentPage !== this.lastEmittedPage || this.userChangePageSize) {
- this.$emit('current-change', this.internalCurrentPage)
- this.$emit('update:current-page', this.internalCurrentPage)
- this.$emit('page-change', {
- currentPage: this.internalCurrentPage,
- pageSize: this.internalPageSize,
- total: this.internalTotal
+ }
+
+ /**
+ * 触发页码变化事件
+ */
+ const emitChange = () => {
+ nextTick(() => {
+ if (state.internalCurrentPage !== state.lastEmittedPage || state.userChangePageSize) {
+ emit('current-change', state.internalCurrentPage)
+ emit('update:currentPage', state.internalCurrentPage)
+ emit('page-change', {
+ currentPage: state.internalCurrentPage,
+ pageSize: state.internalPageSize,
+ total: state.internalTotal
})
- this.lastEmittedPage = this.internalCurrentPage
- this.userChangePageSize = false
+ state.lastEmittedPage = state.internalCurrentPage
+ state.userChangePageSize = false
}
})
- },
- setTotal(val: number) {
- this.internalTotal = val
}
- },
- computed: {
- totalText() {
- if (typeof this.customTotal === 'string') return this.customTotal
- const totals = parseInt(String(this.total || 0))
+ /**
+ * 设置总条数
+ * @param val - 新的总条数值
+ */
+ const setTotal = (val: number) => {
+ state.internalTotal = val
+ }
+
+ // 计算属性
+ /**
+ * 计算总条数文本
+ * 根据总条数的大小返回不同的显示文本
+ */
+ const totalText = computed(() => {
+ if (typeof props.customTotal === 'string') return props.customTotal
+
+ const totals = parseInt(String(props.total || 0))
if (isNaN(totals)) return 0
@@ -554,77 +670,131 @@ export default defineComponent({
} else {
return t('ui.page.tenMillion')
}
- },
- internalPageCount() {
- if (typeof this.internalTotal === 'number') {
- return Math.max(1, Math.ceil(this.internalTotal / this.internalPageSize))
- } else if (typeof this.pageCount === 'number') {
- return Math.max(1, this.pageCount)
+ })
+
+ /**
+ * 计算内部总页数
+ * 根据总条数和每页条数计算
+ */
+ const internalPageCount = computed(() => {
+ if (typeof state.internalTotal === 'number') {
+ return Math.max(1, Math.ceil(state.internalTotal / state.internalPageSize))
+ } else if (typeof props.pageCount === 'number') {
+ return Math.max(1, props.pageCount)
}
return null
- },
- internalLayout() {
+ })
+
+ /**
+ * 计算内部布局
+ * 根据mode和layout属性确定分页器的布局
+ */
+ const internalLayout = computed(() => {
let layout = ''
- if (this.mode && !this.layout) {
- this.mode === 'number' && (layout = 'sizes, prev, pager, next, jumper, total')
- this.mode === 'simple' && (layout = 'sizes, prev, next')
- this.mode === 'complete' && (layout = 'sizes, prev, pager, next, jumper,total')
- this.mode === 'fixed' && (layout = 'prev, pager, next')
- } else if ((!this.mode && this.layout) || (this.mode && this.layout)) {
- layout = this.layout
+ if (props.mode && !props.layout) {
+ props.mode === 'number' && (layout = 'sizes, prev, pager, next, jumper, total')
+ props.mode === 'simple' && (layout = 'sizes, prev, next')
+ props.mode === 'complete' && (layout = 'sizes, prev, pager, next, jumper,total')
+ props.mode === 'fixed' && (layout = 'prev, pager, next')
+ } else if ((!props.mode && props.layout) || (props.mode && props.layout)) {
+ layout = props.layout
} else {
layout = 'prev, pager, next, jumper, total'
}
return layout
- }
- },
- watch: {
- currentPage: {
- handler(curPage) {
- this.internalCurrentPage = this.getValidCurrentPage(curPage)
+ })
+
+ // 监听器
+ watch(
+ () => props.currentPage,
+ (curPage) => {
+ state.internalCurrentPage = getValidCurrentPage(curPage)
},
- immediate: true
- },
- internalPageCount(pageCount) {
- const oldCurPage = this.internalCurrentPage
+ { immediate: true }
+ )
+
+ watch(internalPageCount, (pageCount) => {
+ const oldCurPage = state.internalCurrentPage
- if (pageCount > 0 && oldCurPage === 0) {
- this.internalCurrentPage = 1
+ if (pageCount && pageCount > 0 && oldCurPage === 0) {
+ state.internalCurrentPage = 1
} else if (pageCount && oldCurPage > pageCount) {
- this.internalCurrentPage = pageCount === 0 ? 1 : pageCount
- this.userChangePageSize && this.emitChange()
+ state.internalCurrentPage = pageCount === 0 ? 1 : pageCount
+ state.userChangePageSize && emitChange()
}
- this.userChangePageSize = false
- },
- internalCurrentPage: {
- handler(curPage) {
- this.$emit('update:currentPage', curPage)
- this.lastEmittedPage = -1
+ state.userChangePageSize = false
+ })
+
+ watch(
+ () => state.internalCurrentPage,
+ (curPage) => {
+ emit('update:currentPage', curPage)
+ state.lastEmittedPage = -1
},
- immediate: true
- },
- pageSize: {
- handler(pageSize) {
- this.internalPageSize = isNaN(pageSize) ? 10 : pageSize
+ { immediate: true }
+ )
+
+ watch(
+ () => props.pageSize,
+ (pageSize) => {
+ state.internalPageSize = isNaN(pageSize) ? 10 : pageSize
},
- immediate: true
- },
- total(total) {
- this.internalTotal = total
- }
- },
- mounted() {
- if (document.querySelector('[data-tag="tiny-pager-total-loading"]')) {
- const target = document.querySelector('[data-tag="tiny-pager-total-loading"]')
- if (target) {
- Loading.service({
- target: target as HTMLElement
- })
+ { immediate: true }
+ )
+
+ watch(
+ () => props.total,
+ (total) => {
+ state.internalTotal = total
+ }
+ )
+
+ // 生命周期钩子
+ onMounted(() => {
+ if (document.querySelector('[data-tag="tiny-pager-total-loading"]')) {
+ const target = document.querySelector('[data-tag="tiny-pager-total-loading"]')
+ if (target) {
+ Loading.service({
+ target: target as HTMLElement
+ })
+ }
}
+ })
+
+ return {
+ // 状态
+ ...state,
+ // 方法
+ t,
+ handleJumperFocus,
+ handleJumperInput,
+ handleJumperChange,
+ handleJumperClick,
+ parseJumperValue,
+ handleSizeChange,
+ canJumperGo,
+ beforeSizeChangeHandler,
+ beforePagerChangeHandler,
+ beforeJumperChangeHandler,
+ copyEmit,
+ beforeChangeHandler,
+ handleCurrentChange,
+ prev,
+ next,
+ buildBeforePageChangeParam,
+ getValidCurrentPage,
+ emitChange,
+ setTotal,
+ // 计算属性
+ totalText,
+ internalPageCount,
+ internalLayout,
+ // refs
+ sizesList
}
}
})
From 22420fa0535f314f51b0901873ab044ac55dd077 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Wed, 14 May 2025 15:29:25 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat(pager):=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
=?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=88=86=E9=A1=B5=E7=BB=84=E4=BB=B6=EF=BC=8C?=
=?UTF-8?q?=E7=AE=80=E5=8C=96=E6=A8=A1=E6=9D=BF=E7=BB=93=E6=9E=84=EF=BC=8C?=
=?UTF-8?q?=E5=A2=9E=E5=BC=BA=E5=8A=9F=E8=83=BD=E5=92=8C=E5=8F=AF=E8=AF=BB?=
=?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/vue/src/pager/src/mobile-first.vue | 339 ++++++++++----------
1 file changed, 163 insertions(+), 176 deletions(-)
diff --git a/packages/vue/src/pager/src/mobile-first.vue b/packages/vue/src/pager/src/mobile-first.vue
index 0bf1f60c55..00514f3c0b 100644
--- a/packages/vue/src/pager/src/mobile-first.vue
+++ b/packages/vue/src/pager/src/mobile-first.vue
@@ -1,187 +1,174 @@
-
-
-
-
+
+
+
+
-
+ data-tag="tiny-pager-total-loading"
+ class="inline-block align-baseline h-3.5 w-3.5 mr-1.5 top-0.5 [&_[data-tag=tiny-loading-icon]]:h-3.5 [&_[data-tag=tiny-loading-icon]]:w-3.5"
+ >
+
{{ t('ui.page.loadingTotals') }}
+
+
+ {{ t('ui.page.total') }}
+
+ {{ customTotal ? totalText : internalTotal }}
+
+ {{ t('ui.page.item') }}
+
+
+
+
+
+
+
+
-
{{ t('ui.page.loadingTotals') }}
-
-
- {{ t('ui.page.total') }}
-
- {{ customTotal ? totalText : internalTotal }}
-
- {{ t('ui.page.item') }}
-
-
-
-
-
-
-
-
-
-
{{ internalPageSize }}
-
{{ t('ui.page.page') }}
-
-
-
-
+ ref="pageSize"
+ :class="[
+ 'min-w-[theme(spacing.18)] max-w-[theme(spacing.40)] relative text-left h-7 leading-7 border border-solid border-color-border rounded text-xs py-0 pr-1 pl-3 block whitespace-nowrap transition-[border] duration-300 outline-0 box-border select-none',
+ showSizes
+ ? 'border-color-border-focus bg-color-fill-6 text-color-border-focus [&_svg]:rotate-180 [&_svg]:fill-color-brand-hover'
+ : '',
+ disabled
+ ? 'bg-color-border-disabled text-color-border cursor-not-allowed [&_svg]:fill-color-icon-disabled [&_svg]:cursor-not-allowed'
+ : 'bg-color-bg-1 text-color-text-primary hover:bg-color-border-disabled hover:border-color-border active:border-color-border-focus active:bg-color-fill-6 active:text-color-brand'
+ ]"
+ >
+
{{ internalPageSize }}
+
{{ t('ui.page.page') }}
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('ui.page.jump') }}
+
+
+
-
-
-
-
-
-
- {{ t('ui.page.jump') }}
-
-
-
-
-
-
-
-
- {{ $parent.$slots.default() }}
-
-
- {{ $parent.$slots.default }}
-
-
-
-
-
+
+
+
+
-
+
@@ -378,8 +386,8 @@ export default defineComponent({
pageSize: val,
total: state.internalTotal
})
- if (sizesList.value) {
- sizesList.value.hide()
+ if (Array.isArray(sizesList.value)) {
+ sizesList.value[0].state.showPopper = false
}
}
From 85cf7de7bcf443cbdfd28e69d994a4de25497439 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Wed, 14 May 2025 16:48:40 +0800
Subject: [PATCH 5/6] =?UTF-8?q?feat(pager):=20=E5=88=A0=E9=99=A4=E9=87=8D?=
=?UTF-8?q?=E5=A4=8D=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../mobile-first/app/pager/current-change.vue | 34 -------------
.../mobile-first/app/pager/next-click.vue | 34 -------------
.../mobile-first/app/pager/prev-click.vue | 34 -------------
.../mobile-first/app/pager/webdoc/pager.js | 48 -------------------
4 files changed, 150 deletions(-)
delete mode 100644 examples/sites/demos/mobile-first/app/pager/current-change.vue
delete mode 100644 examples/sites/demos/mobile-first/app/pager/next-click.vue
delete mode 100644 examples/sites/demos/mobile-first/app/pager/prev-click.vue
diff --git a/examples/sites/demos/mobile-first/app/pager/current-change.vue b/examples/sites/demos/mobile-first/app/pager/current-change.vue
deleted file mode 100644
index ec7123aa85..0000000000
--- a/examples/sites/demos/mobile-first/app/pager/current-change.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
-
diff --git a/examples/sites/demos/mobile-first/app/pager/next-click.vue b/examples/sites/demos/mobile-first/app/pager/next-click.vue
deleted file mode 100644
index e9e9b9b782..0000000000
--- a/examples/sites/demos/mobile-first/app/pager/next-click.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
-
diff --git a/examples/sites/demos/mobile-first/app/pager/prev-click.vue b/examples/sites/demos/mobile-first/app/pager/prev-click.vue
deleted file mode 100644
index b3363de0e7..0000000000
--- a/examples/sites/demos/mobile-first/app/pager/prev-click.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
-
diff --git a/examples/sites/demos/mobile-first/app/pager/webdoc/pager.js b/examples/sites/demos/mobile-first/app/pager/webdoc/pager.js
index 156ba08d5a..d0522b4fc0 100644
--- a/examples/sites/demos/mobile-first/app/pager/webdoc/pager.js
+++ b/examples/sites/demos/mobile-first/app/pager/webdoc/pager.js
@@ -62,54 +62,6 @@ export default {
},
codeFiles: ['custom-next-prev-text.vue']
},
- {
- demoId: 'current-change',
- name: {
- 'zh-CN': '当前页改变事件',
- 'en-US': ''
- },
- desc: {
- 'zh-CN': '`current-change` 切换当前页码时触发',
- 'en-US': ''
- },
- codeFiles: ['current-change.vue']
- },
- {
- demoId: 'prev-click',
- name: {
- 'zh-CN': '上一页事件',
- 'en-US': ''
- },
- desc: {
- 'zh-CN': '`prev-click` 切换至前一页时触发',
- 'en-US': ''
- },
- codeFiles: ['prev-click.vue']
- },
- {
- demoId: 'next-click',
- name: {
- 'zh-CN': '下一页事件',
- 'en-US': ''
- },
- desc: {
- 'zh-CN': '`next-click` 切换至后一页时触发',
- 'en-US': ''
- },
- codeFiles: ['next-click.vue']
- },
- {
- demoId: 'before-page-change',
- name: {
- 'zh-CN': '切换分页前事件',
- 'en-US': ''
- },
- desc: {
- 'zh-CN': '`before-page-change` 切换分页前事件',
- 'en-US': ''
- },
- codeFiles: ['before-page-change.vue']
- },
{
demoId: 'pager-show-total-loading',
name: {
From fd8d965b429eb4d51e5249f9fb0b69ea3f702410 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Wed, 14 May 2025 17:34:02 +0800
Subject: [PATCH 6/6] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E9=80=BB?=
=?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/vue/src/pager/src/mobile-first.vue | 9 ++-------
1 file changed, 2 insertions(+), 7 deletions(-)
diff --git a/packages/vue/src/pager/src/mobile-first.vue b/packages/vue/src/pager/src/mobile-first.vue
index 97ade61cea..bbe7d0d594 100644
--- a/packages/vue/src/pager/src/mobile-first.vue
+++ b/packages/vue/src/pager/src/mobile-first.vue
@@ -1,9 +1,4 @@
-