vue+elementUI简单的实现日历功能

最新推荐文章于 2025-04-03 14:52:56 发布

汤圆(dumpling)

最新推荐文章于 2025-04-03 14:52:56 发布

阅读量3.2k

点赞数 7

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_47668952/article/details/108724136

版权

本文介绍如何利用Vue和ElementUI组件库轻松实现一个日历功能。通过结合Vue的响应式特性和ElementUI的易用组件，可以快速搭建出功能完整的日历展示。最终效果良好，适合初学者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+elementUI简单的实现日历功能

<div class="calender2">
    <div class="date-headers">
    <div class="date-header">
        <div><el-button type="primary" @click="handlePrev"><i class="el-icon-arrow-left"></i>上一月</el-button></div>
        <div>{
  { year }}年{
  { month }}月{
  { day }}日</div>
        <div><el-button type="primary" @click="handleNext">下一月<i class="el-icon-arrow-right"></i></el-button></div>
        <div><el-button type="primary" icon="el-icon-refresh-left" @click="refresh"></el-button></div>
    </div>
    </div>
    <div class="date-content">
        <div class="week-header">
            <div
              v-for="item in ['日','一','二','三','四','五','六']"
              :key=item
            >{
  { item }}
            </div>
        </div>
        <div class="week-day">
            <div
              class="every-day"
              v-for="item in 42"
              :key="item"
              @click="handleClickDay(item - beginDay)"
            >
                <div v-if="item - beginDay > 0 && item - beginDay <= curDays"     :class="`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}` ? 'nowDay':''"
                >{
  { item - beginDay }}</div>
                <div class="other-day" v-else-if="item - beginDay <= 0">{
  { item - beginDay + prevDays }}</div>
                <div class="other-day" v-else>{
  { item - beginDay -curDays }}</div>
            </div>
        </div>
    </div>
</div>

## javascript

<script>
    export default {
   
        name: "HelloWorld",
        data() {
   
            return {
   
                year: null,
                month: null,
                day: null,
                currentDay: null,
                currentYearMonthTimes: null,//当前年的月的天数
                monthOneDay: null,//一个月中的某一天
                curDate: null,
                prevDays: null,//上一月天数
            }
        },
        computed: {
   
            curDays() {
   
                return new Date(this.year, this.month, 0).getDate();
            },
            // 设置该月日期起始值（找到一号是在哪里）
            beginDay() {
   
                return new Date(this.year, this.month - 1, 1).getDay();
            }

最低0.47元/天解锁文章