Chameleon/pages/chineseColor/chineseColor.vue

<template>
	<view>
		<uni-transition ref="trans" mode-class="fade" :duration="0" :show="true" >
			<uni-search-bar @confirm="search" v-model="searchValue" @cancel="cancel" @clear="clear" @input="input"
				placeholder="请输入色彩名称">
			</uni-search-bar>
			<view class="content">
				<view class="card-padding">
					<uni-row style="padding-bottom: 50px">
						<uni-col :xs="8" :sm="6" :md="4" :lg="3" :xl="2" v-for="(item,index) in colors" 
						:key="index">
							<ColorPanel :hsb="hsb(item.hexadecimal.substring(1,))" name="item.name" @clickPanel="onClickPanel" :name="item.name"></ColorPanel>
							<view style="padding-bottom: 10px;"></view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import {
		chineseColors
	} from '../../common/chineseColors.js';
	export default {
		data() {
			return {
				colors: chineseColors,
				searchValue: "",
			}
		},
		onReady() {
			// this.$refs.trans.init({
			// 	duration: 2000,
			// 	timingFunction: 'ease-in-out',
			// 	delay: 500,
			// });
		},
		methods: {
			onClickPanel(hex) {
				// this.$refs.trans.step({
				// 	backgroundColor: "#" + hex,
				// });
				// // 开始执行动画
				// this.$refs.trans.run(() => {});
			},
			input(res) {
				if (res === "") {
					this.colors = chineseColors;
				}
			},
			cancel(res) {
				res.value = "";
				this.colors = chineseColors;
			},
			search(res) {
				this.colors = chineseColors.filter(x => x.name.includes(res.value));
			},

			clear(res) {
				res.value = "";
				this.colors = chineseColors;
			},
			// focus(res) {
			// 	res.value = "";
			// 	this.colors = chineseColors;
			// },
			// 将hex转换为rgb
			hexToRgb(hex) {
				// 将hex切割为rgb数组
				const hexArr = hex.match(/[\s\S]{1,2}/g) || []
				// 转换为10进制数组
				const rgbArr = hexArr.map(hex => parseInt(hex, 16));
				return {
					r: rgbArr[0],
					g: rgbArr[1],
					b: rgbArr[2],
					a: 1,
				}
			},
			// 将rgb转化为hsb
			hsb(hex) {
				const rgb = this.hexToRgb(hex);
				let hsb = {
					h: 0,
					s: 0,
					b: 0,
				};
				let min = Math.min(rgb.r, rgb.g, rgb.b);
				let max = Math.max(rgb.r, rgb.g, rgb.b);
				let delta = max - min;
				hsb.b = max;
				hsb.s = max != 0 ? 255 * delta / max : 0;
				if (hsb.s != 0) {
					if (rgb.r === max) {
						hsb.h = (rgb.g - rgb.b) / delta;
					} else if (rgb.g === max) {
						hsb.h = 2 + (rgb.b - rgb.r) / delta;
					} else {
						hsb.h = 4 + (rgb.r - rgb.g) / delta;
					}
				} else {
					hsb.h = -1;
				}
				hsb.h *= 60;
				if (hsb.h < 0) hsb.h = 0;
			
				hsb.s *= 100 / 255;
				hsb.b *= 100 / 255;
				return hsb;
			}
		}
		
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
	
	}

	.card-padding {
		padding-left: 20px;
		padding-top: 15px;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
</style>