hookehuyr

feat(分页组件): 添加上一页按钮颜色和文字颜色的动态计算逻辑

在分页组件中新增对上一页按钮背景色和文字颜色的动态计算,当处于最后一页时使用提交按钮的配色方案
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-26 17:17:14 4 + * @LastEditTime: 2025-11-26 20:24:04
5 * @FilePath: /data-table/src/components/PaginationField/index.vue 5 * @FilePath: /data-table/src/components/PaginationField/index.vue
6 * @Description: 分页组件 6 * @Description: 分页组件
7 --> 7 -->
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
15 :disabled="prev_disabled_effective || current === 0" 15 :disabled="prev_disabled_effective || current === 0"
16 round 16 round
17 type="primary" 17 type="primary"
18 - :color="prevBtnColor" 18 + :color="prev_btn_color_effective"
19 class="btn" 19 class="btn"
20 @click="onPrev" 20 @click="onPrev"
21 > 21 >
22 - <span :style="{ color: prevTextColor }">{{ prevLabel }}</span> 22 + <span :style="{ color: prev_text_color_effective }">{{ prev_label_effective }}</span>
23 </van-button> 23 </van-button>
24 </div> 24 </div>
25 <div class="actionsCenter"> 25 <div class="actionsCenter">
...@@ -50,7 +50,7 @@ const props = defineProps({ ...@@ -50,7 +50,7 @@ const props = defineProps({
50 nextBtnColor: { type: String, default: styleColor.baseColor }, 50 nextBtnColor: { type: String, default: styleColor.baseColor },
51 prevTextColor: { type: String, default: '#fff' }, 51 prevTextColor: { type: String, default: '#fff' },
52 nextTextColor: { type: String, default: '#fff' }, 52 nextTextColor: { type: String, default: '#fff' },
53 - submitButton: { type: Object, default: { text: '提交', back_title: '上一页', is_back: false, btn_color: styleColor.baseColor, text_color: '#fff' } }, 53 + submitButton: { type: Object, default: { text: '提交', back_title: '上一页', is_back: false, btn_color: styleColor.baseColor, text_color: '#fff', prevBtnColor: styleColor.baseColor, prevTextColor: '#fff' } },
54 prevDisabled: { type: Boolean, default: false }, 54 prevDisabled: { type: Boolean, default: false },
55 }) 55 })
56 56
...@@ -86,6 +86,24 @@ const prev_disabled_effective = computed(() => { ...@@ -86,6 +86,24 @@ const prev_disabled_effective = computed(() => {
86 return showSubmit.value ? (!props.submitButton?.is_back ?? props.prevDisabled) : props.prevDisabled 86 return showSubmit.value ? (!props.submitButton?.is_back ?? props.prevDisabled) : props.prevDisabled
87 }) 87 })
88 88
89 +/**
90 + * @description 计算上一页按钮背景色(最后一页用提交按钮颜色)
91 + * @returns {import('vue').ComputedRef<string>}
92 + */
93 +const prev_btn_color_effective = computed(() => {
94 + // 最后一页按钮使用提交按钮的背景颜色配置;否则使用外部传入的上一页按钮颜色
95 + return showSubmit.value ? (props.submitButton?.prevBtnColor || props.prevBtnColor) : props.prevBtnColor
96 +})
97 +
98 +/**
99 + * @description 计算上一页按钮文字颜色(最后一页用提交按钮文字颜色)
100 + * @returns {import('vue').ComputedRef<string>}
101 + */
102 +const prev_text_color_effective = computed(() => {
103 + // 最后一页按钮文字使用提交按钮的文字颜色;否则使用上一页按钮文字颜色
104 + return showSubmit.value ? (props.submitButton?.prevTextColor || props.prevTextColor) : props.prevTextColor
105 +})
106 +
89 const onPrev = () => emit('prev') 107 const onPrev = () => emit('prev')
90 const onNext = () => emit('next') 108 const onNext = () => emit('next')
91 const onSubmit = () => emit('submit') 109 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-26 19:52:55 4 + * @LastEditTime: 2025-11-26 20:25:06
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -484,6 +484,8 @@ onMounted(async () => { ...@@ -484,6 +484,8 @@ onMounted(async () => {
484 back_title: page_commit.back_title, 484 back_title: page_commit.back_title,
485 btn_color: page_commit.background_color, 485 btn_color: page_commit.background_color,
486 text_color: page_commit.color, 486 text_color: page_commit.color,
487 + prevBtnColor: page_commit.back_background_color,
488 + prevTextColor: page_commit.back_color,
487 }; 489 };
488 } 490 }
489 491
......