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

介绍

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);
相关推荐
心平气和量大福大2 小时前
android-控件-搜索框SearchView
android·gitee
2601_962177132 小时前
【MySQL篇】聚合查询,联合查询
android·java·mysql
壮哥_icon3 小时前
【Android】批量 VectorDrawable 动态分别修改 fillColor 和 strokeColor 的踩坑与终极解决方案
android
齐天qaq4 小时前
Android 系统 APK 分区与权限
android
心平气和量大福大4 小时前
android-控件-多选框CheckBox
android·gitee
pengyu6 小时前
【Kotlin 协程修仙录 · 大乘境 · 初阶】 | 跳出三界:协程在 KMP 与后端开发中的跨平台之道
android·kotlin
XiaoLeisj6 小时前
Android Memory Profiler:堆内存指标、内存抖动与泄漏定位
android·性能优化·内存抖动·内存泄露·memory profiler
未来猫咪花6 小时前
Everything is ViewModel:让状态管理回到对象世界
android·flutter·ios
古法安卓6 小时前
Android-重启流程源码解析
android·java·android studio