提供各种丰富的表单字段

创建字段

  1.  $form->item('username', '用户名')

默认值

新增时生效

$form->item()->defaultValue('xxx');

隐藏Label文字

$form->item()->hideLabel();

设置Label宽度

表单域标签的的宽度，例如 ‘50px’。支持 auto。

$form->item()->labelWidth('auto');

设置表单域的宽度

表单域输入区域宽度 1 - 24

$form->item()->inputWidth(5);

复制其他字段值

编辑时复制其他字段的值，例如在确认密码框时可以用到

$form->item('password_confirmation', '确认密码')->copyValue('password')

$form->item('password', '密码')->serveRules(['required', 'string', 'min:8', 'confirmed'])
    ->component(function (){
        return Input::make()->password()->showPassword();
    })
$form->item('password_confirmation', '确认密码')
    ->copyValue('password')
    ->component(function () {
        return Input::make()->password()->showPassword();
    })

是否必填

前后端同时生成验证规则
注意：前端默认验证数据类型是string，如果是其他的必须指定类型，要不然会验证失败

 $form->item('username', '用户名')->required()
 $form->item('username', '用户名')->required("string","必填", "blur")

后端规则

//通用规则
$form->item('username', '用户名')->serveRules(["required"])
//创建时规则
$form->item('username', '用户名')->serveCreationRules(["required"])
//更新时规则
$form->item('username', '用户名')->serveUpdateRules(["required"])
//自定义验证消息
$form->item('username', '用户名')->serveRulesMessage(["required" => '必填'])

前端规则

更多高级用法可参考 async-validator。

:::danger 如果同时调用了required()，required()需要在vueRule()或者vueRuleRaw()后调用 :::

 $form->item('username', '用户名')->vueRule(true, "string","必填", "blur");
//多个规则可设置多次
$form->item('username', '用户名')->vueRule(true, "string","必填", "blur")->vueRule(true, "string","必填", "blur");

使用自定义规则

$form->item()->vueRuleRaw(array);//需要传入验证规则数组

错误信息

 $form->item('username', '用户名')->error("error")

显示错误信息

 $form->item('username', '用户名')->showMessage()

行内展示信息

 $form->item('username', '用户名')->inlineMessage()

组件的尺寸

 $form->item('username', '用户名')->size("small")

动态显示/隐藏

根据其他字段的值显示或隐藏当前字段

$form->item('username', '用户名')->vif("key","value")
$form->item('username', '用户名')->vif("email",false,true) // 表示填写email任意字符之后才会出现username 注意第二个参数最好不要用null或者可能存在的值
$form->item('username', '用户名')->vif("key.key","value") //支持点操作

表达式方式

基于eval实现

 $form->item('username', '用户名')->vifEval(function (Form\Utils\VIfEval $eval) {
     //需要监听的字段，必须是数组
     $eval->props(['is_rec', 'is_hot']);
     //表达式字符串
     $eval->functionStr("console.log(this.form_data)");
     //读取js文件，文件地址随意，这个优先级大于functionStr
     $eval->functionPath(admin_path('Script/demo.js'));
 });

js表达式模板

建议在Admin目录下创建一个Script文件夹

(function (form_item, form_items, form_data) {
    console.log(form_item,form_items,form_data);
    return true;
})(this.formItem, this.formItems, this.formData);
//----------可复制上面的代码，下面是说明

//必须返回true或false

//内置lodash对象，可调用所有方法，文档：https://www.html.cn/doc/lodash/
window._
//当前字段属性
formItem
//当前所有表单字段属性
formItems
//当前表单的值
formData

忽略空值(留空则不修改)

若此字段的值为 ‘’/null/undefined 或 空对象/空数组 则在提交的表单对象中删除键名

$form->item('password', '密码')->ignoreEmpty()

隐藏组件

有些字段在编辑或创建状态下并不一致需要，配合ignoreEmpty使用效果更佳

## 创建时不输入密码
$form->item('password', '密码')->hiddenMode('create')
$form->item('password', '密码')->hiddenInCreate()

## 编辑时不输入密码
$form->item('password', '密码')->hiddenMode('edit')
$form->item('password', '密码')->hiddenInEdit()

帮助信息

支持 html

 $form->item('username', '用户名')->help("help content")

头部/底部组件

会在当前字段上下添加组件，常用于字段内部分块

$form->item()->topComponent(Divider::make("详细信息"))
$form->item()->bottomComponent(Divider::make("详细信息"));

表单域渲染组件

$form->item()->component(Input::make());
//或者
$form->item()->component(function(){
    return Input::make();
});

表单域上下左右组件

在表单域组件的上下左右添加组件，如下图
image.png

$form->item()->componentTopComponent();
$form->item()->componentBottomComponent();
$form->item()->componentLeftComponent();
$form->item()->componentRightComponent();

示例代码

 $form->item('Cascader')->component(function (){
            return Cascader::make()->options((new Tree())->toTree())->value('id')->label('title')->expandTrigger('hover')->ref('Cascader');
        })->componentBottomComponent(function (){

            $js = <<<JS
ref.attrs.panel = !ref.attrs.panel
JS;
            return Button::make("改变Cascader面板模式")->type('danger')->size('mini')->plain()->refData('Cascader',$js)->className('mt-10')->tooltip('我是动态注入实现的功能');
        });