feat(分页组件): 添加上一页按钮颜色和文字颜色的动态计算逻辑
在分页组件中新增对上一页按钮背景色和文字颜色的动态计算,当处于最后一页时使用提交按钮的配色方案
Showing
2 changed files
with
25 additions
and
5 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-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 | ... | ... |
-
Please register or login to post a comment