add color picker form component

eddy8 · Dec 8, 2023 · e60fb0d · e60fb0d
1 parent ab9e9c4
commit e60fb0d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/config/light.php b/config/light.php
@@ -85,6 +85,7 @@
         'reference_category' => '引用分类数据',
         'reference_admin_user' => '引用管理员数据',
         'jsonEditor' => 'JSON编辑器',
+        'colorPicker' => '颜色选择器',
     ],
 
     // NEditor相关

diff --git a/resources/views/admin/content/add.blade.php b/resources/views/admin/content/add.blade.php
@@ -222,6 +222,30 @@ function addLoadEvent(func) {
                                     </div>
                                 </div>
                                 @break
+                            @case('colorPicker')
+                                <div class="layui-form-item">
+                                    <label class="layui-form-label">{{ $field->form_name }}</label>
+                                    <div class="layui-input-inline" style="width: 120px;">
+                                        <input type="text" name="{{ $field->name }}" class="layui-input" id="{{ $field->name }}" value="{{ $model->{$field->name} ?? $field->form_default_value }}" placeholder="请选择颜色">
+                                    </div>
+                                    <div class="layui-inline" style="left: -11px;">
+                                        <div id="color-picker-{{ $field->name }}"></div>
+                                    </div>
+                                </div>
+                                <script>
+                                    //表单赋值
+                                    addLoadEvent(function () {
+                                        var colorpicker = layui.colorpicker;
+                                        colorpicker.render({
+                                            elem: '#color-picker-{{ $field->name }}'
+                                            ,color: '{{ $model->{$field->name} ?? $field->form_default_value }}'
+                                            ,done: function(color){
+                                                $('#{{ $field->name }}').val(color);
+                                            }
+                                        });
+                                    });
+                                </script>
+                                @break;
                             @case('markdown')
                                 @if(!isset($markdown_init))
                                     @php