「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

• 初次提交