前端根据不同月份现实对应季节的月份按钮样式区分

今天接到一个有点复杂的功能，做12个月份按钮，还要根据月份对应的季节现实不同的按钮底色，包括选中状态，hover状态。

需要一个默认聚焦的按钮，这里用到一个V-focus，就是vue的自定义指令，目前我们在用的是vue2.0。

 <button v-focus>需要聚焦状态的按钮<button>

  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },

在初步需求搞明白之后，出现一个问题，v-focus是对一个dom起效果，如果循环出来的话，12个月份的按钮都会被选中，那就特殊写一个选中的月份，前后在去循环未选中的月份按钮，绑定点击事件，做出来效果如下：

            <el-button type="primary" size="small" 
                       v-for="month in monthList" 
                       :key="month" 
                       class="monthClass"
                       @click="queryMonth(month)" 
                       ref="monthButton1" 
                       v-if="month<selectedMonth" 
                       :class="monthColor(month)">{{month}}</el-button>
            <el-button type="primary" size="small"
                       class="monthClass" 
                       @click="queryMonth(selectedMonth)" 
                       ref="monthButton" 
                       v-focus 
                       :class="monthColorCheck(selectedMonth)">{{selectedMonth}}</el-button>
            <el-button type="primary" size="small" 
                       v-for="month in monthList" 
                       :key="month" 
                       class="monthClass"
                       @click="queryMonth(month)" 
                       ref="monthButton1" 
                       v-if="month>selectedMonth" 
                       :class="monthColor(month)">{{month}}</el-button>
data() {
return:{
selectedMonth: 2,
monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
}},
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
methods: {
queryMonth(month){
      this.selectedMonth = month;
    },
monthColor(month) {
      if(month == 12 || month == 1){
        return 'winter_color'
      }else if(month == 2 || month == 3 || month == 4 || month == 5){
        return 'spring_color'
      }else if(month == 6 || month == 7 || month == 8 ){
        return 'summer_color'
      }
      else if(month == 9 || month == 10 || month == 11 ){
        return 'autumn_color'
      }
    },
    monthColorCheck(month) {//选中状态的按钮样式
      if(month == 12 || month == 1){
        return 'winter_color_check'
      }else if(month == 2 || month == 3 || month == 4 || month == 5){
        return 'spring_color_check'
      }else if(month == 6 || month == 7 || month == 8 ){
        return 'summer_color_check'
      }
      else if(month == 9 || month == 10 || month == 11 ){
        return 'autumn_color_check'
      }
    },},

这是函数绑定的css样式

.winter_color{
  background-color: #D8E4FC !important;
}
.spring_color{
  background-color: #D9F5D6 !important;
}
.summer_color{
  background-color: #FEEACD !important;
}
.autumn_color{
  background-color: #EFE0FB !important;
}
.winter_color_check{
  background-color: #3A78F2 !important;
  color: #FFFFFF !important;
}
.spring_color_check{
  background-color: #7EDD76 !important;
  color: #FFFFFF !important;
}
.summer_color_check{
  background-color: #F9B856 !important;
  color: #FFFFFF !important;
}
.autumn_color_check{
  background-color: #AF65EA !important;
  color: #FFFFFF !important;
}

交完需求紧接着变了，项目经理想做更明显的季节区分，而且据需求说，每一年的月份对应的季节不固定，季节划分要动态维护......

就是复杂一点，循环加判断再加循环再判断~~~~

<template>
              <div v-for="item in seasonList">
                  <div :class="seasonColor(item.label)">{{ item.label }}</div>
                <div :class="seasonBox(item.label)">
                  <el-button type="primary" size="small"
                             v-for="month in monthList"
                             :key="month"
                             class="monthClass"
                             @click="queryMonth(month)"
                             ref="monthButton1"
                             v-if="month<selectedMonth && item.mlist.includes(month)"
                             :class="monthColor(month)">{{month}}</el-button>
                  <el-button type="primary" size="small"
                             v-if="item.mlist.includes(selectedMonth)"
                             class="monthClass"
                             @click="queryMonth(selectedMonth)"
                             ref="monthButton"
                             v-focus
                             :class="monthColorCheck(selectedMonth)">{{selectedMonth}}</el-button>
                  <el-button type="primary" size="small"
                             v-for="month in monthList"
                             :key="month"
                             class="monthClass"
                             @click="queryMonth(month)"
                             ref="monthButton1"
                             v-if="month>selectedMonth && item.mlist.includes(month)"
                             :class="monthColor(month)">{{month}}</el-button>
                </div>

              </div>
