Dcat-admin使用 Alpine 双向数据绑定

廖圣平2023-07-20 15:27

介绍

Alpine.js 这东西真的轻量级，和vue相似，和 livewire 同一个作者，推荐大家使用，可以平替jquery

效果

实现

在 bootstrap.php 引入js

php 复制代码

Admin::headerJs([
    'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/alpinejs/3.9.0/cdn.min.js',

]);

自定义表单初始化

php 复制代码

     $data = $this->data;
        $text = $data[SysDict::KEY_MERCHANT_YM_APP_WEB] ?? '';

        $this->setHtmlAttribute([
            'x-data' => "{ open: false , text:'$text' }",
        ]);

类似 v-model 绑定到组件

php 复制代码

  $this->url(SysDict::KEY_MERCHANT_YM_APP_WEB, '备案网站')->required()->attribute([
            'x-model' => 'text',
        ]);

在自定义表单输出

php 复制代码

        $this->html(<<<HTML
       首页信息： <span x-text="text"></span>
HTML);

上一篇：Angular 调试工具（Augury）

下一篇：八股文(消息队列)