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;
}
![Shader+UGUI仿制Unity拾色器Shader+UGUI仿制Unity拾色器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)