vue-calendar 基於 vue 2.0 開發的輕量，高性能日歷組件

vue-calendar-component

• 基於 vue 2.0 開發的輕量，高性能日歷組件
• 占用內存小，性能好，樣式好看，可擴展性強
• 原生 js 開發，沒引入第三方庫

Why

• Github 上很多點擊彈出日歷選擇某個時間的組件，卻沒有找到單純展示日歷並且能點擊獲取時間的組件
• 少部分日歷組件的占用內存過於大，對於日歷這樣簡單的功能來說顯然不夠合理

Demo

或者請用瀏覽器的手機模式查看

效果

• 🎉 覺得好用給一個 star 哦~~ 🎉

Install

npm i vue-calendar-component --save
cnpm i vue-calendar-component --save  //國內鏡像

Usage

//vue文件中引入
import Calendar from 'vue-calendar-component';

 components: {
    Calendar
  }
    <Calendar
      v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate"
      // v-on:isToday="clickToday"
      // :markDate=arr // arr=['2018/4/1','2018/4/3'] 標記4月1日和4月3日 簡單標記
      //:markDateMore=arr // 多種不同的標記
      // 第一個標記和第二個標記不能同時使用
      // :agoDayHide='1514937600' //某個日期以前的不允許點擊  時間戳10位
      // :futureDayHide='1525104000' //某個日期以后的不允許點擊  時間戳10位
      // :sundayStart="true" //默認是周一開始 當是true的時候 是周日開始
    ></Calendar>

    clickDay(data) {
      console.log(data); //選中某天
    },
    changeDate(data) {
      console.log(data); //左右點擊切換月份
    },
    clickToday(data) {
      console.log(data); //跳到了本月
    }

  // 多個標記示例
  arr=[{date:'2018/4/1',className:"mark1"}, {date:'2018/4/13',className:"mark2"}];
  //4月1 標記的className是mark1 根據class做出一些標記樣式

github地址 詳細文檔

API

屬性	說明	默認	是否必傳
choseDay	選中某天調用的方法，返回選中的日期 YY-MM-DD	無	否
changeMonth	切換月份調用的方法，返回切換到某月的日期 YY-MM-DD	無	否
isToday	切換月份的時候，如果切到當前月份，調用這個方法，返回當前月今天	無	否
markDate	如果需要某月的幾天被標注，傳當月的日期數組。如["2018/2/2","2018/2/6"]被會標注（相同的標記）	空數組	否
markDateMore	需要不同的標記如上Usage 最后一行示例代碼	空數組	否
agoDayHide	某個日期以前的不允許點擊 時間戳長度是 10 位	0	否
futureDayHide	某個日期以后的不允許點擊 時間戳長度是 10 位	很大	否
sundayStart	默認是周一開始 當是true的時候 是周日開始	false	否
textTop	日歷頭部的文字，默認是 [ '日','一', '二', '三', '四', '五', '六'] ，可以根據自己的需求進行不同的修改。	---	否

✅ 在 Calendar標簽上添加 ref 屬性, 暴露出三個方法可以  直接切換月份
例如: <Calendar ref="Calendar"></Calendar>

      ✅ this.$refs.Calendar.PreMonth();  //調用方法實現轉到上個月
      ✅ this.$refs.Calendar.NextMonth(); //調用方法實現轉到下個月
      ✅ this.$refs.Calendar.ChoseMonth('2018-12-12'); //調用方法實現轉到某個月
      ✅ this.$refs.Calendar.ChoseMonth('2018-12-12',false); //跳轉到18年12月12日 但是不選中當天
      //第二個參數 false表示不選中日期 。

遇到錯誤---

• 遇到提示UglifyJs打包編譯錯誤。
  因為當前版本UglifyJs不知道編譯es6

解決方法
npm install --save-dev babel-preset-env

然后在根目錄創建一個 .babelrc 文件
在輸入,

{
"presets": ["env"]
}

保存 重新build就OK了

babel-preset-env官方文檔

Other

• src 下面的 App.vue 有 demo 可以參考.
• 如果有其他問題或者版本上, 功能上不兼容的 郵件溝通 [e-mail]