vue:动态样式-（九宫格布局区域块不同样式根据所选不同模板渲染）
作者：互联网
需求：一个模板内有多个模块，点击不同组件会添加不同样式到此模块，比如选择a图表的配置，再点击九宫格第一格时加载a图表到第一格，选择b图表后，点击会覆盖第一个原有的，或者选择第二个区域格会加载b图表到第二格，第一格的已添加样式不会受影响。
直接上代码：(为了突出逻辑，vue模板没有用v-for等缩减，所以比较不忍直视，这里只供更好展示逻辑以供参考)
modePageMock.vue
<template>
<div class="pieSetting">
<el-row>
<el-tabs tab-position="left">
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> 版式1</span>
<el-row>
<el-col :span="8">
<el-card class="choseThisBtn">
<el-row>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_lt')">左上</el-button>
</el-col>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_ct')">中上</el-button>
</el-col>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_rt')">右上</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_lc')">左中</el-button>
</el-col>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_cc')">中中</el-button>
</el-col>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_rc')">右中</el-button>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_lb')">左下</el-button>
</el-col>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_cb')">中下</el-button>
</el-col>
<el-col :span="8">
<el-button size="mini" @click="fnchoseThis('mock1_rb')">右下</el-button>
</el-col>
</el-row>
</el-card>
<el-button size="mini" type="danger" @click="fnchoseClear()">清空选择</el-button>
<el-button size="mini" @click="fnconfirommock()"> 确认选择 </el-button>
</el-col>
<el-col :span="16">
<el-card style="width: 540px; height: 360px; margin: 8px;color:#ccc;">
<el-row>
<el-col :span="7">
<el-row>
<el-col :class="genaraClass('leftT')" class="bordered"><div @click="fnchoseThis('mock1_lt')">左上</div></el-col>
<el-col :class="genaraClass('leftC')" class="bordered"><div @click="fnchoseThis('mock1_lc')">左中</div></el-col>
<el-col :class="genaraClass('leftB')" class="bordered"><div @click="fnchoseThis('mock1_lb')">左下</div></el-col>
</el-row>
</el-col>
<el-col :span="10">
<el-row>
<el-col :class="genaraClass('centerT')" class="bordered"><div @click="fnchoseThis('mock1_ct')">中上</div></el-col>
<el-col :class="genaraClass('centerC')" class="bordered"><div @click="fnchoseThis('mock1_cc')">中中</div></el-col>
<el-col :class="genaraClass('centerB')" class="bordered"><div @click="fnchoseThis('mock1_cb')">中下</div></el-col>
</el-row>
</el-col>
<el-col :span="7">
<el-row>
<el-col :class="genaraClass('rightT')" class="bordered"><div @click="fnchoseThis('mock1_rt')">右上</div></el-col>
<el-col :class="genaraClass('rightC')" class="bordered"><div @click="fnchoseThis('mock1_rc')">右中</div></el-col>
<el-col :class="genaraClass('rightB')" class="bordered"><div @click="fnchoseThis('mock1_rb')">右下</div></el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
{{pagemode1}}
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> 版式2</span>
<el-card style="width: 540px; height: 360px; margin: 8px">
moban2
</el-card>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> 版式3</span>
<el-card style="width: 540px; height: 360px; margin: 8px">
moban2
</el-card>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> 版式4</span>
<el-card style="width: 540px; height: 360px; margin: 8px">
moban2
</el-card>
</el-tab-pane>
</el-tabs>
</el-row>
</div>
</template>
<script>
export default {
name: "PieSetting",
props:{
mockParaChange:{
typeof:String,
}
},
watch:{
mockParaChange(v){
console.log('值改变了,通过父组件改变的--',v)
this.mockParanchan = v
}
},
mounted(){
console.log('mockParachange---',this.mockParaChange)
this.mockParanchan = this.mockParaChange
},
components: {
},
data() {
return {
pagemode1:{
modeTypeId:"1_1",
leftT:"",
leftC:"",
leftB:"",
centerT:"",
centerC:"",
centerB:"",
rightT:"",
rightC:"",
rightB:"",
},
choseMockPosId:1,
mockParanchan:"",
};
},
methods: {
// 根据不同条件映射不同class
genaraClass(pos){
if(pos){ // 首先位置有值-被点击过
console.log(pos,'---',this.pagemode1[pos])
return this.pagemode1[pos]
// if(this.mockParanchan=="addThis"){
// return 'addThis'
// }else if(this.mockParanchan=="addThis2"){
// return 'addThis2'
// }
}
},
// 确定模板的选择
fnconfirommock(){
var choseMockId = JSON.stringify(this.pagemode1)
window.localStorage.setItem("choseMockdata",choseMockId)
},
// 清空模板
fnchoseClear(){
// this.pagemode1.leftT
for (var key in this.pagemode1){//遍历键值对
console.log(key+":"+this.pagemode1[key]);
this.pagemode1[key] = ""
}
},
// 模板块儿填充
fnchoseThis(chosePosId){
switch(chosePosId){
case 'mock1_lt':
this.pagemode1.leftT = this.mockParanchan
break;
case 'mock1_lc':
this.pagemode1.leftC = this.mockParanchan
break;
case 'mock1_lb':
this.pagemode1.leftB = this.mockParanchan
break;
case 'mock1_ct':
this.pagemode1.centerT = this.mockParanchan
break;
case 'mock1_cc':
this.pagemode1.centerC = this.mockParanchan
break;
case 'mock1_cb':
this.pagemode1.centerB = this.mockParanchan
break;
case 'mock1_rt':
this.pagemode1.rightT = this.mockParanchan
break;
case 'mock1_rc':
this.pagemode1.rightC = this.mockParanchan
break;
case 'mock1_rb':
this.pagemode1.rightB = this.mockParanchan
}
},
},
};
</script>
<style scoped lang="less">
.addThis{
background:url("/img/mockBgPie1.png");
background-size: contain;
background-repeat: no-repeat;
}
.addThis2{
background:url("/img/mockBgPieM.png");
background-size: contain;
background-repeat: no-repeat;
}
.choseThisBtn{
.el-button+.el-button{
margin-top:4px;
}
}
.bordered{
height:100px;border:1px solid #ccc;cursor: pointer;
}
</style>
标签：case,mockParanchan,样式,九宫格,pagemode1,break,vue,background,mock1 来源： https://www.cnblogs.com/zbbk/p/15926333.html