LimeColorPicker 颜色选择器

一个功能强大的颜色选择器组件，支持多种颜色格式，预设颜色，可用于主题定制、样式设计等场景。组件提供了丰富的自定义选项，可以满足各种颜色选择需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 颜色选择器文档 - 站点1
• 颜色选择器文档 - 站点2
• 颜色选择器文档 - 站点3

安装方法

1. 在uni-app 中搜索并导入lime-color-picker
2. 导入后可能需要重新编译项目
3. 在页面中使用l-color-picker组件

代码演示

基础使用

颜色选择器支持多种颜色编码格式，包括 HEX、HSB、RGB。

<l-color-picker v-model="color"></l-color-picker>

const color = ref('#FA8C16')

受控模式

不使用v-model，通过value属性和change事件手动控制颜色值。

<l-color-picker value="#FA8C16" @change="change"></l-color-picker>

const change = (value: UTSJSONObject) => {
	const hex = value['hex'] as string;  // 十六进制颜色值，如 "#FA8C16"
	const rgb = value['rgb'] as string;  // RGB颜色值，如 "rgb(250, 140, 22)"
	const hsb = value['hsb'] as string;  // HSB颜色值，如 "hsb(33, 91%, 98%)"
	console.log('颜色已更改:', hex, rgb, hsb);
}

预设颜色

通过presets属性可以设置预设颜色面板，方便用户快速选择常用颜色。

<l-color-picker :presets="presets"></l-color-picker>

const presets = [{
	label: '推荐颜色',
	colors: [
		'#000000',  // 黑色
		'#000000E0', // 黑色 + 透明度
		'#000000A6',
		'#00000073',
		'#00000040',
		'#00000026',
		'#0000001A',
		'#00000012',
		'#0000000A',
		'#00000005',
		'#F5222D',  // 红色
		'#FA8C16',  // 橙色
		'#FADB14',  // 黄色
		'#8BBB11',  // 青柠色
		'#52C41A',  // 绿色
		'#13A8A8',  // 青色
		'#1677FF',  // 蓝色
		'#2F54EB',  // 靛蓝色
		'#722ED1',  // 紫色
		'#EB2F96',  // 粉红色
		'#F5222D4D', // 带透明度的颜色
		'#FA8C164D',
		'#FADB144D',
		'#8BBB114D',
		'#52C41A4D',
		'#13A8A84D',
		'#1677FF4D',
		'#2F54EB4D',
		'#722ED14D',
		'#EB2F964D',
	],
},
{
	label: '最近使用',
	colors: [], // 可以动态添加用户最近使用的颜色
}]

搭配弹出层使用

本插件不包含弹出层，在实际应用场景中，颜色选择器通常需要搭配弹出层使用。可以结合 lime-popup 组件实现弹出式颜色选择器。

<button type="primary" @click="showPicker = true">打开颜色选择器</button>
<l-popup v-model="showPicker" position="bottom">
	<l-color-picker 
		v-model="color" 
		:presets="presets" 
		@change="change" 
		@formatChange="formatChange">
	</l-color-picker>
</l-popup>

const showPicker = ref(false)
const color = ref('#fa8c16')

const change = (value: UTSJSONObject) => {
	const hex = value['hex'] as string;
	const rgb = value['rgb'] as string;
	const hsb = value['hsb'] as string;
	console.log('选择的颜色:', hex, rgb, hsb);
}

const formatChange = (format: string) => {
	console.log('当前颜色格式:', format) // 'hex', 'rgb', 或 'hsb'
}

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

插件标签说明

l-color-picker 为组件标签
lime-color-picker 为演示标签

API文档

Props 属性说明

参数	说明	类型	默认值
value(v-model)	颜色的值，支持HEX、RGB、HSB格式	string	-
defaultValue	默认颜色值，当没有设置value时使用	string	-
presets	预设的颜色分组	{ label: string, colors: string[] }[]	-
disabled	是否禁用颜色选择器	boolean	false

Events 事件

事件名	说明	回调参数
change	颜色值变化时触发	(value: { hex: string, rgb: string, hsb: string })
formatChange	颜色格式变化时触发	(format: 'hex' | 'rgb' | 'hsb')

主题定制

组件提供了丰富的CSS变量，可以通过自定义CSS变量来自定义组件样式：

变量名	默认值	说明
--l-color-picker-palette-height	230px	调色板高度
--l-color-picker-handle-size	26px	调色板手柄大小
--l-color-picker-handle-border-width	2px	手柄边框宽度
--l-color-picker-handle-border-color	white	手柄边框颜色
--l-color-picker-input-height	40px	输入框高度
--l-color-picker-format-option-height	25px	格式选择项高度
--l-color-picker-format-indicator-height	25px	格式指示器高度
--l-color-picker-format-picker-width	70px	格式选择器宽度
--l-color-picker-preset-label-line-height	42px	预设颜色标签行高
--l-color-picker-preset-color-size	28px	预设颜色块大小
--l-color-picker-preset-color-gap	4px	预设颜色块间距
--l-color-picker-handle-shadow	inset 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06)	手柄阴影
--l-color-picker-slider-margin	16px	滑块外边距
--l-color-picker-handle-border-radius	99px	手柄边框圆角
--l-color-picker-color	var(--l-text-color-1)	主要文本颜色
--l-color-picker-label-color	var(--l-text-color-2)	次要文本颜色
--l-color-picker-divider-color	var(--l-border-color-1)	分割线颜色
--l-color-picker-field-bg-color	var(--l-fill-2)	输入框背景色
--l-color-picker-slider-size	28px	滑块整体大小
--l-color-picker-slider-handle-size	24px	滑块手柄大小
--l-color-picker-slider-hue	red	色相滑块的基础颜色
--l-color-picker-slider-active-color	red	滑块激活状态的颜色

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

源代码

组件源码