欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

從零寫vue日歷組件

 更新時(shí)間：2022年03月02日 10:18:02   作者：Sheldon一蓑煙雨任平生  
最近做項(xiàng)目遇到一個(gè)需求，需要制作一個(gè)定制化的日歷組件，本文主要介紹了從零寫vue日歷組件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1. 前言

最近做項(xiàng)目遇到一個(gè)需求，需要制作一個(gè)定制化的日歷組件（項(xiàng)目使用的UI框架不能滿足需求，算了，我直說了吧，ant design vue的日歷組件是真的丑，所以就自己寫了一個(gè)），如下圖所示，需求大致如下：
（2）日歷可以按照月份進(jìn)行上下月的切換。
（2）按照月份展示周一到周日的排班信息。
（3）排班信息分為早班和晚班。
（4）按照日期對排班進(jìn)行顏色區(qū)分：當(dāng)前月份排班信息正常顏色，今天顯示深色，其他月份顯示淺色。
（5）點(diǎn)擊編輯按鈕，日歷進(jìn)入編輯模式。簡單點(diǎn)說就是，今天和今天之后的排班右側(cè)都顯示一個(gè)選擇按鈕，點(diǎn)擊后可彈框編輯當(dāng)日的排班人員。

在這里插入圖片描述

在這里插入圖片描述

如果只需要日歷組件部分，可以直接看2.2部分，只需要傳遞當(dāng)前時(shí)間（一個(gè)包含當(dāng)前年份和月份的對象），即可展示完整的當(dāng)前月日歷。

2. vue日歷制作

因?yàn)轫?xiàng)目使用的是ant desgin vue框架，所以會(huì)有a-row、a-col、a-card等標(biāo)簽，如果是使用elementUI，將標(biāo)簽替換成對應(yīng)的el-row、el-col、el-card等標(biāo)簽即可。

2.1 制作月份選擇器

效果示意圖：

在這里插入圖片描述

按照需求，我們首先需要制作一個(gè)月份選擇器，用于提供月份的切換，默認(rèn)顯示當(dāng)前月。點(diǎn)擊左側(cè)箭頭向前一個(gè)月，點(diǎn)擊右側(cè)箭頭向后一個(gè)月，并且每次點(diǎn)擊都會(huì)向外拋出changeMonth函數(shù)，攜帶對象time，包含當(dāng)前月份選擇器的年份和月份。

<template>
  <!-- 月份選擇器，支持左右箭頭修改月份 -->
  <div class="month-con">
    <a-icon type="left" @click="reduceMonth()" />
    <span class="month"
      >{{ time.year }}年{{
        time.month + 1 > 9 ? time.month + 1 : '0' + (time.month + 1)
      }}月</span
    >
    <a-icon type="right" @click="addMonth()" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: {
        year: new Date().getFullYear(),
        month: new Date().getMonth()
      }
    }
  },
  created() {},
  methods: {
    reduceMonth() {
      if (this.time.month > 0) {
        this.time.month = this.time.month - 1
      } else {
        this.time.month = 11
        this.time.year = this.time.year - 1
      }
      this.$emit('changeMonth', this.time)
    },
    addMonth() {
      if (this.time.month < 11) {
        this.time.month = this.time.month + 1
      } else {
        this.time.month = 0
        this.time.year = this.time.year + 1
      }
      this.$emit('changeMonth', this.time)
    }
  }
}
</script>
<style lang="less" scoped>
.month-con {
  font-weight: 700;
  font-size: 18px;
  .month {
    margin: 0 10px;
  }
}
</style>

2.2 制作日歷

2.2.1 獲取當(dāng)前月所要顯示的日期

