1. ColorPicker顏色選擇器

1.1. 用于顏色選擇, 支持多種格式。

1.2. 顏色選擇器屬性

參數	說明	類型	可選值	默認值
value / v-model	綁定值	string	無	無
disabled	是否禁用	boolean	無	false
size	尺寸	string	medium / small / mini	無
show-alpha	是否支持透明度選擇	boolean	無	false
color-format	寫入v-model的顏色的格式	string	hsl / hsv / hex / rgb	hex(show-alpha為false) / rgb(show-alpha為true)
popper-class	ColorPicker下拉框的類名	string	無	無
predefine	預定義顏色	array	無	無

1.3. 顏色選擇器事件

方法名	說明	回調參數
change	當綁定值變化時觸發	當前值
active-change	面板中當前顯示的顏色發生改變時觸發	當前顯示的顏色值

2. ColorPicker顏色選擇器例子

2.1. 使用腳手架新建一個名為element-ui-colorpicker的前端項目, 同時安裝Element插件。

2.2. 編寫App.vue?

<template><div id="app"><h1>基礎用法</h1><div class="block"><span>有默認值: </span><el-color-picker v-model="color11"></el-color-picker></div><div class="block"><span>無默認值: </span><el-color-picker v-model="color12"></el-color-picker></div><h1>選擇透明度</h1><el-color-picker v-model="color2" show-alpha></el-color-picker><h1>預定義顏色</h1><el-color-picker v-model="color3" show-alpha :predefine="predefineColors"></el-color-picker><h1>不同尺寸</h1><el-color-picker v-model="color4"></el-color-picker><el-color-picker v-model="color4" size="medium"></el-color-picker><el-color-picker v-model="color4" size="small"></el-color-picker><el-color-picker v-model="color4" size="mini"></el-color-picker></div> </template><script> export default {data () {return {color11: '#409EFF',color12: null,color2: 'rgba(19, 206, 102, 0.8)',color3: 'rgba(255, 69, 0, 0.68)',predefineColors: ['#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1','#1e90ff','#c71585','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)','hsv(51, 100, 98)','hsva(120, 40, 94, 0.5)','hsl(181, 100%, 37%)','hsla(209, 100%, 56%, 0.73)','#c7158577'],color4: '#409EFF'}} } </script>

2.3. 運行項目

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的019_ColorPicker颜色选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。