Vue怎么用Vue搭个日历组件？看今天是哪天

最近Vue真的是大热，设计师们都为它疯狂！它有超多实用工具和强大功能，例如组件化、数据绑定更不用提处理事件了。所以我们做网页应用程序速度飞快，灵活性高，还方便管理。今天就教你们怎么用Vue搭个日历组件。首先搞清楚需要什么，然后把组件拆分开，一点点搞定每个部分。跟我学，你也能做出一个炫酷的日历。

1、需求分析

挑日历，关键就在于好用。首先，得能查找到当月的活动；其次，换个月份也得看得懂日期；再来点儿有趣的功能就更好了，比如把节日给圈出来，还有提醒你别忘了完成任务什么的。

2、组件拆分

咱们聊聊这个日历。搞定月份和翻页之后，它的身体就是秀出来的日子了。

  

    
      {{ month.label }}
    
    Next
    Prev
  


export default {
  data() {
    return {
      currentMonth: new Date().getMonth() + 1,
      months: [
        { value: 1, label: 'January' },
        { value: 2, label: 'February' },
        { value: 3, label: 'March' },
        { value: 4, label: 'April' },
        { value: 5, label: 'May' },
        { value: 6, label: 'June' },
        { value: 7, label: 'July' },
        { value: 8, label: 'August' },
        { value: 9, label: 'September' },
        { value: 10, label: 'October' },
        { value: 11, label: 'November' },
        { value: 12, label: 'December' },
      ],
    };
  },
  methods: {
    nextMonth() {
      this.currentMonth++;
      if (this.currentMonth > 12) {
        this.currentMonth = 1;
      }
    },
    prevMonth() {
      this.currentMonth--;
      if (this.currentMonth < 1) {
        this.currentMonth = 12;
      }
    },
    onMonthChange() {
      // 处理月份切换
    },
  },
};

3、组件编写

头部组件

告诉你这个日历软件挺牛的，不仅可以看当月的还能随便换！就用那个Select组件就能搞定。首先得把现在的月份搞清楚（currentMonth），然后把所有月份都写进去（listmonths），再添上两个按钮——nextMonth和prevMonth，想怎么换就怎么换。

日历主体组件

  

    

      {{ day === 0 ? '' : day }}
    
  


import moment from 'moment';
export default {
  props: {
    month: Number,
    year: Number,
  },
  data() {
    return {
      days: [],
    };
  },
  computed: {
    startDay() {
      return moment(`${this.year}-${this.month}-01`).day();
    },
    totalDays() {
      return moment(`${this.year}-${this.month}`, 'YYYY-MM').daysInMonth();
    },
  },
  methods: {
    onClick(day) {
      if (day !== 0) {
        // 跳转到该天的具体信息页面
      }
    },
  },
  mounted() {
    let days = Array.from({ length: 42 }).fill(0);
    for (let i = 1; i <= this.totalDays; i++) {
      days[i + this.startDay - 1] = i;
    }
    this.days = days;
  },
};

这个小东西，就是给你看看今天是哪天。咱们得搞个循环数天数，用一个叫Moment.js的牛叉工具算日期，看每个月或每年头一天到底是啥日子。先装上Moment.js，然后定下month（月份）和year（年份），就是你现在是啥几月哪一年。计算出startDay（开始日）和totalDays（总天数）之后，就能知道你想知道的了。最后，用mounted钩子函数把日期数据搞定，让它在网页上亮相就行了。

日历组件

咱们就把自个儿当日子看，把头和身子包起来，事儿就容易解决了！首先搞定Header跟Body两部分，再用力一裹。然后，壳里面写上个月和今年的年份就行了。

  

    

    

      
Sun
      
Mon
      
Tue
      
Wed
      
Thu
      
Fri
      
Sat
    
    
  


import Header from './Header.vue';
import Body from './Body.vue';
export default {
  components: {
    Header,
    Body,
  },
  data() {
    return {
      currentMonth: new Date().getMonth() + 1,
      currentYear: new Date().getFullYear(),
    };
  },
};

4、使用日历组件

搞定后，想晒哪天晒哪天，随性发挥展示个性日历哦!找地方摆好，网页立马变成日历~不过别忘了，这只是基本版本，还得看你自己喜欢怎么装饰咯~

搞定！我用Vue搞出来个超实用的日历组件。当然你也可以随意改改加点自己喜欢的东西，发挥创意让它更贴近你的项目哒。希望这篇小文对你有帮助哈~下次还见到你用Vue炫技的话，别忘了跟小伙伴们分享~

  

     
  


import Calendar from './Calendar.vue';
export default {
  components: {
    Calendar,
  },
};