Initially bind a value with a transparent background color, listen to the events of the child components, change the value in the data to change the background color
Code
<el-main ref="elMain" v-bind:style="elMain">
<el-card class="main-card">
<slot></slot>
</el-card>
</el-main>
The initial assignment background color is transparent:
data() {
return {
elMain: {
background: "rgb(255,255,255,0)"
},
}
}
methods: {
//Change the background color of el-main dynamically
changedBgColor(index) {
if (index != 0) {
this.elMain.background = "#fff";
} else {
this.elMain.background = "rgb(255,255,255,0)";
}
},
}