017-颜色选择器
1. 在主題定制的應(yīng)用場(chǎng)景中, 自然離不開顏色的自定義。而你往往需要的是關(guān)于它的直觀選擇, 于是colorpicker模塊姍姍來遲, 它支持hex、rgb、rgba 三類色彩模式, 在代碼中簡(jiǎn)單的調(diào)用后, 便可在你的網(wǎng)頁系統(tǒng)中自由拖拽去選擇你中意的顏色。
2. 模塊加載名稱：colorpicker。
3. 基礎(chǔ)參數(shù)
3.1. colorpicker組件目前支持以下參數(shù):
4. 預(yù)定義顏色
4.1. 預(yù)定義顏色, 可以被認(rèn)為是提供的參考色, 因此除了我們默認(rèn)的預(yù)定義顏色之外, 你還可以自己定義:
<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. 顏色被改變的回調(diào) - change
5.1. 當(dāng)顏色在選擇器中發(fā)生選擇改變時(shí), 會(huì)進(jìn)入change回調(diào), 你可以通過它來進(jìn)行所需操作:
<script type="text/javascript">layui.use(['colorpicker'], function() {var colorpicker = layui.colorpicker;//渲染colorpicker.render({elem: '#test1' //綁定元素,change: function(color){console.log(color)}});}); </script>6. 顏色選擇后的回調(diào) - done
6.1. 點(diǎn)擊顏色選擇器的"確認(rèn)"和"清除"按鈕, 均會(huì)觸發(fā)done回調(diào), 回調(diào)返回當(dāng)前選擇的色值:
<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. 效果圖
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
