<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>