hookehuyr

feat(分页组件): 增强提交按钮和上一页按钮的配置能力

支持通过 submitButton 对象配置提交按钮文本和上一页按钮的行为
<!--
* @Date: 2025-11-18 16:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-20 15:44:14
* @LastEditTime: 2025-11-20 17:46:05
* @FilePath: /data-table/src/components/PaginationField/index.vue
* @Description: 分页组件
-->
......@@ -9,9 +9,16 @@
<div class="pagination-field">
<div class="indicator">第{{ current + 1 }}页 / 共{{ total }}页</div>
<div class="actions">
<van-button v-if="showPrev" :disabled="prevDisabled || current === 0" round type="primary" class="btn" @click="onPrev">{{ prevLabel }}</van-button>
<van-button
v-if="showPrev"
:disabled="prev_disabled_effective || current === 0"
round
type="primary"
class="btn"
@click="onPrev"
>{{ prev_label_effective }}</van-button>
<van-button v-if="showNext" round type="primary" class="btn" @click="onNext">{{ nextLabel }}</van-button>
<van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">{{ submitLabel }}</van-button>
<van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">{{ submitButton.text }}</van-button>
</div>
</div>
<div class="placeholder" />
......@@ -26,7 +33,7 @@ const props = defineProps({
isLast: { type: Boolean, default: false },
prevLabel: { type: String, default: '上一页' },
nextLabel: { type: String, default: '下一页' },
submitLabel: { type: String, default: '提交' },
submitButton: { type: Object, default: { text: '提交', back_title: '上一页', is_back: true } },
prevDisabled: { type: Boolean, default: false },
})
......@@ -36,6 +43,24 @@ const showPrev = computed(() => props.current > 0)
const showNext = computed(() => props.current < props.total - 1)
const showSubmit = computed(() => props.current === props.total - 1)
/**
* @description 计算上一页按钮文案(最后一页用提交按钮配置的返回文案)
* @returns {import('vue').ComputedRef<string>}
*/
const prev_label_effective = computed(() => {
// 最后一页使用 submitButton.back_title,否则使用外部传入的 prevLabel
return showSubmit.value ? (props.submitButton?.back_title || props.prevLabel) : props.prevLabel
})
/**
* @description 计算上一页按钮禁用状态(最后一页用提交按钮配置的 is_back)
* @returns {import('vue').ComputedRef<boolean>}
*/
const prev_disabled_effective = computed(() => {
// 最后一页直接使用 submitButton.is_back 替换 prevDisabled;否则使用外部传入的 prevDisabled
return showSubmit.value ? (!props.submitButton?.is_back ?? props.prevDisabled) : props.prevDisabled
})
const onPrev = () => emit('prev')
const onNext = () => emit('next')
const onSubmit = () => emit('submit')
......
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-20 15:44:03
* @LastEditTime: 2025-11-20 17:47:01
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -35,7 +35,7 @@
:is-last="current_page_index === filtered_pages.length - 1"
:prev-label="page_nav.prev_text"
:next-label="page_nav.next_text"
:submit-label="PCommit.text ? PCommit.text : '提交'"
:submit-button="PCommit"
:prev-disabled="page_nav.prev_disabled"
@prev="handlePrev"
@next="handleNext"
......@@ -471,6 +471,8 @@ onMounted(async () => {
PCommit.value = {
text: page_commit.text,
visible: !page_commit.invisible,
is_back: page_commit.is_back,
back_title: page_commit.back_title,
};
}
......