Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
data-table
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2025-11-26 20:28:03 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
a91a810f83f9b55cde88772db37ed7a7a36d85bd
a91a810f
1 parent
b99fbe95
feat(分页组件): 添加上一页按钮颜色和文字颜色的动态计算逻辑
在分页组件中新增对上一页按钮背景色和文字颜色的动态计算,当处于最后一页时使用提交按钮的配色方案
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
25 additions
and
5 deletions
src/components/PaginationField/index.vue
src/views/index.vue
src/components/PaginationField/index.vue
View file @
a91a810
<!--
* @Date: 2025-11-18 16:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-26
17:17:1
4
* @LastEditTime: 2025-11-26
20:24:0
4
* @FilePath: /data-table/src/components/PaginationField/index.vue
* @Description: 分页组件
-->
...
...
@@ -15,11 +15,11 @@
:disabled="prev_disabled_effective || current === 0"
round
type="primary"
:color="prev
BtnColor
"
:color="prev
_btn_color_effective
"
class="btn"
@click="onPrev"
>
<span :style="{ color: prev
TextColor }">{{ prevLabel
}}</span>
<span :style="{ color: prev
_text_color_effective }">{{ prev_label_effective
}}</span>
</van-button>
</div>
<div class="actionsCenter">
...
...
@@ -50,7 +50,7 @@ const props = defineProps({
nextBtnColor: { type: String, default: styleColor.baseColor },
prevTextColor: { type: String, default: '#fff' },
nextTextColor: { type: String, default: '#fff' },
submitButton: { type: Object, default: { text: '提交', back_title: '上一页', is_back: false, btn_color: styleColor.baseColor, text_color: '#fff' } },
submitButton: { type: Object, default: { text: '提交', back_title: '上一页', is_back: false, btn_color: styleColor.baseColor, text_color: '#fff'
, prevBtnColor: styleColor.baseColor, prevTextColor: '#fff'
} },
prevDisabled: { type: Boolean, default: false },
})
...
...
@@ -86,6 +86,24 @@ const prev_disabled_effective = computed(() => {
return showSubmit.value ? (!props.submitButton?.is_back ?? props.prevDisabled) : props.prevDisabled
})
/**
* @description 计算上一页按钮背景色(最后一页用提交按钮颜色)
* @returns {import('vue').ComputedRef<string>}
*/
const prev_btn_color_effective = computed(() => {
// 最后一页按钮使用提交按钮的背景颜色配置;否则使用外部传入的上一页按钮颜色
return showSubmit.value ? (props.submitButton?.prevBtnColor || props.prevBtnColor) : props.prevBtnColor
})
/**
* @description 计算上一页按钮文字颜色(最后一页用提交按钮文字颜色)
* @returns {import('vue').ComputedRef<string>}
*/
const prev_text_color_effective = computed(() => {
// 最后一页按钮文字使用提交按钮的文字颜色;否则使用上一页按钮文字颜色
return showSubmit.value ? (props.submitButton?.prevTextColor || props.prevTextColor) : props.prevTextColor
})
const onPrev = () => emit('prev')
const onNext = () => emit('next')
const onSubmit = () => emit('submit')
...
...
src/views/index.vue
View file @
a91a810
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-26
19:52:55
* @LastEditTime: 2025-11-26
20:25:06
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
...
...
@@ -484,6 +484,8 @@ onMounted(async () => {
back_title: page_commit.back_title,
btn_color: page_commit.background_color,
text_color: page_commit.color,
prevBtnColor: page_commit.back_background_color,
prevTextColor: page_commit.back_color,
};
}
...
...
Please
register
or
login
to post a comment