PHP code example of iruska / surface

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

iruska / surface example snippets

// Table组件示例
$tbales = [
    new selection("id"),
    (new Column('id', '普通组件'))->props('width', '50px'),
    (new Expand('address', '折叠'))->scopedSlots(
        [
            (new Component())->el('span')
                // 【重要】将当前列字段address的值注入innerHTML，需要注入到多个属性使用 Array
                ->inject('domProps', 'innerHTML') 
                ->style('width', '80px'),
        ]
    ),
    (new Column('status', '开关组件'))->scopedSlots(
                [
                    //支持url替换 {字段}替换成当前列参数
                    (new Switcher())->props(['async' => ['data' => ['id', 'a' => 'b'], 'method' => 'POST', 'url' => '/change/{id}/{username}']]),
                ]
            )->props('width', '150px'),

    (new Column('thumbnail', '自定义显示内容'))->scopedSlots(
                [
                    (new Component())->el('el-image')->inject('attrs', ['src', 'array.preview-src-list'])->style('width', '80px'),
                ]
            )->props('width', '100px'),
    
    (new Column('options', '操作'))->props('fixed', 'right')// 右侧浮动
        ->scopedSlots(
            [
                (new Button('el-icon-delete', '删除'))
                    // 【重要】当前列_delete_visible的值为true时才显示按钮
                    ->visible('_delete_visible')
                    //支持url替换 {字段}替换成当前列参数
                    ->createConfirm('确认删除数据？', ['method' => 'DELETE', 'data' => ['id'], 'url' => 'delete/{id}']),
            ]
        ),
];
// Form组件示例
$form = [
    (new Input('username', '用户名'))
        ->input('username', '用户名', '用户名必须填，必须！必须！必须！')
        ->marker('要不得')
        ->validate( // 验证 支持页面验证+后台验证
            [
                ['   'selected' => ! 1,
                    'children' => [
                        [
                            'id'       => 101,
                            'title'    => 'a1',
                            'expand'   => ! 0,
                            'children' => [
                                [
                                    'id'    => 10101,
                                    'title' => 'a11',
                                ],
                            ],
                        ],
                    ],
                ],
            ],
            'props'             => ['label' => 'title'],
        ]
    ),
    new Editor('content', '说明', '<h1>666</h1>'),
    (new Number('pricea', '我是惊喜', 2))->marker('惊不惊喜')->props('step', 5)
        ->visible([['prop' => 'priceb', 'value' => 10],]), // 字段显示条件配置
    (new Number('priceb', '价格', 8))->marker('把我加到10有惊喜'),
];


// 自定义组件和全局事件绑定
$mixin = <<<JS
<script>
    // 全局混入事件
    Vue.mixin({
            methods: {
                hello() {
                    alert("全局混入事件")
                    // \$surfaceForm 是surfaceForm API对象
                    \$surfaceForm.change(this.prop, 'ok')
                }
            }
        })
        
    // 自定义组件 注册world组件
    surfaceForm.component({
        name: 'world',
        events: {
            // 参数初始化时（组件未注册）调用
            onInit(c) {
                console.log('surfaceForm自定义组件配置初始化')
            }
        },
        component: {
            name: 'world',
            props: {
                label: String,
                prop: String,
                value: [String],
                model: Object
            },
            render(h) {
                return h("el-button", {
                    on: {
                        click() {
                            alert('surfaceForm组件注册')
                        }
                    }
                }, this.value)
            }
        }
    })
</script>
JS;

// 注册js资源
$form->addScript($mixin);

// 点击事件绑定hello方法
$form->column('button','绑定事件','')->el('el-button')->on('click', 'hello')->children(["全局混入事件"]),
$form->column('world','自定义组件','surface-form自定义world组件')->el('world'),