制作带透明度的拾色器【计算属性】

最新推荐文章于 2023-05-25 10:04:48 发布

裴嘉靖

最新推荐文章于 2023-05-25 10:04:48 发布

阅读量586

点赞数

分类专栏：计算属性拾色器

本文链接：https://blog.csdn.net/peijiajing/article/details/107332717

版权

计算属性同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

拾色器

1 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<link rel="stylesheet" type="text/css" href="style/index.css" />
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	
	<div id="box">
		<p>R: <input type="range" min='0' max='255' v-model.number='r'><span>{{r}}</span></p>
		<p>G: <input type="range" min='0' max='255' v-model.number='g'><span>{{g}}</span></p>
		<p>B: <input type="range" min='0' max='255' v-model.number='b'><span>{{b}}</span></p>
		<p>A: <input type="range" min='0' max='100' v-model.number='a'><span>{{a}}</span></p>
		<p>颜色代码：<input type="text" v-model='color' /></p>
		<div class="box" :style='{backgroundColor:bgc}'></div>
	</div>


	
	<script type='text/javascript' src="js/index.js"></script>
</body>
</html>

js

var vm=new Vue({
	el:'#box',
	data:{
		r:0,
		g:0,
		b:0,
		a:0,
		bgc:''
	},
	computed:{
		color:{
			get(){
				var red=this.r<=9?'0' + this.r.toString(16) : this.r.toString(16);
				var green=this.g<=9?'0' + this.g.toString(16) : this.g.toString(16);
				var blue=this.b<=9?'0' + this.b.toString(16) : this.b.toString(16);
				var opcity=this.a===100 ? (this.a)/100 : parseInt((this.a)/10)/10;
				// this.bgc= '#' + red + green + blue;
				this.bgc=`rgba(${this.r},${this.g},${this.b},${opcity})`;
				return '#' + red + green + blue;
			},
			set(newColor){
				if(newColor.length===7){
					this.bgc=newColor;
					var red=parseInt(newColor.slice(1,3),16);
					var green=parseInt(newColor.slice(3,5),16);
					var blue=parseInt(newColor.slice(5),16);
					this.r=red;
					this.g=green;
					this.b=blue;					
				}				
			}
		}
	}
})

for(var i=0;i<=100;i++){
	console.log(parseInt(i/10)/10);
}

css


.box{
	width:150px;height:150px;
	border:solid 1px #ccc;
}

裴嘉靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
制作带透明度的拾色器【计算属性】

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js</title> <link rel="stylesheet" type="text/css" href="style/index.css" /> <script type="text/javascript" src="js/vue.js">&l
复制链接

扫一扫