</template>
<script>
export default {
  data() {
    return {
      seasonList: {
        springList: {
          label: '春季',
          mlist:  [2,3,4,5],
        },
        summerList: {
          label: '夏季',
          mlist:  [6,7,8],
        },
        autumnList: {
          label: '秋季',
          mlist:  [9,10,11],
        },
        winterList: {
          label: '冬季',
          mlist:  [12,1],//季节划分，按需取数，这里写了固定的。
        },
      },
      monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
      selectedMonth: 2,
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  },
 methods: {
 queryMonth(month){
      this.selectedMonth = month;
      this.loadChart();
    },
    seasonColor(season) {
      if(season == '春季'){
        return 'spring_season'
      }else if(season == '夏季'){
        return 'summer_season'
      }else if(season == '秋季' ){
        return 'autumn_season'
      }
      else if(season == '冬季' ){
        return 'winter_season'
      }
    },
    seasonBox(season) {
      if(season == '春季'){
        return 'spring_box'
      }else if(season == '夏季'){
        return 'summer_box'
      }else if(season == '秋季' ){
        return 'autumn_box'
      }
      else if(season == '冬季' ){
        return 'winter_box'
      }
    },
    monthColor(month) {
      if(month == 12 || month == 1){
        return 'winter_color'
      }else if(month == 2 || month == 3 || month == 4 || month == 5){
        return 'spring_color'
      }else if(month == 6 || month == 7 || month == 8 ){
        return 'summer_color'
      }
      else if(month == 9 || month == 10 || month == 11 ){
        return 'autumn_color'
      }
    },
    monthColorCheck(month) {
      if(month == 12 || month == 1){
        return 'winter_color_check'
      }else if(month == 2 || month == 3 || month == 4 || month == 5){
        return 'spring_color_check'
      }else if(month == 6 || month == 7 || month == 8 ){
        return 'summer_color_check'
      }
      else if(month == 9 || month == 10 || month == 11 ){
        return 'autumn_color_check'
      }
    },
}，
</script>

css如下

.spring_season{
  background-color: #D9F5D650 !important;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  margin-top: 5px;
}
.summer_season{
  background-color: #FEEACD50 !important;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  margin-top: 5px;
}
.autumn_season{
  background-color: #EFE0FB50 !important;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  margin-top: 5px;
}
.winter_season{
  background-color: #D8E4FC50 !important;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 6px;
  margin-top: 5px
}
.spring_box{
  background-color: #D9F5D650 !important;
  padding: 5px;
}
.summer_box{
  background-color: #FEEACD50 !important;
  padding: 5px;
}
.autumn_box{
  background-color: #EFE0FB50 !important;
  padding: 5px;
}
.winter_box{
  background-color: #D8E4FC50 !important;
  padding: 5px;
}
.winter_color{
  background-color: #D8E4FC !important;
}
.spring_color{
  background-color: #D9F5D6 !important;
}
.summer_color{
  background-color: #FEEACD !important;
}
.autumn_color{
  background-color: #EFE0FB !important;
}
.winter_color_check{
  background-color: #3A78F2 !important;
  color: #FFFFFF !important;
}
.spring_color_check{
  background-color: #7EDD76 !important;
  color: #FFFFFF !important;
}
.summer_color_check{
  background-color: #F9B856 !important;
  color: #FFFFFF !important;
}
.autumn_color_check{
  background-color: #AF65EA !important;
  color: #FFFFFF !important;
}
.monthClass{
  color:#606266 !important;
  border: none !important;
  width: 40px;
  margin-top: 5px;
  margin-left: 10px;
  background: #f0f2f8;
  border-radius: 2px;
  box-shadow: 0px 8px 10px 0px rgba(234,234,234,0.20);
}