通過自定義類，自定義模板來實(shí)現(xiàn)特定需求，如何引入js,css文件，如果在自定義的類或者模板里，添加css，js代碼？

接下來以自定義的動作類來進(jìn)行舉例說明，創(chuàng)建一個(gè)全局動作類

php artisan admin:action
選擇0，可以應(yīng)用到任何位置
Which type of action would you like to make?:
  [0] default
  [1] grid-batch
  [2] grid-row
  [3] grid-tool
  [4] form-tool
  [5] show-tool
  [6] tree-row
  [7] tree-tool
 > 0

在這個(gè)類里，引入相應(yīng)的 JS，CSS靜態(tài)資源文件，有兩種辦法。

1. 通過注冊組件的方式

在Dcat 框架中，靜態(tài)資源的存儲位置目錄是在

public/vendor/dcat-admin/dcat/plugins

所有的JS組件和對應(yīng)的css文件默認(rèn)都放在這里，當(dāng)然我們也可以在其它目錄上傳資源文件。

先進(jìn)入app\Admin\bootstrap.php文件
官方手冊：https://learnku.com/docs/dcat-admin/2.x/static-resources/9720#3c8750

在bootstrap.php 做兩件事：
（1）注冊路徑別名
（2）注冊組件

注冊路徑別名，可以先把前面的目錄綁定到變量上，這樣后面就可以少寫一些代碼了。

Admin::asset()->alias('@jiemo','vendor/dcat-admin/dcat/plugins');

然后注冊組件
使用Admin::asset()方法，返回Dcat\Admin\Layout\Asset對象.
繼續(xù)調(diào)用alias()方法，注冊組件，將自己想引入的js和css文件，如下所示放入到數(shù)組里。

Admin::asset()->alias('@market',[
    'js'=>[
      '@jiemo/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js',
    ],
    'css'=>[
        '@jiemo/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css',
    ],
]);

在類里使用

在自定義的類中，比如在html()方法里，通過Admin::requireAssets()方法引入注冊的靜態(tài)資源文件組件。

這樣js和css文件就會被直接引入。

public function html(){
        Admin::requireAssets(['@market']);
}

第二個(gè)辦法：在類里單獨(dú)加載

第二個(gè)辦法將使用Admin::js() 和Admin::css()方法

在類里，先定義兩個(gè)靜態(tài)成員屬性，將想引入的js和css文件路徑 加入到類屬性里。

class AdminTable extends Action
{

    public static $js=[
        'vendor/dcat-admin/dcat/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js'
    ];

    public static $css=[
        'vendor/dcat-admin/dcat/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css'
    ];

通過Admin::js() 和Admin::css()方法，引入對應(yīng)的靜態(tài)資源文件。

public function html(){
        Admin::js(static::$js);
        Admin::css(static::$css);

也可以根據(jù)需求，直接填寫相對路徑，通過Admin::js()，Admin::css() 方法

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

        Admin::css([
            '/assets/css/index2.css'
        ]);
    }
}

動態(tài)添加JS，css代碼

如果添加動態(tài)的js,css代碼，有下面兩個(gè)方法可以使用

Admin::script()
Admin:style()

使用說明：
在script()方法中，直接傳入一個(gè)多行字符串，就可以了。

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

css代碼也一樣

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

最后渲染的時(shí)候，就可以看到加入的js和css代碼了。

在自定義模板中引入靜態(tài)資源和代碼

之前的操作都是在Dcat Admin定義的類中，引入靜態(tài)資源，如果直接在自定義的模板里，引入資源文件，可以如下操作：

使用admin_asset()函數(shù)，后面添加的路徑從vendor開始，這塊要記住。

// 引入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>

在模板中寫動態(tài)JS代碼

模板里JS代碼，就必需要寫在Dcat.ready()方法內(nèi)部了，它的使用就像jquery一樣。

<script>
Dcat.ready(function () {
   console.log('所有js都加載完成了'); 
});
</script>

關(guān)于Dcat JS組件的用法，可以看官方手冊：https://learnku.com/docs/dcat-admin/2.x/js-component/8087#82eb9e

通過npm 安裝 新的js組件

測試過后發(fā)現(xiàn)，通過npm安裝，或者下接下載相關(guān)組件，然后手動上傳到dcat框架的組件目錄就可以了。