我要评论vue动态设置背景渐变色
效果展示
核心（动态更换单一的背景颜色也可以使用）
<div class="ss" v-bind:style="{ background: colors }"></div>
//渐变色颜色代码
// background:linear-gradient(90deg,#0af,#0085ff);代码
<template>
<div>
<el-row :gutter="20">
<!-- 两边左侧边框空位 无用 -->
<el-col :span="4"><div class="frame"></div></el-col>
<!-- 中间左侧边框背景颜色选择器 主要代码 -->
<el-col :span="8">
<div class="middle">
<ul class="middle-ul">
<li class="middle-li">
背景颜色1:
<el-color-picker
size="mini"
v-model="colors1"
show-alpha
color-format=" hsv "
:predefine="predefinecolors"
@change="firstchangecolor"
>
</el-color-picker>
</li>
<li class="middle-li">
背景颜色2:
<el-color-picker
size="mini"
v-model="colors2"
show-alpha
color-format=" hsv "
:predefine="predefinecolors"
@change="secondchangecolor"
>
</el-color-picker>
</li>
</ul>
</div>
</el-col>
<!-- 中间右侧边框效果展示区 主要代码 -->
<el-col :span="8">
<div class="middle">
<div class="ss" v-bind:style="{ background: colors }">
<ul class="middle-ul">
效果展示
</ul>
</div>
</div>
</el-col>
<!-- 两边右侧边框空位 无用 -->
<el-col :span="4"><div class="frame"></div></el-col>
</el-row>
</div>
</template><script>
export default {
data() {
return {
// <--主要代码
colors1: "",
colors2: "",
colors: "",
// 主要代码-->
predefinecolors: [
"#ff4500",
"#ff8c00",
"#ffd700",
"#90ee90",
"#00ced1",
"#1e90ff",
"#c71585",
"#c7158577",
],
};
},
// <--主要代码
methods: {
firstchangecolor(val) {
this.colors1 = val;
if (object.keys(this.colors2).length == 0) {
this.$message({
message: "请选择颜色2",
type: "warning",
});
} else {
this.colors = "linear-gradient(90deg," + this.colors1 + "," + this.colors2 + ")";
}
},
secondchangecolor(val) {
this.colors2 = val;
if (object.keys(this.colors1).length == 0) {
this.$message({
message: "请选择颜色1",
type: "warning",
});
} else {
this.colors = "linear-gradient(90deg," + this.colors1 + "," + this.colors2 + ")";
}
},
},
// 主要代码-->
};
</script><style>
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.middle {
border-radius: 4px;
min-height: 250px;
background: #fdfdfd;
}
.frame {
border-radius: 4px;
min-height: 250px;
background: #f0f2f5;
}
.ss {
float: left;
margin-top: 25px;
margin-left: 100px;
width: 300px;
height: 200px;
border-radius: 19px;
}
.middle-ul {
margin: 0;
padding: 0;
list-style: none;
}
.middle-li {
margin-left: 25px;
list-style: none;
line-height: 40px;
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论