uview-plus

# ColorPicker 颜色选择器 3.5.9

打开

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

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ x √ √

# 基本使用

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

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

<script>
export default {
    data() {
        return {
            color: '#ff0000'
        }
    },
    methods: {
        confirm(color) {
            console.log('选择的颜色：', color);
        }
    }
}
</script>

# 带常用颜色的使用

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

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

<script>
export default {
    data() {
        return {
            color: '#ff0000',
            commonColors: [
                '#ff0000',
                '#00ff00',
                '#0000ff',
                '#ffff00',
                '#00ffff',
                '#ff00ff',
                '#ffffff',
                '#000000'
            ]
        }
    },
    methods: {
        confirm(color) {
            console.log('选择的颜色：', color);
        }
    }
}
</script>

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

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


 github  gitee

# API

# Props

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

# Events

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

# Slot

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

← Color 色彩 →