“Uni-app Component” color-picker Color picker

Note: This component may not perform well on poor performance phones. Use it with caution on phones with low configuration.

Making address: https://github.com/mehaotian/t-color-picker

Plug-in market address: http://ext.dcloud.net.cn/plugin?id=412

is used to select colors when developing web applications. However, there is no selector in UNI-App, which requires us to implement related functions.

This component is basically platform – wide. (Alipay, Baidu and Toutiao are theoretically supported, but there is no detailed test on these platforms)

Function highlights

• Full color selection, support hue selection, transparency selection
• Rgba color display, binary color display
• Alternative colors can be defined
• Customize default colors

Unrealized.

• Can only be selected, can not be manually entered (code is relatively simple, need to be self-implemented, there is a ready-made method to call)
• Color add collection (can be expanded on the basis of alternative colors, does not involve basic logic changes)
• HSLA color mode has been implemented, but not shown, can be extended
• The color picking function has not been implemented, and may not be implemented in the future. This function may not be practical on the APP

Results demonstrate

Call way

Code sample

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

Copy the code

Attributes that

Events that

open()

To open the color picker, you need to declare the ref attribute in the T-color-picker

Complete usage Example

<template>
	<view class="t-page">
		<button @click="open">Open the color picker</button>
		<! Ref --> = 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) {
				// Open the color picker
				this.$refs.colorPicker.open();
			},
			confirm(e) {
				console.log('Color selector return value:'+ e)
			}
		}
	};
</script>


Copy the code

Update log

v1.0.0

• For the first time to submit