feat(分页组件): 添加导航按钮和提交按钮的颜色配置

支持自定义导航按钮和提交按钮的背景色和文字颜色在预览模式下也启用分页功能

feat(分页组件): 添加导航按钮和提交按钮的颜色配置
支持自定义导航按钮和提交按钮的背景色和文字颜色在预览模式下也启用分页功能
hookehuyr
Commit b99fbe95198e4528d8b54938d3c361f11fa7fde7 b99fbe95 1 parent 4b6d4c8e
Showing 3 changed files with 35 additions and 11 deletions
src/components/PaginationField/index.vue
src/composables/usePagination.js
src/views/index.vue
--- a/src/components/PaginationField/index.vue
View file @b99fbe9
+++ b/src/components/PaginationField/index.vue
View file @b99fbe9
 <!--
  * @Date: 2025-11-18 16:17:40
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-25 14:48:19
+ * @LastEditTime: 2025-11-26 17:17:14
  * @FilePath: /data-table/src/components/PaginationField/index.vue
  * @Description: 分页组件
 -->
@@ -15,15 +15,22 @@
           :disabled="prev_disabled_effective || current === 0"
           round
           type="primary"
+          :color="prevBtnColor"
           class="btn"
           @click="onPrev"
-        >{{ prev_label_effective }}</van-button>
+        >
+          <span :style="{ color: prevTextColor }">{{ prevLabel }}</span>
+        </van-button>
       </div>
       <div class="actionsCenter">
-        <van-button v-if="showSubmit" round type="primary" class="btn" @click="onSubmit">{{ submitButton.text }}</van-button>
+        <van-button v-if="showSubmit" round type="primary" :color="submitButton.btn_color" class="btn" @click="onSubmit">
+          <span :style="{ color: submitButton.text_color }">{{ submitButton.text }}</span>
+        </van-button>
       </div>
       <div class="actionsRight">
-        <van-button v-if="showNext" round type="primary" class="btn" @click="onNext">{{ nextLabel }}</van-button>
+        <van-button v-if="showNext" round type="primary" :color="nextBtnColor" class="btn" @click="onNext">
+          <span :style="{ color: nextTextColor }">{{ nextLabel }}</span>
+        </van-button>
       </div>
     </div>
   </div>
@@ -31,6 +38,7 @@
 <script setup>
 import { computed } from 'vue'
+import { styleColor } from "@/constant.js";
 const props = defineProps({
     current: { type: Number, default: 0 },
@@ -38,7 +46,11 @@ const props = defineProps({
     isLast: { type: Boolean, default: false },
     prevLabel: { type: String, default: '上一页' },
     nextLabel: { type: String, default: '下一页' },
-    submitButton: { type: Object, default: { text: '提交', back_title: '上一页', is_back: false } },
+    prevBtnColor: { type: String, default: styleColor.baseColor },
+    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' } },
     prevDisabled: { type: Boolean, default: false },
 })
--- a/src/composables/usePagination.js
View file @b99fbe9
+++ b/src/composables/usePagination.js
View file @b99fbe9
@@ -6,6 +6,7 @@
  */
 import { ref, computed, watch, nextTick } from 'vue'
 import { showToast } from 'vant'
+import { styleColor } from "@/constant.js";
 export function usePagination(formDataRef, options = {}) {
     const { myFormRef, validOther, afterSwitch } = options
@@ -53,15 +54,20 @@ export function usePagination(formDataRef, options = {}) {
     /**
      * 规范化分页符属性为导航配置
      * @param {Object} props 分页符的 component_props
-     * @returns {{prev_text: string, next_text: string, prev_disabled: boolean}} 导航配置
+     * @returns {{prev_text: string, next_text: string, prev_disabled: boolean, prev_btn_color: string, next_btn_color: string, prev_text_color: string, next_text_color: string}} 导航配置
      */
     const normalizePaginatorProps = (props = {}) => {
         // 中文文案默认值
-        const nav = { prev_text: '上一页', next_text: '下一页', prev_disabled: false }
+        const nav = { prev_text: '上一页', next_text: '下一页', prev_disabled: false, prev_btn_color: styleColor.baseColor, next_btn_color: styleColor.baseColor, prev_text_color: '#fff', next_text_color: '#fff' }
         if (props.back_title) nav.prev_text = props.back_title
         if (props.next_title) nav.next_text = props.next_title
         // 是否允许返回：true 允许，false 不允许
         if (typeof props.is_back === 'boolean') nav.prev_disabled = !props.is_back
+        // 导航颜色
+        if (props.back_background_color) nav.prev_btn_color = props.back_background_color
+        if (props.next_background_color) nav.next_btn_color = props.next_background_color
+        if (props.back_color) nav.prev_text_color = props.back_color
+        if (props.next_color) nav.next_text_color = props.next_color
         return nav
     }
--- a/src/views/index.vue
View file @b99fbe9
+++ b/src/views/index.vue
View file @b99fbe9
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-25 16:20:30
+ * @LastEditTime: 2025-11-26 19:52:55
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -40,6 +40,10 @@
           :is-last="current_page_index === filtered_pages.length - 1"
           :prev-label="page_nav.prev_text"
           :next-label="page_nav.next_text"
+          :prev-btn-color="page_nav.prev_btn_color"
+          :next-btn-color="page_nav.next_btn_color"
+          :prev-text-color="page_nav.prev_text_color"
+          :next-text-color="page_nav.next_text_color"
           :submit-button="PCommit"
           :prev-disabled="page_nav.prev_disabled"
           @prev="handlePrev"
@@ -48,8 +52,8 @@
         />
         <!-- 非流程版表单 -->
         <div v-if="formData.length && PCommit.visible && !formSetting.is_flow && !enable_pagination" style="margin: 16px">
-          <van-button round block type="primary" native-type="submit" :disabled="submitStatus">
+          <van-button round block type="primary" :color="PCommit.btn_color" native-type="submit" :disabled="submitStatus">
-            {{ PCommit.text ? PCommit.text : '提交' }}
+            <span :style="{ color: PCommit.text_color }">{{ PCommit.text ? PCommit.text : '提交' }}</span>
           </van-button>
         </div>
         <!-- 流程表单 -->
@@ -478,6 +482,8 @@ onMounted(async () => {
       visible: !page_commit.invisible,
       is_back: page_commit.is_back,
       back_title: page_commit.back_title,
+      btn_color: page_commit.background_color,
+      text_color: page_commit.color,
     };
   }
@@ -500,7 +506,7 @@ onMounted(async () => {
   formData.value = formatData(page_form);
   // TAG: 构建分页组件
-  if (page_type === 'add' || page_type === undefined) {
+  if (page_type === 'add' || page_type === undefined || model === 'preview') {
     buildPages();
     enable_pagination.value = filtered_pages.value.length > 1;
   }