mx_0006_health_bak/src/components/WeekDays.vue

<template>
    <div class="week-days-content">
      <span class="day-item" v-for="(item, index) in weekdays" @click="itemClick(item,index)">
        <span :class="['weekday-name',active == index ?'today-active':'']">{{item.weekdayName}}</span>
        <span :class="['day-date',active == index ?'date-active':'']">{{item.day}}</span>
        <span class="day-has-suit"></span>
      </span>
    </div>
</template>

<script>
  import * as dateUtils from '../utils/dateUtils'
  export default {
    name: 'WeekDays',
    data() {
      return {
        active: -1

      }
    },
    computed:{
      weekdays:function() {
        let arr = dateUtils.getWeekDays(this.start,this.end)
        let findIndex = arr.findIndex(t=>t.isActive)
        if(findIndex > -1){
          arr[findIndex].isActive = false
        }
        this.active = findIndex
        return arr
      }
    },
    mounted () {

    },
    props:{
      'start': {
        type: Date,
        default: new Date()
      },
      'end': {
        type: Date,
        default: new Date()
      }
    },
    methods:{
      itemClick(item,index) {
        this.weekdays.forEach(t=>t.isActive = false)
        this.active = index
        this.$emit('on-item-click',item)
      }
    }
  }
</script>

<style scoped>
.week-days-content {
  width: 100%;
  display: flex;
}
  .day-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
.day-item span {
  width: 100%;
  text-align: center;
}
  .weekday-name {
    flex: 1;
    font-size: 0.5em;
    color: rgba(0,0,0,0.54);
    margin-bottom: 10px;
  }
.day-has-suit{
  display: block;
  width: 6px !important;
  height: 6px !important;
  background-color: #31CA8A;
  border-radius: 100px;
  margin-top: 10px;
}
.today-active{
  color: black;
  font-weight: 600;
}
  .date-active{
    border-radius: 100px;
    background-color: #7D72F2;
    color: white;
  }
  .day-date{
    font-size: 1em;
    display: block;
    width: 5vw !important;
    height: 5vw;
    line-height: 5vw;
    border-radius: 100px;
  }
</style>