在制作日歷之前，我們可以先觀察下電腦自帶的日歷。經(jīng)過觀察，我們可以發(fā)現(xiàn)以下幾個(gè)規(guī)律：
（1）雖然每個(gè)月的日總數(shù)不同，但是都統(tǒng)一顯示6行，一共42天。
（2）當(dāng)前月的第一天在第一行，并且當(dāng)1號(hào)不在周一時(shí)，會(huì)使用上個(gè)月的日期補(bǔ)全周一到1號(hào)的時(shí)間。
（3）第五行和第六行不屬于當(dāng)前月部分，會(huì)使用下個(gè)月的日期補(bǔ)全。

在這里插入圖片描述

因此參照以上規(guī)律，獲取當(dāng)前月所需要展示的日期時(shí)，可以按照以下幾個(gè)步驟：
（1）獲取當(dāng)前月第一天所在的日期和星期幾
（2）當(dāng)前月第一天星期幾減1就是之前要補(bǔ)足的天數(shù)，將當(dāng)前月第一天減去這個(gè)天數(shù)，就是日歷所要展示的起始日期。比如上面日歷的起始日期就是1月31日。
（3）循環(huán)42次，從起始日期開始，每次時(shí)間加上一天，將這42天的日期存到一個(gè)數(shù)組里，就是日歷所要展示的當(dāng)前月所有日期。
（4）因?yàn)槊看吻袚Q月份都會(huì)重新刷新一次日歷，因此可以直接將日歷數(shù)組寫成computed屬性。

computed: {
    // 獲取當(dāng)前月份顯示日歷,共42天
    visibleCalendar: function() {
      const calendarArr = []
      // 獲取當(dāng)前月份第一天
      const currentFirstDay = new Date(this.time.year, this.time.month, 1)
      // 獲取第一天是周幾
      const weekDay = currentFirstDay.getDay()
      // 用當(dāng)前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
      const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
      // 我們統(tǒng)一用42天來顯示當(dāng)前顯示日歷
      for (let i = 0; i < 42; i++) {
        const date = new Date(startDay + i * 24 * 3600 * 1000)
        calendarArr.push({
          date: new Date(startDay + i * 24 * 3600 * 1000),
          year: date.getFullYear(),
          month: date.getMonth(),
          day: date.getDate()
        })
      }
      return calendarArr
    }
  }

2.2.2 給不同的日期添加不同的樣式

效果示意圖：

在這里插入圖片描述

按照需求，我們需要給不同的日期添加不同的樣式：
（1）當(dāng)前月份排班信息正常顏色
（2）今天顯示深色
（3）其他月份顯示淺色
因此我們獲取當(dāng)前月日歷數(shù)組的時(shí)候，就可以把每一天和今天的日期進(jìn)行比較，從而添加不同的屬性，用于獲取添加不同的樣式：
（1）如果是當(dāng)前月，則thisMonth屬性為thisMonth，否則為空；
（2）如果是當(dāng)天，則isToday屬性為isToday，否則為空；
（3）如果是當(dāng)前月，則afterToday屬性為afterToday，否則為空；

computed: {
    // 獲取當(dāng)前月份顯示日歷,共42天
    visibleCalendar: function() {
      // 獲取今天的年月日
      const today = new Date()
      today.setHours(0)
      today.setMinutes(0)
      today.setSeconds(0)
      today.setMilliseconds(0)

      const calendarArr = []
      // 獲取當(dāng)前月份第一天
      const currentFirstDay = new Date(this.time.year, this.time.month, 1)
      // 獲取第一天是周幾
      const weekDay = currentFirstDay.getDay()
      // 用當(dāng)前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
      const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
      // 我們統(tǒng)一用42天來顯示當(dāng)前顯示日歷
      for (let i = 0; i < 42; i++) {
        const date = new Date(startDay + i * 24 * 3600 * 1000)
        calendarArr.push({
          date: new Date(startDay + i * 24 * 3600 * 1000),
          year: date.getFullYear(),
          month: date.getMonth(),
          day: date.getDate(),
          // 是否在當(dāng)月
          thisMonth:
            date.getFullYear() === today.getFullYear() &&
            date.getMonth() === today.getMonth()
              ? 'thisMonth'
              : '',
          // 是否是今天
          isToday:
            date.getFullYear() === today.getFullYear() &&
            date.getMonth() === today.getMonth() &&
            date.getDate() === today.getDate()
              ? 'isToday'
              : '',
          // 是否在今天之后
          afterToday: date.getTime() >= today.getTime() ? 'afterToday' : ''
        })
      }
      return calendarArr
    }
  }

