UviewUltra 4.0

Appearance

ColorPicker 颜色选择器 4.4.0 ​

颜色选择器组件，支持纯色和渐变色选择，可自定义常用颜色。

平台差异说明 ​

|App（vue）|App（uvue/uni-app-x）|App（nvue）|H5|小程序| |:-😐:-😐:-😐:-😐:-😐:-😐 |√|x|√|√|

基本使用 ​

通过v-model绑定颜色值，支持纯色和渐变色。

vue
<template>
	<view class="p-4 bg-white">
        <up-color-picker 
            v-model="color" 
            @confirm="confirm"
        >
            <view class="color-preview">
                <view class="color-block" :style="{ backgroundColor: color }"></view>
                <text class="color-text">{{ color }}</text>
            </view>
        </up-color-picker>
    </view>
</template>
js
<script setup>
import { ref } from 'vue';

const color = ref('#ff0000');

const confirm = (selectedColor) => {
    console.log('选择的颜色：', selectedColor);
};
</script>

带常用颜色的使用 ​

通过commonColors属性设置常用颜色列表。

vue
<template>
	<view class="p-4 bg-white">
        <up-color-picker 
            v-model="color" 
            :commonColors="commonColors" 
            @confirm="confirm"
        >
            <view class="color-preview">
                <view class="color-block" :style="{ backgroundColor: color }"></view>
                <text class="color-text">{{ color }}</text>
            </view>
        </up-color-picker>
    </view>
</template>
js
<script setup>
import { ref } from 'vue';

const color = ref('#ff0000');
const commonColors = ref([
    '#ff0000',
    '#00ff00',
    '#0000ff',
    '#ffff00',
    '#00ffff',
    '#ff00ff',
    '#ffffff',
    '#000000'
]);

const confirm = (selectedColor) => {
    console.log('选择的颜色：', selectedColor);
};
</script>

示例演示页面源代码地址 ​

点击以下链接以查看演示页面的源码


 github  gitee

API ​

Props ​

参数说明类型默认值可选值
v-model绑定的颜色值，支持纯色和渐变色String#ff0000-
commonColors常用颜色列表Array[]-

Events ​

事件名说明回调参数
confirm确认选择颜色时触发color (String)
close关闭选择器时触发-

Slot ​

名称说明
default触发颜色选择器的内容区域