Element UI 时间组件修改样式

代码片

<template>
  <div>
    <div class="divideThe">
      <div>优质睡眠时间参考范围(h)：6~8/小时</div>
      <div>
        <el-date-picker
	        prefix-icon="el-icon-date"
	        popper-class='popperClass'
	        :picker-options="pickerOptions"
	        v-model="date"
	        type="month"
	        value-format='yyyy-MM'
	        :clearable="false"
	        placeholder="选择日期">
	      </el-date-picker>
      <el-button @click="ElderHeartRate">搜索</el-button>
      </div>
    </div>
    <!-- 图表 -->
    <div id="main" ref="main" style='width:100%;height:600px'></div>
  </div>
</template>

<script>

  // 心电监测
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/pie'
import {getElderSleepMonitorData,getElderSleepMonitorDateTimeList} from '@/api/health'
import {mapState} from "vuex"

export default {
  name:'HeartRate',
  data(){
    return{
      date:'',//时间
      min:[0,0],//用户更改月份
      myChart:null,//图表
      time:[],//时间列表数组
      ClassName:[],
      // 图表数据
      option : {
       
      },
      // 修改时间组件的样式
      pickerOptions: {
        /* 
        首先获取真实DOM元素数组，因组件内部问题要获取月份会获取(上个月，这个月以及下个月)的数据，因此进行判断,
        当相同的月份重复重新超过20次，则判断为当前月，
        */
        cellClassName: (item) => {
          // 获取DOM元素
          let popperClass=document.getElementsByClassName('cell')
          // 获取组件月份
          let min=`${item.getMonth()+1>9?(item.getMonth()+1):'0'+(item.getMonth()+1)}`
          // 判断当前月份
          if(this.min[0]===min){
            this.min[1]+=1
          }else{
            this.min[0]=min
            this.min[1]=0
          }
          // 确定当前月份
          if(this.min[1]>20){
            // 月
            let Month=item.getMonth()+1
            // 年
            let year=item.getFullYear()
            // 判断是否更换年份
            if(year != this.date.slice(0,4)){
              // console.log("@1",year)
              // 清除样式
              for (let i = 0; i < popperClass.length; i++) {
                popperClass[i].className='cell'
              }
              // 赋值时间
              this.date=`${year}-${Month}`
              //  console.log("@",year)
              // 清空数据
              this.time=[]
              // 获取数据
              this.ElderSleepMonitorDateTimeList()
            }else{
              // console.log("@2",year)
              if(this.date.slice(5,7)==`0${Month}`){
                // console.log(`@${year}-${Month}`,this.date)
                if(this.time.length){
                  // 添加样式
                  // console.log("@",item.getFullYear())
                  for (let i = 0; i < this.time.length; i++) {
                    popperClass[Number(this.time[i].sleepTime.slice(5,7))+9].className='mode cell'
                  }
                }
              }
            }
          }
        },
      },
    }
  },
  //  ID
  computed:{
    ...mapState({elderId:state=>state.elderId})
  },
  methods: {
    // 睡眠范围列表
    async ElderHeartRate(){},
    // 时间列表数组
    async ElderSleepMonitorDateTimeList(){
      // year===undefined?this.date.slice(0,4):year
      const result=await getElderSleepMonitorDateTimeList({year:this.date.slice(0,4),elderID:this.elderId})
      // console.log(this.date)
      if(result.code ==0){
        this.time=result.data
      }
    },
 
  },
  created(){
    // 当前时间
    let date=new Date
    let year= date.getFullYear()>9?date.getFullYear():'0'+date.getFullYear()
    let month= (date.getMonth()+1)>9?(date.getMonth()+1):'0'+(date.getMonth()+1)
    // let day=date.getDate()
    this.date=`${year}-${month}`//-${day}
    // 睡眠范围列表
    this.ElderHeartRate()
    // 时间列表数组
    this.ElderSleepMonitorDateTimeList()
  },
}
</script>

<style lang='less' scoped>
.divideThe{
  width: 100%;
  display:flex;
  flex-flow: row wrap;
  justify-content:space-around;
}
.col{
  padding:20px;
  background-color:#f0f0f0;
}
.left{
  padding-left:6vw ;
}

</style>
<!-- 此时style 一定要是全局的否则不生效 -->
<style>
  a.cell{
    position: relative;
  }
  a.cell.mode::after {
    position: absolute;
    content: '';
    right: 30px;
    top: 40px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgb(15, 206, 240);
}

</style>