注意：此組件在性能較差的手機(jī)上，可能表現(xiàn)不是很理想，低配置手機(jī)請(qǐng)慎重使用。

github 地址: https://github.com/mehaotian/t-color-picker
插件市場(chǎng)地址：http://ext.dcloud.net.cn/plugin?id=412

我們?cè)陂_(kāi)發(fā) web 應(yīng)用的時(shí)候，想選擇顏色，直接使用 <input type="color"> 即可, 然而在 uni-app 中并沒(méi)有選擇器，需要我們?nèi)?shí)現(xiàn)相關(guān)功能。

此組件基本全平臺(tái)支持。（支付寶，百度，頭條小程序理論上都支持，但是沒(méi)有很細(xì)致的測(cè)試這幾個(gè)平臺(tái)）

功能亮點(diǎn)

• 全顏色選擇，支持色相選擇，透明度選擇
• rgba 顏色顯示 ，二進(jìn)制顏色顯示
• 可定義備選色
• 自定義默認(rèn)顏色

未實(shí)現(xiàn)

• 只能選擇，不能手動(dòng)輸入 （代碼比較簡(jiǎn)單，需要可自行實(shí)現(xiàn)，有現(xiàn)成的方法可以調(diào)用）
• 顏色添加收藏 （可在備選色的基礎(chǔ)上擴(kuò)展，不會(huì)涉及到基本邏輯的改動(dòng)）
• 已經(jīng)實(shí)現(xiàn) HSLA 顏色模式 ，但未做展示，可自行擴(kuò)展
• 未實(shí)現(xiàn)拾色功能，將來(lái)可能也不會(huì)去實(shí)現(xiàn)，app 上這個(gè)功能可能不實(shí)用

效果演示

color-picker.gif

調(diào)用方式

代碼示例

<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>

屬性說(shuō)明

事件說(shuō)明

open()

打開(kāi)顏色選擇器，需要 t-color-picker 中聲明 ref 屬性

完整使用示例

<template>
    <view class="t-page">
        <button @click="open">打開(kāi)顏色選擇器</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) {
                // 打開(kāi)顏色選擇器
                this.$refs.colorPicker.open();
            },
            confirm(e) {
                console.log('顏色選擇器返回值：'+ e)
            }
        }
    };
</script>

更新日志

v1.0.0

• 初次提交