vue项目通过颜色选择器，以及自定义透明度设置div背景色示例

通过引入el-color-picker后，

最终效果如下图所示：

见代码：

<template>
  <div>
    <div>
      <h3>
        属性设置:
      </h3>
    </div>
    <div style="margin-top:20px;margin-left:20px;">
      <div style="display:flex;align-items: center;">
        背景色：
        <el-color-picker
          v-model="color"
          color-format="rgb"
          @change="handleChange"
          size="mini"
        ></el-color-picker>
        <div style="margin-left:40px;display:flex;align-items: center;">
          透明度:
          <el-input
            v-model="inputVal"
            placeholder=""
            style="width:100px"
            size="mini"
          ></el-input>
          %
        </div>
        <el-button
          size="mini"
          type="primary"
          plain
          style="margin-left:40px;"
          @click="handleInput"
          >确定</el-button
        >
      </div>
    </div>
    <div class="divBox" :style="`background-color:${rgbColorVal}`"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      color: "rgba(19, 206, 102, 0.8)",
      inputVal: "",
      colorVal: "",
      rgbColorVal: "",
    };
  },
  methods: {
    handleChange() {
      let stringVal = this.color.toString();
      this.colorVal = stringVal.substring(4, stringVal.length - 1);
    },
    handleInput() {
      let inputVal = this.inputVal / 100;
      this.rgbColorVal = "rgb(" + this.colorVal + "," + inputVal + ")";
      console.log(this.rgbColorVal);
    },
  },
};
</script>
<style lang="scss" scoped>
.divBox {
  width: 500px;
  height: 500px;
  border: 1px solid;
  margin-top: 20px;
}
</style>