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 能夠參考.
• 若是有其餘問題或者版本上, 功能上不兼容的 郵件溝通 zwhcoder@gmail.com