智能表单
AGCPlayer版本要求>=2.2.0
内置组件
小组件智能表单内置了常用的表单组件，满足各种场景需求：
- input: 文本输入框
- inputNumber：数字输入框
- checkbox：复选框
- radio：单选框
- switch：开关
- select：下拉选择框
- datePicker：日期选择器
- timePicker：时间选择器
- slider：滑块
- subForm (分组)：分组组件
示例代码
开启智能表单前置条件
widget.json配置permission为LOGINwidget.json配置settings.form表单规则
{
"id": "widget.agcplayer.demo",
"author": "AGC Player",
"version": "0.0.4",
"agcplayer-require": "^2.2.0",
"name": "Demo动态表单",
"type": "video-hub",
"platform": "all",
"summary": "This is a aimoon widget.",
"description": "This is a aimoon widget, JavaScript script.",
"disclaimer": "For demonstration only.",
"permission": "LOGIN",
"settings": {
"form": [
{
"type": "subForm",
"field": "group",
"title": "分组一",
"props": {
"rule": [
{
"type": "input",
"field": "text1",
"title": "文本输入框",
"value": "默认值",
"required": false,
"props": {
"placeholder": "占位文本"
}
},
{
"type": "input",
"field": "text2",
"title": "多行输入框",
"required": true,
"props": {
"type": "textarea",
"paste": true // 是否开启粘贴功能
}
}
]
}
},
{
"type": "subForm",
"field": "group2",
"title": "折叠演示-默认关闭",
"required": false,
"props": {
"collapse": true, // 是否支持折叠功能
"expand": false, // 是否默认展开
"rule": [
{
"type": "switch",
"field": "switch1",
"title": "开关",
"props": {
"activeValue": true,
"inactiveValue": false
}
},
{
"type": "radio",
"field": "radio1",
"title": "单选框",
"required": false,
"options": [
{
"label": "选项01",
"value": "1"
},
{
"label": "选项02",
"value": "2"
},
{
"label": "选项03",
"value": "3"
}
]
},
{
"type": "checkbox",
"field": "checkbox1",
"title": "多选框",
"required": false,
"options": [
{
"label": "选项01",
"value": "1"
},
{
"label": "选项02",
"value": "2"
},
{
"label": "选项03",
"value": "3"
}
]
},
{
"type": "select",
"field": "select1",
"title": "选择器",
"required": false,
"options": [
{
"label": "选项01",
"value": "1"
},
{
"label": "选项02",
"value": "2"
},
{
"label": "选项03",
"value": "3"
}
]
},
{
"type": "select",
"field": "select2",
"title": "选择器(多选)",
"required": false,
"props": {
"multiple": true // 是否支持多选
},
"options": [
{
"label": "选项01",
"value": "1"
},
{
"label": "选项02",
"value": "2"
},
{
"label": "选项03",
"value": "3"
}
]
}
]
}
},
{
"type": "subForm",
"field": "group3",
"title": "折叠演示-默认展开",
"required": false,
"props": {
"collapse": true,
"expand": true,
"rule": [
{
"type": "switch",
"field": "switch2",
"title": "开关",
"props": {
"activeValue": true, // switch 状态为 on 时的值
"inactiveValue": false // switch的状态为 off 时的值
}
}
]
}
},
{
"type": "input",
"field": "text3",
"title": "密码输入框",
"required": false,
"props": {
"type": "password"
}
},
{
"type": "inputNumber",
"field": "field_phone",
"title": "数字输入框",
"required": false,
"props": {
"min": 1, // 可输入的最小值
"max": 999, // 可输入的最大值
"precision": 2 // 精度
}
},
{
"type": "inputNumber",
"field": "field_phone2",
"title": "数字输入框(没有配置项)",
"required": false
},
{
"type": "timePicker",
"field": "field_time",
"title": "时间",
"required": false
},
{
"type": "datePicker",
"field": "field_date",
"title": "日期",
"required": false
},
{
"type": "slider",
"field": "slider_name",
"title": "滑块",
"required": false,
"props": {
"min": 0, // 滑块的最大值
"max": 199, // 滑块的最小值
"step": 2 // 步长
}
}
]
}
}
数据结构
type Rule = {
// 生成组件的名称，例如 'input', 'select' 等
type: string;
// 表单字段名称，用于数据绑定
field: string;
// 字段标签
title: string;
// 控件的默认值
value?: any;
// 是否必填
required?: boolean；
// 控件的属性配置
props?: Object;
}
基础配置
type
- 类型:
string - 说明: 设置生成的控件类型名称，例如 'input', 'select' 等
- 示例:
{ type: 'input' }
field
- 类型:
string - 说明: 表单控件的字段名称，通常用于数据绑定。每个表单项的 field 都应该是唯一的，用于将控件的值与表单数据进行关联。
- 示例:
{ type: 'input', field: 'username' }
title
- 类型:
string - 说明: 字段的标题，通常显示为表单标签。
- 示例:
{ type: 'input', field: 'username', title: '用户名' }
value
- 类型:
any - 说明: 控件的默认值。
- 示例:
{ type: 'input', field: 'username', value: '默认用户名' }
props
- 类型:
object - 说明: 设置组件的 props 属性，用于控制组件的行为。props 的配置取决于具体控件的属性，例如 input 组件的 placeholder、type 等。
- 示例:
{ type: 'input', field: 'username', props: { placeholder: '请输入用户名' } }