乌鸦嘴文档 乌鸦嘴文档
乌鸦嘴社区 (opens new window)
乌鸦嘴社区 (opens new window)
  • 入门

    • 介绍
    • 安装
    • v1.x版本升级指南
    • 版本升级须知
    • 快速开始
    • 开发前必读
    • 主题与颜色
    • 静态资源加载
      • 视图与自定义页面
      • 多应用 (多后台)
      • JS组件
      • 常见问题汇总
      • Laravel Octane
    • 数据列表

    • 数据表单

    • 数据详情

    • 模型树

    • 数据仓库

    • 动作

    • 多语言

    • 开发扩展

    • 页面组件

    • 区块

    • 动作以及表单相应

    • 权限控制

    • 菜单

    • 帮助函数

    • 开发工具

    • 自定义登陆

    • 自定义头部导航

    • 更新日志

    目录

    静态资源加载

    # 静态资源加载

    Dcat Admin支持了js脚本按需加载的功能,开发者只需在控制器中或其他任意位置(包括view)中引入需要用到的js组件即可,而无需在项目初始化时引入所有的js组件。

    # 更改静态资源域名

    打开配置文件config/admin.php,找到assets_server参数进行更改即可;也可以在.env中加上

    ADMIN_ASSETS_SERVER=http://xxx.com
    

    # 注册路径别名

    打开app/Admin/bootstrap.php,然后加入以下代码

    Admin::asset()->alias('@my-name1', 'assets/admin1');
    Admin::asset()->alias('@my-name2', 'assets/admin2');
    
    // 也可以批量注册
    Admin::asset()->alias([
    	'@my-name1' => 'assets/admin1',
    	'@my-name2' => 'assets/admin2',
    ]);
    

    使用别名

    Admin::js('@my-name1/index.js');
    Admin::css('@my-name1/index.css');
    

    # 注册组件

    当某个组件的js和css文件比较多的话,我们可以把这些静态资源文件统一注册成一个组件,这样使用的时候会更方便。打开app/Admin/bootstrap.php,然后加入以下代码

    Admin::asset()->alias('@editor-md', [
    	'js' => [
    		// 支持使用路径别名
    		'@admin/dcat/plugins/editor-md/lib/raphael.min.js',
    		'@admin/dcat/plugins/editor-md/lib/marked.min.js',
    		'@admin/dcat/plugins/editor-md/lib/prettify.min.js',
    		'@admin/dcat/plugins/editor-md/lib/jquery.flowchart.min.js',
    		'@admin/dcat/plugins/editor-md/editormd.min.js',
    	],
    	'css' => [
    		'@admin/dcat/plugins/editor-md/css/editormd.preview.min.css',
    		'@admin/dcat/extra/markdown.css',
    	],
    ]);
    

    使用

    Admin::requireAssets(['@editor-md']);
    

    如果你只需要加载这个组件的js或css,并不想加载所有文件,那么可以用以下方法

    // 只加载js文件
    Admin::js('@editor-md');
    
    // 只加载css文件
    Admin::css('@editor-md');
    

    使用动态参数

    use Dcat\Admin\Admin;
    
    // 注册前端组件别名
    // {lang} 为动态参数
    Admin::asset()->alias('@test', [
        'js' => ['/vendor/test/js/{lang}.min.js'],
    ]);
    
    // {lang} 会被替换为 zh_CN
    Admin::requireAssets('@test', ['lang' => 'zh_CN']);
    // 也可以这样使用
    Admin::requireAssets('@test?lang=zh_CN');
    

    # 加载js脚本

    Admin::js方法可以引入js脚本,使用如下:

    class UserController extend Controller
    {
        public function index()
        {
            Admin::js('/assets/js/index.js');
            
            Admin::js([
                '/assets/js/index2.js'
            ]);
        }
    }
    

    # 加载css脚本

    Admin::css方法可以引入css脚本,使用如下:

    class UserController extend Controller
    {
        public function index()
        {
            Admin::css('/assets/css/index.css');
            
            Admin::css([
                '/assets/css/index2.css'
            ]);
        }
    }
    

    # 动态添加js代码

    Admin::script方法可以动态添加js代码,使用如下:

        public function index()
        {
            Admin::script(
                <<<JS
        console.log('Hello world!');
    JS            
            );
        }
    

    # 动态添加css代码

    Admin::style方法可以动态添加css代码,使用如下:

        public function index()
        {
            Admin::style(
                <<<CSS
        body {
            color: #333;
        }
    CSS            
            );
        }
    

    # 在模板中引入静态资源

    在模板中手动引入静态资源需要使用admin_asset函数:

    // 引入css
    <link rel="stylesheet" href="{{ admin_asset("vendor/dcat-admin/dcat-admin/main.min.css") }}">
    
    // 引入js
    <script src="{{ admin_asset('vendor/dcat-admin/dcat-admin/main.min.js')}}"></script>
    

    # 在模板中添加js代码

    要在模板中添加的js代码需要放在Dcat.ready方法内执行,这样才能保证你的js代码在所有js脚本加载完成之后执行。

    <script>
    Dcat.ready(function () {
       console.log('所有js都加载完成了'); 
    });
    </script>
    
    主题与颜色
    视图与自定义页面

    ← 主题与颜色 视图与自定义页面→

    Theme by Vdoing | Copyright © 2020-2022 wyz.xyz 宁ICP备15001739号-5
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×