bandhuBuy-admin/src/hooks/useFormConfig.md

useFormConfig Hook 使用文档

概述

useFormConfig 是一个响应式表单配置 Hook，根据当前语言自动调整表单样式，支持自定义配置。

基础用法

默认配置

import { useFormConfig } from '@/hooks/useFormConfig';

const { formLabelWidth, formLayout } = useFormConfig();

默认值：

• 中文标签宽度：120px
• 英文标签宽度：160px

在模板中使用

<template>
  <!-- 简单使用 -->
  <el-form :label-width="formLabelWidth">
    <!-- 表单项 -->
  </el-form>

  <!-- 完整配置 -->
  <el-form v-bind="formLayout">
    <!-- 表单项 -->
  </el-form>
</template>

自定义配置

1. 自定义标签宽度

// 方式1：分别设置中英文宽度
const { formLabelWidth } = useFormConfig({
  zhWidth: '100px',  // 中文宽度
  enWidth: '140px'   // 英文宽度
});

// 方式2：使用自定义宽度对象
const { formLabelWidth } = useFormConfig({
  customWidths: {
    zh: '100px',
    en: '140px'
  }
});

2. 自定义间距和字体

const { formLabelWidth, formItemSpacing, inputPlaceholderStyle } = useFormConfig({
  zhWidth: '100px',
  enWidth: '140px',
  spacing: {
    zh: '16px',
    en: '20px'
  },
  fontSize: {
    zh: '13px',
    en: '12px'
  }
});

3. 自定义按钮尺寸

const { buttonSize } = useFormConfig({
  defaultButtonSize: 'small'  // 'large' | 'default' | 'small'
});

完整配置选项

const options = {
  // 标签宽度配置
  zhWidth: '120px',           // 中文标签宽度
  enWidth: '160px',           // 英文标签宽度
  customWidths: {             // 自定义宽度对象（优先级最高）
    zh: '100px',
    en: '140px'
  },
  
  // 间距配置
  spacing: {
    zh: '20px',               // 中文表单项间距
    en: '24px'                // 英文表单项间距
  },
  
  // 按钮配置
  defaultButtonSize: 'default', // 按钮尺寸
  
  // 字体配置
  fontSize: {
    zh: '14px',               // 中文字体大小
    en: '13px'                // 英文字体大小
  }
};

const formConfig = useFormConfig(options);

返回值

const {
  // 基础配置
  formLabelWidth,           // 响应式标签宽度
  formItemSpacing,          // 响应式表单项间距
  buttonSize,               // 按钮尺寸
  inputPlaceholderStyle,    // 输入框占位符样式
  validationMessageStyle,   // 验证消息样式
  formLayout,               // 完整表单布局配置
  
  // 响应式配置
  responsiveFormConfig,     // 响应式宽度配置
  
  // 便捷方法
  getCurrentLanguage,       // 获取当前语言
} = useFormConfig();

使用场景

场景1：标准表单（使用默认配置）

<script setup>
import { useFormConfig } from '@/hooks/useFormConfig';

const { formLabelWidth } = useFormConfig();
</script>

<template>
  <el-form :label-width="formLabelWidth">
    <!-- 表单内容 -->
  </el-form>
</template>

场景2：紧凑表单（较小的标签宽度）

<script setup>
import { useFormConfig } from '@/hooks/useFormConfig';

const { formLabelWidth } = useFormConfig({
  zhWidth: '80px',
  enWidth: '120px'
});
</script>

场景3：宽松表单（较大的标签宽度）

<script setup>
import { useFormConfig } from '@/hooks/useFormConfig';

const { formLabelWidth } = useFormConfig({
  zhWidth: '150px',
  enWidth: '200px'
});
</script>

场景4：完整样式配置

<script setup>
import { useFormConfig } from '@/hooks/useFormConfig';

const { 
  formLayout, 
  buttonSize, 
  inputPlaceholderStyle,
  validationMessageStyle 
} = useFormConfig({
  zhWidth: '100px',
  enWidth: '140px',
  defaultButtonSize: 'small'
});
</script>

<template>
  <el-form v-bind="formLayout">
    <el-form-item label="名称" prop="name">
      <el-input 
        v-model="form.name" 
        :style="inputPlaceholderStyle"
      />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" :size="buttonSize">
        提交
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
/* 应用验证消息样式 */
:deep(.el-form-item__error) {
  font-size: v-bind('validationMessageStyle.fontSize');
  line-height: v-bind('validationMessageStyle.lineHeight');
}
</style>

注意事项

1. 优先级：customWidths > zhWidth/enWidth > 默认值
2. 响应式：所有配置都是响应式的，语言切换时自动更新
3. 单位：宽度配置需要包含单位（如 '120px'）
4. 兼容性：支持所有 Element Plus 表单组件