组件介绍

扩展地址 gitee.com/iszsw/surface

系统中所有组件继承自 Component::class基础类,基础类的主要作用是将php的array数据转换成json字符串，component可以生成任意组件，而且内置了s-form和s-table组件可以轻松实现表格表单的功能。

组件使用

$component = (new Component())
    // 标签名称
    ->el('el-button') 
    // 该组件下的参数
    ->props(['class'=>"component", 'id'=>'aa']) 
    // 本组件插入插槽使用
    ->slot('header') 
    // 子组件(string|array<Component>)
    ->children([(new Component())]) 

    // 双向数据绑定方法
    // 全局创建一个名为$name的ref响应式对象
    ->ref($name, $value)
    // 全局创建一个名为$name的reactive响应式对象
    ->reactive($name, $value)
    //注册一个名字为$name的ref对象并绑定到当前对象的v-model:$attr属性中
    ->vModel( $value, $attr='modelValue', $name)

    // 事件注册 系统目前只有Component::EVENT_VIEW事件，页面渲染时触发
    ->listen($event, $handler, $once:触发一次, $first:优先)

    // 生成页面（不包含静态资源，同一个页面引入多个独立组件时减少资源浪费）
    ->display(?Surface $surface = null)
    // 生成页面（完整页面）
    ->view(?Surface $surface = null); 

自定义组件

use surface\Component;
use surface\Surface;

$surface = new Surface();

// 注册组件 <script>标签方便代码提示 程序会自动移除
$surface->register(
    \surface\Functions::create(
        "
<script>
app.component('counter', {
      props: {
        modelValue: {
            type: [Number],
            default: 0
        }
      },
      emits: ['update:modelValue'],
      setup(props, {emit}) {
        const value = Vue.computed({
            get(){
                return props.modelValue
            },
            set(val) {
                emit('update:modelValue', val)
            }
        })
        return {
            value
        }
      },
    template: `<el-button @click='value++'>共 {{value}} <slot>默认插槽</slot></el-button><slot name='append'>自定义插槽</slot>`,
})
</script>
", ["app"]
    )
);

$component = (new Component('counter'))->vModel(10, name: 'counterRef')
    ->children(
        [
            "个", // 默认插槽
            (new Component('h1'))->slot('append')
            ->children(\surface\Functions::create( "return {$surface->data()}.counterRef.value")
            ),
        ]
    );

echo $component->view($surface);

本作品采用《CC 协议》，转载必须注明作者和本文链接