<template>
<div>
<div class="bac" :style="`background:rgb${rgb}`">
RGB颜色: rgb({{red}},{{green}},{{blue}})
</div>
<div class="box">
<div class="block">
<span class="demonstration">RED</span>
<el-slider
v-model="red"
:max=255
@input="redChange">
</el-slider>
</div>
<div class="block">
<span class="demonstration">GREEN</span>
<el-slider
v-model="green"
:max=255
@input="greenChange">
</el-slider>
</div>
<div class="block">
<span class="demonstration">BLUE</span>
<el-slider
v-model="blue"
:max=255
@input="blueChange">
</el-slider>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
red: 49,
green: 120,
blue: 200,
rgb: `(0,0,0)`
}
},
methods:{
redChange(newValue){
this.rgb = `(${newValue},${this.green},${this.blue})`
},
greenChange(newValue){
this.rgb = `(${this.red},${newValue},${this.blue})`
},
blueChange(newValue){
this.rgb = `(${this.red},${this.green},${newValue})`
}
},
mounted(){
}
};
</script>
<style lang="scss" scoped>
.bac {
height: 200px;
background: rgb(0, 0, 0);
margin-bottom: 50px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 20px;
}
.box {
width: 700px;
display: flex;
justify-content: space-between;
align-items: center;
}
.block {
width: 150px;
.demonstration {
font-weight: 700;
}
}
</style>
