vue 写一个日历组件

之前自己写了一个vue的日历demo,那时直接引入cdn的vue.js完成的，功能简单，样式简单，代码还写得乱起八糟，所有现在用vue-cli搭建一个vue项目来重新开发一次，vue--cli搭建vue开发环境可参考https://www.jianshu.com/p/3d44f8269b47

1，新建日历组件

引入reset.css，在assets里新建styles文件夹，将reset.css文件放在styles目录下。

在main.js文件里添加：import './assets/styles/reset.css'

0

记得删除app.vue里的logo

1

然后新建calender.vue。在router文件夹下的index.js改写路由

import Vue from 'vue'

import Router from 'vue-router'

import calender from '@/components/calender'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'calender',

      component: calender

    }

  ]

})

calender.vue

然后在：http://localhost:8081，下就可以看到项目效果

2，实现日历组件的样式

仿照其他日历组件的样式：

2

我自己写的样式附代码

3

3，逻辑和功能实现

得到当前date，获取年份，月份，日期，周几，控制选择日期，代码说明看注释

4，至此，一个日历组件基本完成，最后给当前日期加一个特殊样式

通过  :class="{now:nowLi==year.toString()+month.toString()+item}" 来判断是否是当前日期

nowLi是在methods方法中加以下方法实现，在mounted方法中就要使用该法方法。

//控制当前日期显示特殊样式

    handleShowDateStyle(){

      let now = new Date()

      this.nowLi=now.getFullYear().toString()+(now.getMonth()+1).toString()+now.getDate().toString()

      console.log(this.nowLi)

    },

然后给now加css:

.now{

  background: #f2f8fe;

  color:#1989fa;

}

最后的日历组件完成了：

3

附上项目地址：https://gitee.com/cheng1225/calender