快捷導航

Vue.js實現(xiàn)日歷功能

更新時間：2021年08月12日 15:52:08 作者：LK30265

這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)日歷功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue.js實現(xiàn)日歷功能的具體代碼，供大家參考，具體內(nèi)容如下

功能需求

使用 Vue.js 實現(xiàn)指定年月的日歷表，配合后臺接口數(shù)據(jù)，添加對應(yīng)日期的空氣質(zhì)量描述等信息。后臺傳遞當月空氣質(zhì)量指數(shù)的數(shù)據(jù)，前端生成日歷表后將空氣質(zhì)量指數(shù)添加到對應(yīng)日期上。

空氣質(zhì)量數(shù)據(jù)示例：

data.json

{
  "code": 200,
  "msg": "",
  "data": [{
      "time": "2020-08-01",
      "kqzl": "優(yōu)"
    },
    {
      "time": "2020-08-02",
      "kqzl": "良"
    },
    {
      "time": "2020-08-03",
      "kqzl": "良"
    }
  ]
}

實現(xiàn)方法

<template>
  <div id="app">
    <h1 style="text-align:center;">
      2020-08</h1>
    <div class="calendar-container">
      <div class="calendar-week">
        <div class="cw-inner">
          <div class="cw-item"
               :style="{width: setItemWidth}"
               v-for="(item, index) of week"
               :key="index">
            {{item}}
          </div>
        </div>
      </div>
      <div class="calendar-day">
        <div class="cd-list"
             v-for="(item, index) of day"
             :key="index">
          <div class="cl-item"
               :style="{width: setItemWidth}"
               v-for="(child,index) of item"
               :key="index"
               :class="[{has: child}]">
            <div class="ci-inner"
                 v-if="child">
              <span>{{child.date}}</span>
              <span v-if="child.text"
                    class="aqi"
                    :class="child.text.kqzl">
                {{child.text.kqzl}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import kqzlData from './assets/data.json' // 空氣質(zhì)量數(shù)據(jù)
export default {
  name: 'app',
  data() {
    return {
      week: [
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
        '星期日',
      ],
      day: [],
    }
  },
  computed: {
    setItemWidth() {
      return 100 / 7 + '%'
    },
  },
  mounted() {
    this.createCalendar(2020, 8)
  },
  methods: {
    /**
     * @name: 格式化日期
     * @param {date}
     */
    dateFormat(date) {
      let dateArr = date.split('-')
      let mounth = dateArr[1] >= 10 ? dateArr[1] : '0' + dateArr[1]
      let day = dateArr[2] >= 10 ? dateArr[2] : '0' + dateArr[2]
      return dateArr[0] + '-' + mounth + '-' + day
    },

    /**
     * @name: 日期信息
     * @param {date}
     */
    getDayInfo(date) {
      let kqzl = kqzlData.data
      let formatDate = this.dateFormat(date)
      let txt = kqzl[kqzl.findIndex(item => item.time === formatDate)]
      return txt
    },

    /**
     * @name: 生成日歷表
     * @param {year}
     * @param {mounth}
     */
    createCalendar(year, mounth) {
      // 某個月一共有多少天
      let allDay = new Date(year, mounth, 0).getDate()
      // 某個月1號是星期幾
      let firstDay = this.judjeFirstDay(year, mounth)
      // 需要多少行來展示
      let row = Math.ceil((allDay + firstDay) / 7)
      let k = firstDay - 1
      let result = []
      let count = 1
      // 生成日歷二維數(shù)組
      for (let i = 0; i < row; i++) {
        result[i] = new Array(7)
        do {
          if (count <= allDay) {
            result[i][k] = {
              date: count,
              // 根據(jù)接口匹配日期對應(yīng)的信息
              text: this.getDayInfo(year + '-' + mounth + '-' + count),
            }
            k++
            count++
          } else {
            break
          }
        } while (k < 7)
        k = 0
      }
      this.day = result
    },

    /**
     * @name: 判斷某年某月1號是星期幾
     * @param {year}
     * @param {mounth}
     */
    judjeFirstDay(year, mounth) {
      let date = new Date(year, mounth - 1, 1)
      let week = date.getDay()
      let weekArr = [1, 2, 3, 4, 5, 6, 7]
      return weekArr[week - 1]
    },
  },
}
</script>

<style lang="scss">
.calendar-container {
  text-align: center;
  .calendar-week {
    margin-bottom: 4px;
    padding: 0 4px;
    color: #fff;
    .cw-inner {
      overflow: hidden;
      background: #a0a0a0;
      .cw-item {
        float: left;
        padding: 8px 0;
      }
    }
  }
  .calendar-day {
    .cd-list {
      overflow: hidden;
      .cl-item {
        float: left;
        min-height: 30px;
        box-sizing: border-box;
        padding: 4px;
        .ci-inner {
          background: #f5f5f5;
          padding: 8px 0;
          span {
            display: inline-block;
            &.aqi {
              color: #fff;
              background: #a7cf8c;
              padding: 0 4px;
              border-radius: 4px;
            }
            &.優(yōu) {
              background: #a7cf8c;
            }
            &.良 {
              background: #f7da64;
            }
            &.輕度 {
              background: #f29e39;
            }
            &.中度 {
              background: #da555d;
            }
            &.重度 {
              background: #b9377a;
            }
            &.嚴重 {
              background: #881326;
            }
          }
        }
      }
    }
  }
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: