顏色選擇器文檔 - layui.colorpicker

                    在主題定制的應用場景中,自然離不開顏色的自定義。而你往往需要的是關于它的直觀選擇,于是 colorpicker 模塊姍姍來遲,它支持 hex、rgb、rgba 三類色彩模式,在代碼中簡單的調用后,便可在你的網頁系統中自由拖拽去選擇你中意的顏色。
                    模塊加載名稱:colorpicker

                    注意:colorpicker 為 layui 2.4.0 新增模塊,不支持 ie10 以下版本,其它高級瀏覽器均支持。

                    使用

                    colorpicker 是一款顏色選擇器,如下是一個最基本的用法:

                    <!DOCTYPE html>
                    <html>
                    <head>
                      <meta charset="utf-8">
                      <title>顏色選擇器</title>
                      <link rel="stylesheet" href="../src/css/layui.css">
                    </head>
                    <body>
                    <div id="test1"></div>
                    <script src="../src/layui.js"></script>
                    <script>
                    layui.use('colorpicker', function(){
                      var colorpicker = layui.colorpicker;
                      //渲染
                      colorpicker.render({
                        elem: '#test1'  //綁定元素
                      });
                    });
                    </script>
                    </body>
                    </html>
                          
                    基礎參數

                    colorpicker 組件目前支持以下參數

                    參數選項 說明 類型 默認值
                    elem 指向容器選擇器 string/object -
                    color 默認顏色,不管你是使用 hex、rgb 還是 rgba 的格式輸入,最終會以指定的格式顯示。 string -
                    format 顏色顯示/輸入格式,可選值: hexrgb
                    若在 rgb 格式下開啟了透明度,格式會自動變成 rgba。在沒有輸入顏色的前提下,組件會默認為 #000 也就是黑色。
                    string hex(即 16 進制色值)
                    alpha 是否開啟透明度,若不開啟,則不會顯示透明框。開啟了透明度選項時,當你的默認顏色為 hex 或 rgb 格式,組件會默認加上值為 1 的透明度。相同的,當你沒有開啟透明度,卻以 rgba 格式設置默認顏色時,組件會默認沒有透明度。
                    注意:該參數必須配合 rgba 顏色值使用
                    boolean false
                    predefine 預定義顏色是否開啟 boolean false
                    colors 預定義顏色,此參數需配合 predefine: true 使用。 Array 此處列舉一部分:['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
                    size 下拉框大小,可以選擇:lg、sm、xs。 string -
                    預定義顏色

                    預定義顏色,可以被認為是提供的參考色,因此除了我們默認的預定義顏色之外,你還可以自己定義

                    layui.use('colorpicker', function(){
                      var colorpicker = layui.colorpicker;、
                       
                      colorpicker.render({
                        elem: '#test1'
                        ,predefine: true
                        ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
                      });
                    });
                          
                    顏色被改變的回調

                    回調名:change
                    當顏色在選擇器中發生選擇改變時,會進入 change 回調,你可以通過它來進行所需操作,下面的例子就是實時的輸出當前選擇器的顏色

                    layui.use('colorpicker', function(){
                      var colorpicker = layui.colorpicker;
                       
                      colorpicker.render({
                        elem: '#test1'
                        ,change: function(color){
                          console.log(color)
                        }
                      });
                    });
                          
                    顏色選擇后的回調

                    回調名:done
                    點擊顏色選擇器的“確認”和“清除”按鈕,均會觸發 done 回調,回調返回當前選擇的色值。

                    layui.use('colorpicker', function(){
                      var colorpicker = layui.colorpicker;
                       
                      colorpicker.render({
                        elem: '#test1'
                        ,done: function(color){
                          console.log(color)
                          //譬如你可以在回調中把得到的 color 賦值給表單
                        }
                      });
                    });
                          
                    結語

                    顏色選擇器不僅僅是獨立使用,它更多情況可能是跟表單結合使用。

                    layui - 用心與你溝通

                    亚洲图色