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 分钟前
Flutter & OpenHarmony 运动App运动提醒组件开发
android·java·flutter
QING6184 分钟前
Kotlin Flow 中 flatMap 与 flatMapLatest 的核心差异 —— 新手指南
android·kotlin·android jetpack
行稳方能走远17 分钟前
Android C++ 学习笔记 2
android·c++
2501_946233891 小时前
Flutter与OpenHarmony我的作品页面实现
android·javascript·flutter
鹏多多1 小时前
Flutter下拉刷新上拉加载侧拉刷新插件:easy_refresh全面使用指南
android·前端·ios
studyForMokey1 小时前
【Android Gradle】Gradle系列
android
HeDongDong-1 小时前
Kotlin Lambda 表达式详解
android·开发语言·kotlin
行稳方能走远4 小时前
Android C++ 学习笔记3
android·c++
7ioik9 小时前
Explain关键字?
android