Chameleon/pages/index/index.vue

<template>
	<view>
		<view class="padding-10">
			<sectionTitle title="当前颜色" num='01'></sectionTitle>
			<view class="container">
				<!-- 展示当前颜色的画布 -->
				<view class="container canvas" :style="canvasStyle" @click="onClickCanvas">
					<view :style="canvasHexStyle">
						{{canvasHex}}
					</view>
				</view>
				<button @click="openPicker">打开色盘</button>
				<!-- ref定义了组件的名字 -->
				<!-- @confirm将调色盘的确认按钮绑定到confirmPicker()方法 -->
				<t-color-picker ref="colorPicker" :color="canvasColor" @confirm="confirmPicker"></t-color-picker>

				<view class="form padding-10">
					<text class="padding-r-10 input-title">Hex色码</text>
					<uni-easyinput v-model="hexValue" placeholder="#ffc107" class="padding-r-10"></uni-easyinput>
					<button @click="hexSubmit" size="mini" type="primary">确认</button>
				</view>
			</view>
		</view>

		<!-- 新增代码，rgb色码输入框 -->
		<uni-card :is-shadow="false">
			<template v-slot:title>
				<view class="card-title input-title">RGB色码</view>
			</template>
			<uni-row class="form">
				<uni-col :span="2">
					<text class="">R</text>
				</uni-col>
				<uni-col :span="22">
					<slider :value="canvasColor.r" min="0" max="255" data-type="r" @changing="sliderChanging"
						activeColor="#ff8183" backgroundColor="#ffb5b6" block-color="#e92528" block-size="20"
						:show-value="true" />
				</uni-col>
			</uni-row>

			<uni-row class="form">
				<uni-col :span="2">
					<text class="">G</text>
				</uni-col>
				<uni-col :span="22">
					<!-- 以data-开头的是一种特殊的属性，它将自身的值以变量的形式传递到绑定事件的函数之中-->
					<slider :value="canvasColor.g" min="0" max="255" data-type="g" @changing="sliderChanging"
						activeColor="#55d54e" backgroundColor="#a6f4a5" block-color="#3b8b1e" block-size="20"
						:show-value="true" />
				</uni-col>
			</uni-row>

			<uni-row class="form">
				<uni-col :span="2">
					<text class="">B</text>
				</uni-col>
				<uni-col :span="22">
					<slider :value="canvasColor.b" min="0" max="255" data-type="b" @changing="sliderChanging"
						activeColor="#8a96ff" backgroundColor="#7980ff" block-color="#3651e8" block-size="20"
						:show-value="true" />
				</uni-col>
			</uni-row>
		</uni-card>
		
		<view class="padding-10">
			<sectionTitle num="02" title="相似色彩"></sectionTitle>
		</view>
		<SimilarColors :rgb="canvasColor"></SimilarColors>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				canvasColor: {
					r: 255,
					g: 193,
					b: 7,
					a: 1
				},
				hexValue: "",
			};
		},
		// 页面启动时的生命周期函数
		mounted() {
			this.hexValue = "#" + this.rgbToHex(this.canvasColor)
		},
		methods: {
			// methods中的方法需要通过某些事件、动作才能触发运行
			openPicker(item) {
				// 打开颜色选择器
				this.$refs.colorPicker.open();
			},
			confirmPicker(e) {
				// 色盘点击确定后
				// 将选取的颜色赋值给canvasColor状态
				this.canvasColor = e.rgba;
				// 更新hex输入框的数据
				this.hexValue = e.hex;
			},
			// rgb转为hex
			rgbToHex(rgb) {
				let hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
				hex.map(function(str, i) {
					if (str.length == 1) {
						hex[i] = '0' + str;
					}
				});
				return hex.join('');
			},
			// 将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,
				}
			},
			// 将hex值复制到剪切板
			onClickCanvas() {
				uni.setClipboardData({
					data: this.canvasHex,
				})
			},
			// 提交hex值
			hexSubmit() {
				// 预处理
				let hexStr = this.hexValue.trim().replace('#', "").toLowerCase();
				// 将3位hex值转化为6位hex
				if (hexStr.length === 3) {
					hexStr = hexStr.split("").reduce((total, current) => total + current.repeat(2), "");
				}
				if (hexStr.length !== 6) {
					return uni.showToast({
						title: "Hex色码必须为3位或6位",
						icon: "none",
					});
				}
				// 验证hex是否合法
				const alphabet = "0123456789abcdef";
				for (let elem of hexStr) {
					if (!alphabet.includes(elem)) {
						return uni.showToast({
							title: "请输入正确的Hex色码",
							icon: "none",
						})
					}
				}

				const rgb = this.hexToRgb(hexStr);

				// 更新canvas颜色
				this.canvasColor = rgb;
				// 更新色盘颜色
				this.$refs.colorPicker.rgba = rgb;
			},
			// 增加slider滑动监听方法
			sliderChanging(e) {
				// e.target.dataset.type对应模板中data-type中的值
				// e.detail.value是滚动条对应的位置
				this.canvasColor[e.target.dataset.type] = e.detail.value;
				this.hexValue = '#' + this.rgbToHex(this.canvasColor);
			}
		},
		computed: {
			// computed 中的方法被称为计算属性，它会实时监听自身所依赖的状态
			// 每当canvasColor发生变化时，设置canvas的颜色
			canvasStyle() {
				return `background: #${this.rgbToHex(this.canvasColor)}`
			},
			// 设置canvas的文本颜色
			// 使其根据hex颜色的深浅自动变化
			canvasHexStyle() {
				for (let key in this.canvasColor) {
					if (this.canvasColor[key] >= 130) {
						return "color: black";
					}
					return "color: white";
				}
			},
			// 设置canvas的hex文本(16进制表示)
			canvasHex() {
				return "#" + this.rgbToHex(this.canvasColor);
			}
		}

	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
	}

	.padding-10 {
		padding: 10px;
	}

	.canvas {
		height: 80px;
		width: 100%;
		margin-bottom: 10px;
		border-radius: 10px;
		border-color: #484848;
		border-style: dashed;
	}

	.form {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.padding-r-10 {
		padding-right: 10px;
	}

	.input-title {
		font-size: 14px;
		color: gray;
		font-weight: 700;
	}

	.card-title {
		padding-top: 5px;
	}

	slider {
		touch-action: none;
	}
</style>