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);
相关推荐
杉氧3 小时前
Navigation Compose 深度实践:如何优雅地串联起你的全栈 App?
android·架构·android jetpack
雨白6 小时前
指针与数组的核心机制
android
黄林晴11 小时前
Room 3.0 正式发布!包名彻底重构,KMP 成为核心主线
android·android jetpack
三少爷的鞋11 小时前
Kotlin 协程环境下的 DCL 懒加载:别把线程时代的经验直接搬过来
android
plainGeekDev12 小时前
Gson → kotlinx.serialization
android·java·kotlin
CYY951 天前
Compose 入门篇
android·kotlin
杉氧1 天前
Compose 时代的 MVI 架构:如何用单向数据流驱动复杂 UI?
android·架构·android jetpack
杉氧1 天前
Modifier 的艺术:为什么链式调用的顺序决定了UI 的生命周期?
android·架构·android jetpack
李斯维1 天前
腾讯 XLog 日志框架 Android 端接入
android·android studio·android jetpack