uv-ui

# PickColor 颜色选择

✈

组件名：uv-pick-color

点击下载&安装 (opens new window)

该组件为颜色选择器，可配置预制颜色，初始化颜色。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ × √ √ √ √

提示

  1. 由于nvue不支持复杂的背景色设置，所以该组件在nvue中暂时不支持。

# 基本使用

  • 通过 ref 调用 open() 控制组件的打开。
  • @confirm 确定事件，返回选择的颜色值。
<template>
	<view>
		<uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color>
		<button @click="openColor">打开</button>
	</view>
</template>
<script>
	export default {
		methods: {
			openColor() {
				this.$refs.pickerColor.open();
			},
			confirm(e) {
				console.log('confirm', e)
			}
		}
	}
</script>

# 设置初始颜色

通过color属性设置初始颜色，格式为{r:0,g:0,b:0,a:1}。

<template>
	<view>
		<uv-pick-color ref="pickerColor" :color="color" @confirm="confirm"></uv-pick-color>
		<button @click="openColor">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				color: { r: 60, g: 156, b: 255, a: 1 }
			}
		},
		methods: {
			openColor() {
				this.$refs.pickerColor.open();
			},
			confirm(e) {
				console.log('confirm', e)
			}
		}
	}
</script>

# 设置底部预制颜色

通过prefabColor属性设置底部预制颜色可供选择，格式为[{r:0,g:0,b:0,a:1}]。

<template>
	<view>
		<uv-pick-color ref="pickerColor" :prefab-color="prefabColor" @confirm="confirm"></uv-pick-color>
		<button @click="openColor">打开</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				prefabColor: [{
					r: 60,
					g: 156,
					b: 255,
					a: 1
				}, {
					r: 245,
					g: 108,
					b: 108,
					a: 1
				}]
			}
		},
		methods: {
			openColor() {
				this.$refs.pickerColor.open();
			},
			confirm(e) {
				console.log('confirm', e)
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# PickColor Props

参数 说明 类型 默认值 可选值
color 颜色选择器初始颜色 Object { r: 0, g: 0, b: 0, a: 0 } -
prefabColor 底部预制颜色 Array [] -
closeOnClickOverlay 是否允许点击遮罩关闭 Boolean false true | false
title 顶部标题 Boolean String -
cancelText 取消按钮的文字 String 取消 -
confirmText 确认按钮的文字 String 确定 -
cancelColor 取消按钮的颜色 String #909193 -
confirmColor 确认按钮的颜色 String #3c9cff -

# PickColor Methods

事件名 说明
open 弹出颜色选择组件
close 关闭颜色选择组件

# PickColor Events

事件名 说明 回调参数
@confirm 点击确定按钮触发 返回颜色值，eg：{hex: "#000000",rgba:{r:0,g:0,b:0,a:0}}
@cancel 点击取消按钮触发 -
@close 该组件关闭时触发 -

注意

示例依赖了 uv-ui-tools uv-popup uv-toolbar 等多个组件，直接拷贝示例代码将无法正常运行。 请到 组件下载页面 (opens new window) ，在页面右侧选择 使用 HBuilderX导入示例项目 。

← QRCode 二维码 →