日歷組件vue代碼如下，在進(jìn)行測試時(shí)，可以先將time的默認(rèn)值設(shè)置為當(dāng)前月：

<template>
  <div>
    <a-row>
      <!-- 左側(cè)，提示早班、晚班或者上午、下午 -->
      <a-col :span="2">
        <div class="date-con tip-con">
          <a-col
            v-for="item in 6"
            :key="item"
            class="date thisMonth tip"
            :span="1"
          >
            <div class="morning">早班</div>
            <div class="evening">晚班</div>
          </a-col>
        </div>
      </a-col>
      <!-- 右側(cè)，周一到周五具體內(nèi)容 -->
      <a-col :span="22">
        <!-- 第一行表頭，周一到周日 -->
        <div class="top-con">
          <div class="top" v-for="item in top" :key="item">星期{{ item }}</div>
        </div>
        <!-- 日歷號(hào) -->
        <div class="date-con">
          <div
            class="date"
            :class="[item.thisMonth, item.isToday, item.afterToday]"
            v-for="(item, index) in visibleCalendar"
            :key="index"
          >
            <div>{{ item.day }}</div>
            <div class="morning">張三，李四</div>
            <div class="evening">王五，趙六</div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// import utils from './utils.js'
export default {
  props: {
    time: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      top: ['一', '二', '三', '四', '五', '六', '日']
    }
  },
  created() {
    console.log('123', this.time)
  },
  methods: {
    // 獲取
  },
  computed: {
    // 獲取當(dāng)前月份顯示日歷,共42天
    visibleCalendar: function() {
      // 獲取今天的年月日
      const today = new Date()
      today.setHours(0)
      today.setMinutes(0)
      today.setSeconds(0)
      today.setMilliseconds(0)

      const calendarArr = []
      // 獲取當(dāng)前月份第一天
      const currentFirstDay = new Date(this.time.year, this.time.month, 1)
      // 獲取第一天是周幾
      const weekDay = currentFirstDay.getDay()
      // 用當(dāng)前月份第一天減去周幾前面幾天，就是看見的日歷的第一天
      const startDay = currentFirstDay - (weekDay - 1) * 24 * 3600 * 1000
      // 我們統(tǒng)一用42天來顯示當(dāng)前顯示日歷
      for (let i = 0; i < 42; i++) {
        const date = new Date(startDay + i * 24 * 3600 * 1000)
        calendarArr.push({
          date: new Date(startDay + i * 24 * 3600 * 1000),
          year: date.getFullYear(),
          month: date.getMonth(),
          day: date.getDate(),
          // 是否在當(dāng)月
          thisMonth:
            date.getFullYear() === today.getFullYear() &&
            date.getMonth() === today.getMonth()
              ? 'thisMonth'
              : '',
          // 是否是今天
          isToday:
            date.getFullYear() === today.getFullYear() &&
            date.getMonth() === today.getMonth() &&
            date.getDate() === today.getDate()
              ? 'isToday'
              : '',
          // 是否在今天之后
          afterToday: date.getTime() >= today.getTime() ? 'afterToday' : ''
        })
      }
      return calendarArr
    }
  }
}
</script>
<style lang="less" scoped>
.top-con {
  display: flex;
  align-items: center;
  .top {
    width: 14.285%;
    background-color: rgb(242, 242, 242);
    padding: 10px 0;
    margin: 5px;
    text-align: center;
  }
}
.date-con {
  display: flex;
  flex-wrap: wrap;
  .date {
    width: 14.285%;
    text-align: center;
    padding: 5px;
    .morning {
      padding: 10px 0;
      background-color: rgba(220, 245, 253, 0.3);
    }
    .evening {
      padding: 10px 0;
      background-color: rgba(220, 244, 209, 0.3);
    }
  }
  .thisMonth {
    .morning {
      background-color: rgb(220, 245, 253);
    }
    .evening {
      background-color: rgb(220, 244, 209);
    }
  }
  .isToday {
    font-weight: 700;
    .morning {
      background-color: rgb(169, 225, 243);
    }
    .evening {
      background-color: rgb(193, 233, 175);
    }
  }
}
.tip-con {
  margin-top: 51px;
  .tip {
    margin-top: 21px;
    width: 100%;
  }
}
</style>

