更新记录
1.2.0(2025-01-13)
下载此版本
✨ 新功能
- 新增表单编辑模式支持
- 新增字段显示/隐藏控制
- 新增字段禁用/只读控制
- 新增自动定位到错误字段功能
- 新增表单验证器支持传递表单数据
1.1.0(2025-01-08)
下载此版本
平台兼容性
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 |
表单重置时触发 |
- |