Browse Source

perf(views): 优化 UseGuidance 组件表单配置

1. 支持根据步骤动态设置 labelAlign,labelCol,wrapperCol
2. 标签不显示冒号
wangcong 2 tháng trước cách đây
mục cha
commit
2f729d1d12
2 tập tin đã thay đổi với 14 bổ sung1 xóa
  1. 10 1
      src/layout/UseGuidance.vue
  2. 4 0
      src/types/index.ts

+ 10 - 1
src/layout/UseGuidance.vue

@@ -108,7 +108,16 @@ const finishCurrentStep = async () => {
           <div class="step-title">{{ currentStep.stepTitle || currentStep.title }}</div>
           <div class="step-description">{{ currentStep.stepDescription }}</div>
         </div>
-        <AForm ref="formRef" :model="form" :rules="rules" :layout="currentStep.formLayout">
+        <AForm
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          :layout="currentStep.formLayout"
+          :label-align="currentStep.labelAlign"
+          :label-col="currentStep.labelCol"
+          :wrapper-col="currentStep.wrapperCol"
+          :colon="false"
+        >
           <component
             ref="stepItem"
             :is="currentStep.component"

+ 4 - 0
src/types/index.ts

@@ -4,6 +4,7 @@ import type { IconfontIcon } from '@/icons/fonts/iconfont';
 import type { Component, ComponentPublicInstance } from 'vue';
 import type { StepProps, UploadProps } from 'ant-design-vue';
 import type { Rule, RuleObject } from 'ant-design-vue/es/form';
+import type { FormLabelAlign } from 'ant-design-vue/es/form/interface';
 import type { ProtocolConfigMethod } from '@/constants';
 
 export interface ApiResponse<T> {
@@ -82,6 +83,9 @@ export interface UseGuideStepItem extends StepProps {
   component: Component;
   contentOffset?: number;
   formLayout?: 'horizontal' | 'vertical' | 'inline';
+  labelAlign?: FormLabelAlign;
+  labelCol?: { span?: string | number };
+  wrapperCol?: { span?: string | number };
   isLastStep?: boolean;
   exportButtonShow?: boolean;
   nextStepButtonHide?: boolean;