017-颜色选择器
1. 在主題定制的應用場景中, 自然離不開顏色的自定義。而你往往需要的是關于它的直觀選擇, 于是colorpicker模塊姍姍來遲, 它支持hex、rgb、rgba 三類色彩模式, 在代碼中簡單的調用后, 便可在你的網頁系統中自由拖拽去選擇你中意的顏色。
2. 模塊加載名稱：colorpicker。
3. 基礎參數
3.1. colorpicker組件目前支持以下參數:
4. 預定義顏色
4.1. 預定義顏色, 可以被認為是提供的參考色, 因此除了我們默認的預定義顏色之外, 你還可以自己定義:
<script type="text/javascript">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)']});}); </script>5. 顏色被改變的回調 - change
5.1. 當顏色在選擇器中發生選擇改變時, 會進入change回調, 你可以通過它來進行所需操作:
<script type="text/javascript">layui.use(['colorpicker'], function() {var colorpicker = layui.colorpicker;//渲染colorpicker.render({elem: '#test1' //綁定元素,change: function(color){console.log(color)}});}); </script>6. 顏色選擇后的回調 - done
6.1. 點擊顏色選擇器的"確認"和"清除"按鈕, 均會觸發done回調, 回調返回當前選擇的色值:
<script type="text/javascript">layui.use(['colorpicker'], function() {var colorpicker = layui.colorpicker;//渲染colorpicker.render({elem: '#test1' //綁定元素,done: function(color){console.log(color)}});}); </script>7. 例子
7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>顏色選擇器 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div id="test1"></div><script type="text/javascript">layui.use(['colorpicker'], function() {var colorpicker = layui.colorpicker;//渲染colorpicker.render({elem: '#test1' //綁定元素,size: 'lg',color: '#F00',format: 'rgb',alpha: true,predefine: true,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],change: function(color){console.log(color)},done: function(color){console.log(color)}});}); </script></body> </html>7.2. 效果圖
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
