Dcat-Admin框架JS颜色管理--Dcat-Admin框架实战(十六)

目录

一、颜色管理文件位置

二、介绍颜色函数

1、获取内置颜色代码

2、颜色淡化

小探究（JS加不加分号？）

3、深化颜色

小发现（深化/淡化其实是一个函数？）

4、颜色透明化

5、获取所有内置颜色

---

一、颜色管理文件位置

JS颜色管理文件位于/home/admin/test10/vendor/dcat/laravel-admin/resources/assets/dcat/js/extensions/Color.js

（其中，test10为我的项目名称；/home/admin/test10/为我的项目路径）

可以看到里面有各种 我们页面颜色设计中要用到的函数（例：.get() .lighten .darken() --后面我们依次详细讲解这几个函数）

（更多博文，欢迎来我的博客学习交流https://blog.youkuaiyun.com/have_a_cat）

二、介绍颜色函数

通过 Dcat.color 对象来调用JS颜色管理的各个函数。

1、获取内置颜色代码

Admin::script(

<<<JS

    var primary1 = Dcat.color.primary;  /* 方法一，将得到#5c6bc6 */

    var primary2 = Dcat.color['primary'];  /* 方法二，将得到#5c6bc6 */

    /* （更多博文，欢迎来我的博客学习交流https://blog.youkuaiyun.com/have_a_cat） */

    var primary3 = Dcat.color.get('primary'); /* 方法三，将得到#5c6bc6 */

JS

);

/* 其中的primary为颜色别名，你也可以换成 info、success、danger等 */

2、颜色淡化

Admin::script(

    <<<JS

    var primary = Dcat.color.lighten('primary', 10)

       /* 将得到#6675d0 （更多博文，欢迎来我的博客学习交流https://blog.youkuaiyun.com/have_a_cat）*/

JS   

);

/* 其中的primary为颜色别名，10表示颜色淡化的程度，值越大颜色越淡 */

小探究

这里大家发现第3行没有分号哈，总写C/JAVA的我 着实是困惑了一下啊，

又看了好几段JS代码，发现有的有分号、有的没分号，我就更困惑了！

（更多博文，欢迎来我的博客学习交流https://blog.youkuaiyun.com/have_a_cat）

扒了扒后，得出结论“JS中，分号就像本姑娘的 发饰，随本姑娘的心情♥-->“想戴发饰的时候就戴，不想戴发饰就不戴”-->”想加分号的时候就加，不想加分号就不加””

因为：编译器能根据“换行”等操作，准确判断【代码一句结束了】。

3、深化颜色

Admin::script(

    <<<JS

    var primary1 = Dcat.color.darken('primary', 10)  /* 方法一，将得到#5261bc */

var primary2 = Dcat.color.darken('5c6bc6', 10)  /* 方法二，将得到#5261bc */

JS   

);

/* 其中的primary为颜色别名，5c6bc6表示颜色编码，10表示颜色深化的程度，值越大颜色越深 */

小发现

闲来无事，有猫彬 又扒了下源码，发现Dcat Admin框架JS颜色中，Dcat.color.darken()其实是调用Dcat.color.lighten()

/* Color.js中源码截取 */

        // 颜色转亮

        newInstance.lighten = function (color, amt) {

            return _this.lighten(newInstance.get(color), amt)

        };

        /* （更多博文，欢迎来我的博客学习交流https://blog.youkuaiyun.com/have_a_cat） */

        // 颜色转暗

        newInstance.darken = (color, amt) => {

            return newInstance.lighten(color, -amt)

        };

4、颜色透明化

Admin::script(

    <<<JS

    var primary1 = Dcat.color.alpha('primary', 0.1) /* 方法一，将得到rgba(92, 107, 198, 0.1)  */

var primary2 = Dcat.color.alpha('5c6bc6', 0.1) /* 方法二，将得到rgba(92, 107, 198, 0.1) */

JS   

);

/* 其中的primary为颜色别名，5c6bc6表示颜色编码，0.1表示可见度，值越小 越不可见 透明度越高，可见度取值范围为0~1 */

/*（更多博文，欢迎来我的博客学习交流https://blog.youkuaiyun.com/have_a_cat）*/

5、获取所有内置颜色

Admin::script(

<<<JS

var allColors = Dcat.color.all();

JS   

);

/* Dcat.color.all()方法获取所有内置颜色的 16 进制代码，返回一个键值对对象。 */

在一步一步学习Dcat-Admin框架的过程中，逐渐体会到“看框架源码的重要性”。

（之前学JAVA时，老师总说会用框架、也要懂框架，可惜当时没意识到[读源码]的重要性）

                                                   ----2021年5月24日