## 自定义字段 提供给开发者新增自己想要的表单字段类型`type`，在调用表单构建器`field`方法时使用。注意：`type`名不能与系统提供的类型名冲突，否者会被系统类型覆盖。 ## 使用 * 定义自定义字段和可重写方法 ```javascript // 必须使用模块YunjField并继承 layui.define(['YunjField'], function (exports) { let YunjField = layui.YunjField; class DemoField extends YunjField { constructor(options) { super(options); } // 定义额外的args参数 defineExtraArgs() { return {}; } // 定义字段外部包裹元素html结构，id和__layout__必须 defineBoxHtml() { let that = this; return `<div class="layui-form-item yunj-form-item" id="${that.id}">__layout__</div>`; } // 返回字段标题的html结构 layoutLabel() { let that = this; let labelHtml = ''; if (!that.args.hasOwnProperty("title")) return labelHtml; if (that.args.verify && that.args.verify.indexOf('require') !== -1) labelHtml += `<span class="require">*</span>`; labelHtml += that.args.title; return `<label class="layui-form-label">${labelHtml}</label>`; } // 返回字段控件的html结构 layoutControl() { let that = this; // 可根据属性that.args来设置结构 return `<div class="layui-input-inline yunj-input-inline">...</div>`; } // 返回字段简介的html结构 layoutDesc() { let that = this; if (!that.args.hasOwnProperty("desc")) return ""; return `<div class="yunj-form-item-desc">${that.args.desc}</div>`; } // 渲染前执行 async renderBefore() { return 'done'; } // 渲染后执行 async renderDone() { return 'done'; } // 渲染完后设置值 renderDoneSetValue(val) { let that = this; that.setValue(val); }; // 设置值 setValue(val = '', isReset = false) { let that=this; // that.fieldBoxEl 为当前控件外部父元素 that.fieldBoxEl.find(....).val(val); } // 获取值 getValue() { let that=this; // that.fieldBoxEl 为当前控件外部父元素 return that.fieldBoxEl.find(...).val(); } // 定义额外的事件绑定 defineExtraEventBind() { } } // 模块名需以 field_ 作为前缀 exports('field_demo', DemoField); }); ``` * 自定义字段可调用方法 ```javascript layui.use(['yunj'], function () { let win = window; let doc = document; yunj.formField("demo",{ "formId":"test", "key":"demo_test", "args":{title:"测试字段"} }).then(field=>{ // field为返回字段对象，可通过字段对象调用常用方法 ... }); } ``` 常用方法如下： * **field.render(parentSelector, fieldOutLayout)** 字段渲染 参数： | key | 类型 | 必须 | 说明 | | --- | --- | --- | --- | | parentSelector | string | Y | 外部父容器的jquery选择器 | | fieldOutLayout | string | N | 外部附加结构，例`<div>__layout__</div>`，__layout__必须 | 返回值：promise对象 > 示例：新增一个字段类型`show_datetime`，用来显示表单的操作时间。 * 首先，创建php文件：\application\demo\libs\control\field\ShowTime.php ```php namespace app\demo\libs\control\field; use yunj\control\field\YunjField; class ShowTime extends YunjField { private static $instance; public static function instance(){ if (!self::$instance instanceof self){ self::$instance = new self(); } return self::$instance; } // 定义额外配置项（无额外配置项可不写） protected function defineExtraArgs(){ return [ 'format' => 'Y-m-d H:i:s', // 时间格式 ]; } // 处理配置项（不需要处理可不写） protected function handleArgs($args) { return $args; } } ``` * 其次，创建js文件：/public/static/demo/js/modules/field/show-time.js ```javascript layui.define(['YunjField'], function (exports) { let YunjField = layui.YunjField; class YunjShowTime extends YunjField { constructor(obj={}) { super(obj); } // 控件结构 layoutControl() { let that = this; let controlHtml = `<input type="text" name="${that.id}" ${that.args.required ? 'lay-verify="required"' : ''} placeholder="${that.args.placeholder}" value="" readonly autocomplete="off" class="layui-input">`; return `<div class="layui-input-inline yunj-input-inline">${controlHtml}</div>`; } // 设置值 setValue(val=''){ let that=this; if(!val){ let currTimestamp=yunj.currTimestamp(true); val=yunj.timestampFormat(currTimestamp,that.args.format); } that.fieldBoxEl.find(`input:text[name=${that.id}]`).val(val); } // 获取值 getValue(){ let that=this; return that.fieldBoxEl.find(`input:text[name=${that.id}]`).val(); } } exports('field_show_time', YunjShowTime); }); ``` * 然后，添加配置：\application\yunj\config\control.php ```php return [ // 表单字段 'fields'=>[ 'show_time'=>[ 'args'=>'\\app\\demo\\libs\\control\\field\\ShowTime', 'module'=>'/static/demo/js/modules/show-time', ], ], ]; ``` * 最后，调用表单构建器配置字段 ```php $builder=YF('general_example') ->tab(['base'=>'基础','other'=>'其他']) ->field(function ($tab){ $field=[ 'demo_show_time'=>[ 'title'=>'操作时间', 'type'=>'show_time', //'value'=>'2020-12-03 19:17:12', ],... ]; return $field; }) ``` > 结果展示：