hookehuyr

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

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