vue移动端中实现日历效果

前言：

        在需要一个移动端的日历效果时，找了很多资料，这里分享下我找的两个资料，一个是使用了插件 vue-hash-calendar ，还有一个是自己封装的组件。

我这边最终实现效果：

一、vue-hash-calendar使用教程：github地址入口

1、npm装插件 

cnpm i vue-hash-calendar

2、main.js中配置

// 在入口文件中（main.js），导入组件库
import vueHashCalendar from 'vue-hash-calendar'
// 引入组件CSS样式
import 'vue-hash-calendar/lib/vue-hash-calendar.css'
// 注册组件库
Vue.use(vueHashCalendar)

3、在页面组件中使用，注意这里有坑，操作不当容易出现空白出不来情况，我这里是用的他的弹框属性

template里面直接使用标签：

data里面定义：

data () {
  return {
    /**
     * 日历弹框
     * */
    isShowCalendar:false,//日历组件


  };
},

methods里面定义他的禁用方法和点击确定事件

methods: {
   /**
     * 改变时间
     * */
    changeTime(data){
      this.showDate = data;//改变页面展示的时间
      this.initPageData();// 初始化更新页面数据
      this.getBarData();//刷新柱图数据
    },


    /**
     * 禁用今天以后的日期
     * */
    disabledDate(date) {
      let timestamp = date.getTime();
      if (timestamp > new Date().getTime()) {
        return true
      }

      return false
    }



}

二、自己封装的移动端日历组件（入口）

源码：