更新记录

1.0.0（2025-06-18） 下载此版本

插件说明

组件基于 https://ext.dcloud.net.cn/plugin?id=412 优化而来

特点

1. 绑定颜色精简化，包括以下写法： 1）[HEX]写法 #5c1e1e 2）[RGB]写法 rgb(92, 30, 30) 3）[RGBA]写法 rgba(92, 30, 30, 1) 4）HTML颜色值，例如red，更多https://www.w3ccoo.com/colors/colors_hex.html
2. 增加H5鼠标移动选择的支持
3. 将原插件的位置从 @components 转移到 @uni_modules
4. 选择完毕后，返回包括hex、rgba等字符串颜色信息

调用方式

<!-- 颜色选择器 -->
<rudon-color-picker ref="colorPicker" :color="color" @confirm="colorPickerConfirm"></rudon-color-picker>

this.$refs.colorPicker.open()

事件说明

完整例子

组合式 API (Composition API)

<template>
    <view class="demoPage">

        <view>当前颜色：</view>
        <input type="text" v-model="color"/>
        <button @click="colorPickerOpen">开始选择颜色</button>

        <!-- 颜色选择器 -->
        <rudon-color-picker
            ref="colorPicker" 
            :color="color"
            @confirm="colorPickerConfirm"
        ></rudon-color-picker>

    </view>
</template>

<script setup>
    import { ref, getCurrentInstance } from 'vue'
    const { ctx, proxy } = getCurrentInstance()

    // 页面变量 - 当前颜色 - 大小写随意
    // const color = ref('')
    // const color = ref('blue')
    // const color = ref('#fff')
    const color = ref('#CC0000')
    // const color = ref('rgb(92, 30, 30)')
    // const color = ref('rgba(92, 30, 30, 1)')
    // const color = ref('rgba(92, 30, 30, .8888)')

    // 开启颜色选择器
    const colorPickerOpen = () => {
        proxy.$refs.colorPicker.open()
    }
    // 颜色选择器提交选中的颜色
    const colorPickerConfirm = (e) => {
        // console.log(e.color)     // 字符串 #009687
        // console.log(e.colorRgba) // 字符串 rgba(0, 150, 135, 1)
        // console.log(e.rgba)      // 对象 { r:0, g:150, b:135, a:1 }
        color.value = e.colorRgba
    }
</script>

<style>
    .demoPage {
        padding: 20px 15px; 
        text-align: center;
    }
</style>

选项式 API (Options API)

<template>
    <view class="demoPage">

        <view>当前颜色：</view>
        <input type="text" v-model="color"/>
        <button @click="colorPickerOpen">开始选择颜色</button>

        <!-- 颜色选择器 -->
        <rudon-color-picker
            ref="colorPicker"
            :color="color"
            @confirm="colorPickerConfirm"
        ></rudon-color-picker>

    </view>
</template>

<script>
    export default {
        data() {
            return {

                /**
                 * 当前颜色 - 大小写随意
                 * ''
                 * 'RED'
                 * '#fff'
                 * '#CC0000'
                 * 'rgb(92, 30, 30)'
                 * 'rgba(92, 30, 30, 1)'
                 * 'rgba(92, 30, 30, .8888)'
                 */
                color: 'Orange'
            }
        },
        methods: {
            // 开启颜色选择器
            colorPickerOpen() {
                this.$refs.colorPicker.open()
            },
            // 颜色选择器提交选中的颜色
            colorPickerConfirm(e) {
                // console.log(e.color)     // 字符串 #009687
                // console.log(e.colorRgba) // 字符串 rgba(0, 150, 135, 1)
                // console.log(e.rgba)      // 对象 { r:0, g:150, b:135, a:1 }
                this.color = e.colorRgba
            },
        }
    }
</script>

<style>
    .demoPage {
        padding: 20px 15px; 
        text-align: center;
    }
</style>

平台兼容性

uni-app

其他

rudon-color-picker