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>

vue:动态样式-(九宫格布局区域块不同样式根据所选不同模板渲染)

vue:动态样式-(九宫格布局区域块不同样式根据所选不同模板渲染)

vue:动态样式-(九宫格布局区域块不同样式根据所选不同模板渲染)

 

上一篇:微信小程序父子间传值(记录自己遇到的错误)


下一篇:enum.Enum 枚举类型