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);
相关推荐
薿夜4 小时前
SpringSecurity(三)
android
zh_xuan9 小时前
Android Hilt实现依赖注入
android·hilt
freshman_y9 小时前
Qtcreator怎么新建安卓项目?编写一个五子棋游戏APP?
android·qt
时寒的笔记10 小时前
js逆向7_案例惠nong网
android·开发语言·javascript
肯多洛夫斯基11 小时前
安卓工控屏静默连WiFi全攻略
android
极梦网络无忧11 小时前
Android无障碍服务实现抖音直播间界面监控(场控助手核心原理)
android
call me by ur name12 小时前
ERNIE 5.0 Technical Report论文解读
android·开发语言·人工智能·机器学习·ai·kotlin
kerli12 小时前
Compose 组件:Box 核心参数及其 Bias 算法
android·前端
BLUcoding13 小时前
Android 常用控件及核心属性
android
遥不可及zzz13 小时前
[特殊字符] Android AAB 一键安装工具配置指南
android·macos