laravel-admin实战做个简单的客户管理——美化表单，让表现更人性化
将宽屏少字段的表单字段缩短居中，美观一点。
初始新建表单
初始的表单方法是：\app\Admin\Controllers\FrontCustomerController.php 控制器的form方法，生成的表单，放在宽屏上，不太美观。先用布局的方式，将页面分成3列，只是在中间部分显示表单，结果提交和重置按钮，无法集中在页面中间。所以放弃，这种布局方式的代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 第一列为空 $form->column(1/3, function ($form) { }); // 第二列具体内容 $form->column(1/3, function ($form) use($user_type,$states) { // $user_type,$states 是闭包函数中的变量【我自己定义的，要用到的变量】 }); // 第三列为空 $form->column(1/3, function ($form) { }); |
最后仔细看了一下footer模板，想到了一个折中的办法，就是将整个表单区域设定为40%。利用script将样式添加进去。【因为无法直接贴代码，写的比较简略】
|
1 2 3 4 |
use Encore\Admin\Admin; //用来写入js脚本 .... $script = //给表单增加样式的脚本 表单内容：box-body 底部按钮部分：box-footer Admin::script($script); |
接下来完成，选择下拉框中的用户类型，输入框进行联动。
代码很容易看明白，就是当选择下拉框里的值是mobile…等等值得时候，form生成不同限制的表单组件。这个功能是laravel-admin提供的。官方文档传送门
[PS:在后继的开发中，发现不适合本项目，因为本项目中，user_name是必填，并且是唯一，而本功能是生成3个输入框。这时候提交，则会提示3个相同id的文本框。]
|
1 2 3 4 5 6 7 8 9 10 |
$form->select('user_type', __('User type'))->options($user_type)->required() ->when('mobile', function (Form $form) { $form->mobile('user_name', __('User name'))->required()->placeholder('请输入手机号码'); }) ->when('email', function (Form $form) { $form->email('user_name', __('User name'))->required()->placeholder('请输入邮箱'); }) ->when('wechat', function (Form $form) { $form->text('user_name', __('User name'))->required()->placeholder('请输入微信号'); }); |
美化表单密码，让点击眼睛图标后可以显示密码，主要是js。。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.... $script的内容如下： $(".box-body").css("padding-left","30%"); $(".box-body").css("padding-right","30%"); $(".box-footer").css("padding-left","30%"); $(".box-footer").css("padding-right","30%"); //如果点击闭眼图标，则下一个文本框设置为text，可以查看密码。 $(".input-group").on("click", ".fa-eye-slash", function(event){ var pass = $(this).parent().next(); $(this).removeClass("fa-eye-slash"); $(this).addClass("fa-eye"); pass.attr("type","text"); }); //如果点击眼睛图标，则下一个文本框设置为password，可以隐藏密码。 $(".input-group").on("click", ".fa-eye", function(event){ var pass = $(this).parent().next(); $(this).removeClass("fa-eye"); $(this).addClass("fa-eye-slash"); pass.attr("type","password"); }); Admin::script($script); |
噢！评论已关闭。