通过引入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>