Vue颜色选择器实现（两种方法）

最新推荐文章于 2024-04-26 17:54:13 发布

爱吃巧克li

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量3.5k

点赞数

分类专栏： vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lplovewjm/article/details/130961958

版权

vue.js 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

文章目录

前言
一、颜色选择器（input[type=color]实现）
二、颜色选择器（colors数组实现）
- 1.完整代码

前言

本文讲述两种颜色选择器的实现方式。

别划走，最后有完整源代码。
第一种:@input和input[type=color]实现下述效果。
在这里插入图片描述
第二种：利用colors颜色数组、:style和v-for实现下列效果。

提示：以下是本篇文章正文内容，下面案例可供参考

一、颜色选择器（input[type=color]实现）

新建html文件并且导入vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./js/vue.js"></script>
	
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

</script>
</body>
</html>

Vue导入成功测试代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="./js/vue.js"></script>
	<div id="app">
		{{test}}
	</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				test:"Vue导入成功"
			}
		})
	</script>
<script>

</script>
</body>
</html>

实现过程与代码介绍

结构层

一个div块装颜色效果，一个input[type=color],一个按钮控制input是否消失。如下图所示。
在这里插入图片描述

<div id="app">
		<div class="overlay" :style="{backgroundColor:colorSelected}" @click="picker=!picker"></div>
		<div v-show="picker">
			<input type="color" :value="colorSelected" @input="selectColors($event)">
			<button @click="picker=false">ok</button>
		</div>
	</div>

样式层

样式就用到一个，设置div背景宽高

<style>
			
			.overlay{
				width:100px;
				height:100px;
			}
		</style>

js层

data数据

input颜色选择器需要用到一个参数来保存16进制颜色码
颜色选择器显示隐藏还需要有一个boolean参数做判断用

data:{
				colorSelected:"#000000",
				picker:false
			},

methods方法

输入框显示隐藏也可以用methods方法下实现，在这里我结构层用@click=“picker=！picker”实现的。
唯一的方法实现是用@input实时获取value值得变换并更新到colorSelected数据中，利用的是event.target.value来进行值调用。

methods:{
				selectColors(event){
					this.colorSelected=event.target.value
				}
			}

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.overlay{
				width:100px;
				height:100px;
			}
		</style>
	</head>
	<script src="./js/vue.js"></script>
	<div id="app">
		<div class="overlay" :style="{backgroundColor:colorSelected}" @click="picker=!picker"></div>
		<div v-show="picker">
			<input type="color" :value="colorSelected" @input="selectColors($event)">
			<button @click="picker=false">ok</button>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				colorSelected:"#000000",
				picker:false
			},
			methods:{
				selectColors(event){
					this.colorSelected=event.target.value
				}
			}
		})
	</script>
<script>

</script>
</body>
</html>

二、颜色选择器（colors数组实现）

1.完整代码

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色选择器</title>
		<style scoped>
		.color-picker {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		}
		
		.color-box {
		  width: 100px;
		  height: 100px;
		  margin-top: 20px;
		}
		
		.color-options {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center;
		  margin-top: 20px;
		}
		
		.color-option {
		  width: 30px;
		  height: 30px;
		  margin: 5px;
		  border-radius:50%;
		}
		
		.color-option.active {
		  border: 2px solid #FFFFFF;
		}
		</style>
		
	</head>
	<body>
		<div id="app">
			<div class="color-picker">
			  <div class="color-box" :style="{ backgroundColor: selectedColor }"></div>
			  <div class="color-options">
			    <div v-for="(color, index) in colors" :key="index" 
			      class="color-option" :style="{ backgroundColor: color }"
			      @click="selectColor(color)"
			      :class="{ active: color === selectedColor }"></div>
			  </div>
			</div>
		</div>
		<script src="../vue.js"></script>
		<script>
			new Vue({
				el:"#app",
				data() {
				  return {
				    colors: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3',
				             '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#FFEB3B',
				             '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'],
				    selectedColor: '#F44336',
				  };
				},
				methods: {
				  selectColor(color) {
				    this.selectedColor = color;
				    this.$emit('color-selected', color);
				  }
				}
			})
		</script>
	</body>
</html>