2.3 將月份選擇器和日歷組件組合使用

效果示意圖：

在這里插入圖片描述

在這里插入圖片描述

組合代碼如下：

<template>
  <div>
    <a-card>
      <!-- 操作欄 -->
      <a-row type="flex" justify="space-around">
        <a-col :span="12">
          <!-- 月份選擇器 -->
          <monthpicker @changeMonth="changeMonth"></monthpicker>
        </a-col>
        <a-col :span="12"></a-col>
      </a-row>
      <!-- 日歷欄 -->
      <a-row class="calendar-con">
        <calendar :time="time"></calendar>
      </a-row>
    </a-card>
  </div>
</template>

<script>
// 月份選擇器
import Monthpicker from './components/Monthpicker.vue'
// 日歷組件
import Calendar from './components/Calendar.vue'
export default {
  components: {
    monthpicker: Monthpicker,
    calendar: Calendar
  },
  data() {
    return {
      time: {
        year: new Date().getFullYear(),
        month: new Date().getMonth()
      }
    }
  },
  created() {},
  methods: {
    // 修改月份
    changeMonth(time) {
      console.log('time', time)
      this.time = time
    }
  }
}
</script>
<style lang="less" scoped>
.month-con {
  font-weight: 700;
  font-size: 18px;
  .month {
    margin: 0 10px;
  }
}
.calendar-con {
  margin-top: 20px;
}
</style>

通過changeMonth事件，將月份選擇器的月份傳遞給日歷組件，這樣就完成了一個(gè)簡單的能夠修改月份的日歷組件了。

2.4 編輯功能

效果示意圖：

在這里插入圖片描述

在這里插入圖片描述

根據(jù)需求，我們還需要對日歷的內(nèi)容具有編輯能力。具體需求為在日歷上方添加一個(gè)編輯按鈕，點(diǎn)擊后將日歷切換為編輯模式，其實(shí)就是每個(gè)格子的值班信息后顯示一個(gè)選擇按鈕，點(diǎn)擊后彈出彈框或者跳轉(zhuǎn)至編輯頁，用于修改當(dāng)前格子的值班信息。完成修改后點(diǎn)擊保存，關(guān)閉彈框或者返回日歷頁，重新查詢當(dāng)前日歷值班信息。

當(dāng)然：以上只是編輯功能的其中一種實(shí)現(xiàn)思路，如果格子內(nèi)只是文本信息，不涉及任何復(fù)雜的綁定，亦可以通過點(diǎn)擊編輯按鈕將每個(gè)格子轉(zhuǎn)換成input輸入框，右側(cè)加上一個(gè)保存按鈕（也可以在日歷上方加上一個(gè)總的保存按鈕），編輯完畢后，點(diǎn)擊保存，再恢復(fù)至文本形式即可。

注意：通常只有今天和今天之后的值班信息可以編輯，因此之前的日歷數(shù)組中的每個(gè)日期對象我們都保存了一個(gè)afterToday屬性，可以用于判斷是否渲染選擇按鈕。 因?yàn)榫庉嫻δ苓^于簡單，就不寫代碼演示了。

到此這篇關(guān)于從零寫vue日歷組件的文章就介紹到這了,更多相關(guān)vue日歷內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論