🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 说明 **表单构建器**提供的表单字段类型(含自定义字段类型)除了在表单构建器里面集成使用外,还可以单独调用渲染使用。 > 提示!字段集合顶部容器须携带属性lay-filter="{{formId}}" * html ```html <div class="layui-form" lay-filter="test_form"> <div class="field-box text"> <div class="title">单行文本框示例</div> <div class="control"></div> </div> ... </div> ``` * js ```javascript layui.use(['yunj'],function (){ // 配置项 let options = { formId:"test_form", key:"text_key", args:{ "placeholder":"测试文本框" } }; yunj.formField("text",options).then(field=>{ // 指定父容器渲染 return field.render(`.field-box.text .control`).then(res=>{}); }).then(field=>{ // field为当前字段对象 }).catch(err=>console.log(err)); }); ``` ## 方法 **yunj.formField(type,options)** 构建字段对象。 此方法返回值是一个promise对象,执行成功返回字段对象,根据字段对象可渲染字段html结构 / 设置字段值 / 获取字段值 * 参数 | key | 类型 | 是否必须 | 说明 | | --- | --- | --- | --- | | type | string | 是 | 字段类型,详见:[字段配置](https://www.kancloud.cn/worklz/yunj_admin_tp51/2526419) | | options | object | 是 | 配置项 | * 配置项参数 | key | 类型 | 是否必须 | 说明 | | --- | --- | --- | --- | | formId | string | 是 | 表单id | | key | string | 是 | 字段key | | args | object | 否 | [字段配置](https://www.kancloud.cn/worklz/yunj_admin_tp51/2526419) | 注意:字段配置args中`type`属性不再必须(由`yunj.formField(type,options)`第一个参数取代),`title`/`desc`属性不设置的情况下,不再渲染对应属性的html结构。 ## 常用方法 * **yunj.formClear(formId)** 清空表单id对应的所有字段值 * **yunj.formReset(formId)** 重置表单id对应的所有字段值 * **yunj.formData(formId,validate)** 获取表单id对应的所有字段值,传入validate则会自动校验参数。示例如下: ```javascript layui.use(["yunj","validate"],()=>{ let validate = yunj.validate; let data = yunj.formData("test",validate); }); ```