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);
相关推荐
程序员清洒13 分钟前
Flutter for OpenHarmony:GridView — 网格布局实现
android·前端·学习·flutter·华为
running up that hill1 小时前
Android的线性布局
android
m0_748229991 小时前
Laravel9.x核心特性全解析
android
2603_949462103 小时前
Flutter for OpenHarmony社团管理App实战:意见反馈实现
android·flutter
错把套路当深情4 小时前
android两种渠道支持一键打包 + 随意组合各种渠道
android
彬sir哥5 小时前
android studio如何把.gradle从C盘移到D盘
android·gradle·maven·android studio
、BeYourself6 小时前
TabLayout 与 ViewPager2 的基本使用
android·android-studio
南村群童欺我老无力.6 小时前
Flutter 框架跨平台鸿蒙开发 - 城市文创打卡:探索城市文化创意之旅
android·flutter·华为·harmonyos
Madison-No77 小时前
【Linux】文件操作&&重定向原理
android·linux·运维
2603_949462107 小时前
Flutter for OpenHarmony社团管理App实战:消息中心实现
android·javascript·flutter