vue-calendar 基於 vue 2.0 開發的輕量，高效能日曆元件

史蒂芬_周發表於2019-02-28
原文網址 : https://flycode.co/archives/272554
Vue元件

vue-calendar-component

  • 基於 vue 2.0 開發的輕量，高效能日曆元件
  • 佔用記憶體小，效能好，樣式好看，可擴充套件性強
  • 原生 js 開發，沒引入第三方庫

Why

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

Demo

效果
或者請用瀏覽器的手機模式檢視

效果

vue-calendar 基於 vue 2.0 開發的輕量，高效能日曆元件
  • ? 覺得好用給一個 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

相關文章