PHP页面构建器自动生成页面 - 万能的组件component

组件介绍

扩展地址 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);

Wo59d.png

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!