「uni-app组件」color-picker 颜色选择器

注意：此组件在性能较差的手机上，可能表现不是很理想，低配置手机请慎重使用。

github 地址: https://github.com/mehaotian/t-color-picker

插件市场地址：http://ext.dcloud.net.cn/plugin?id=412

咱们在开发 web 应用的时候，想选择颜色，直接使用 <input type="color"> 便可, 然而在 uni-app 中并无选择器，须要咱们去实现相关功能。

此组件基本全平台支持。（支付宝，百度，头条小程序理论上都支持，可是没有很细致的测试这几个平台）

功能亮点

• 全颜色选择，支持色相选择，透明度选择
• rgba 颜色显示 ，二进制颜色显示
• 可定义备选色
• 自定义默认颜色

未实现

• 只能选择，不能手动输入 （代码比较简单，须要可自行实现，有现成的方法能够调用）
• 颜色添加收藏 （可在备选色的基础上扩展，不会涉及到基本逻辑的改动）
• 已经实现 HSLA 颜色模式 ，但未作展现，可自行扩展
• 未实现拾色功能，未来可能也不会去实现，app 上这个功能可能不实用

效果演示

调用方式

代码示例

<template>
	<view>
		<t-color-picker></t-color-picker>
	</view>
</template>
<script> import tColorPicker from '@/components/t-color-picker/t-color-picker.vue' export default { components: { tColorPicker } }; </script>

复制代码

属性说明

属性名	类型	默认值	说明
color	Object	{r: 0,g: 0,b: 0,a: 1}	颜色选择器初始颜色
spare-color	Object		备选色，格式为:[ {r: 0,g: 0,b: 0,a: 1}]
confirm	function		确认选择函数 ，返回值:event = {rgba:{r: 0,g: 0,b: 0,a: 1},hex:'#000000'}

事件说明

open()

打开颜色选择器，须要 t-color-picker 中声明 ref 属性

完整使用示例

<template>
	<view class="t-page">
		<button @click="open">打开颜色选择器</button>
		<!-- 须要声明 ref -->
		<t-color-picker ref="colorPicker" :color="color" @confirm="confirm"></t-color-picker>
	</view>
</template>
<script> import tColorPicker from '@/components/t-color-picker/t-color-picker.vue' export default { components: { tColorPicker }, data() { return { color: {r: 255,g: 0,b: 0,a: 0.6} }; }, methods: { open(item) { // 打开颜色选择器 this.$refs.colorPicker.open(); }, confirm(e) { console.log('颜色选择器返回值：'+ e) } } }; </script>


复制代码

更新日志

v1.0.0

• 初次提交