更新记录

1.2.0(2025-01-13) 下载此版本

✨ 新功能

  • 新增表单编辑模式支持
  • 新增字段显示/隐藏控制
  • 新增字段禁用/只读控制
  • 新增自动定位到错误字段功能
  • 新增表单验证器支持传递表单数据

1.1.0(2025-01-08) 下载此版本

  • ✨ 新增深色主题支持

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.01 app-vue app-nvue app-uvue
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

Smart Form Builder 智能表单生成器

一个基于uni-app的智能表单生成器组件,可以通过简单的配置快速生成各种表单。适用于管理后台、用户资料、数据收集等场景。

特性

  • 🚀 配置驱动,快速生成表单
  • 💪 支持多种表单控件
  • 🎨 支持暗黑主题
  • ✨ 支持表单编辑模式
  • 📝 完善的表单验证
  • 🔍 支持字段显示/隐藏控制
  • 🔒 支持字段禁用/只读控制
  • 🎯 支持自动定位到错误字段

安装

在插件市场中搜索smart-form-builder或手动下载并导入项目。

基础用法

<template>
  <smart-form-builder
    :config="formConfig"
    :is-edit="false"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formConfig: {
        fields: [
          {
            key: 'username',
            label: '用户名',
            type: 'text',
            rules: [{ required: true, message: '请输入用户名' }]
          },
          {
            key: 'password',
            label: '密码', 
            type: 'password',
            rules: [
              { required: true, message: '请输入密码' },
              { minLength: 6, message: '密码至少6位' }
            ]
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(formData) {
      console.log('表单数据:', formData)
    }
  }
}
</script>

编辑模式

组件支持编辑模式,可以通过is-edit属性控制:

<template>
  <smart-form-builder
    :config="formConfig"
    :is-edit="true"
    :initial-data="editData"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      editData: {
        username: 'admin',
        email: 'admin@example.com'
      },
      formConfig: {
        fields: [
          {
            key: 'username',
            label: '用户名',
            type: 'text',
            editConfig: {
              disabled: true // 编辑模式下禁用
            }
          },
          {
            key: 'email',
            label: '邮箱',
            type: 'email',
            editConfig: {
              disshow: true // 编辑模式下隐藏
            }
          }
        ]
      }
    }
  }
}
</script>

暗黑主题

组件支持暗黑主题,会自动跟随系统主题切换。也可以通过CSS变量自定义主题样式:

/* 亮色主题 */
:root {
  --page-bg: #ffffff;
  --card-bg: #f5f5f5;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: #dcdfe6;
  --hover-color: #f5f5f5;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/* 暗色主题 */
:root[theme-mode="dark"] {
  --page-bg: #121212;
  --card-bg: #1e1e1e;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --border-color: #333333;
  --hover-color: #2d2d2d;
  --shadow-color: rgba(0, 0, 0, 0.3);
}

表单验证

支持多种验证规则:

{
  rules: [
    { required: true, message: '必填项' },
    { minLength: 6, message: '最少6位' },
    { maxLength: 20, message: '最多20位' },
    { pattern: /^1\d{10}$/, message: '手机号格式不正确' },
    { 
      validator: (value, formData) => {
        return value === formData.password
      },
      message: '两次密码不一致'
    }
  ]
}

Props

参数 说明 类型 默认值
config 表单配置对象 Object -
is-edit 是否为编辑模式 Boolean false
initial-data 编辑模式下的初始数据 Object {}

Events

事件名 说明 回调参数
submit 表单提交时触发 formData: Object
reset 表单重置时触发 -

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问