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了
Other
- src 下面的 App.vue 有 demo 可以參考.
- 如果有其他問題或者版本上, 功能上不相容的 郵件溝通 zwhcoder@gmail.com