feat(分页组件): 增强提交按钮和上一页按钮的配置能力
支持通过 submitButton 对象配置提交按钮文本和上一页按钮的行为
Showing
2 changed files
with
33 additions
and
6 deletions
| 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 | ... | ... |
-
Please register or login to post a comment