基於vue的自定義日歷組件

如果本文幫助到你，本人不勝榮幸，如果浪費了你的時間，本人深感抱歉。
希望用最簡單的大白話來幫助那些像我一樣的人。如果有什么錯誤，請一定指出，以免誤導大家、也誤導我。

項目github地址

線上demo地址

使用步驟：

1、安裝包

cnpm i

2、運行dev

npm run dev

項目目錄：

 

 

 

自定義農歷節日：

yinli_festival.json

{
  "01-06":"陰歷節1",
  "01-10":"陰歷節2",
  "01-15":"陰歷節3",
  "02-07":"陰歷節7",
  "03-03":"陰歷節8",
  "04-07":"陰歷節12",
  "04-12":"陰歷節16",
  "04-08":"陰歷節17",
  "05-07":"陰歷節18",
  "05-17":"陰歷節21",
  "05-28":"陰歷節22",
  "06-09":"陰歷節24"
}

自定義陽歷節日：

yangli_festival.json

{
  "01-05":"陽歷節1",
  "01-09":"陽歷節2",
  "01-12":"陽歷節3",
  "01-17":"陽歷節4",
  "01-22":"陽歷節5",
  "02-01":"陽歷節6",
  "02-05":"陽歷節7",
  "03-03":"陽歷節8",
  "03-16":"陽歷節9",
  "03-18":"陽歷節10",
  "03-28":"陽歷節11",
  "04-04":"陽歷節12",
  "04-08":"陽歷節13",
  "04-14":"陽歷節14",
  "04-15":"陽歷節15"
}

默認節日顯示優先級：

calendar.vue

<!-- 先展示陰歷節日 -->
<div class="text" v-if="child.eventName!=undefined" :class="{'isGregorianFestival':child.eventName!=undefined}">{{child.eventName}}</div>
<!-- 再展示陽歷節日 -->
<div class="text" v-else-if="child.yangeventName!=undefined" :class="{'isLunarFestival':child.yangeventName,'isGregorianFestival':child.isGregorianFestival}">{{child.yangeventName}}</div>
<!-- 再展示默認節日 -->
<div class="text" v-else-if="child.lunar!=undefined" :class="{'isLunarFestival':child.isLunarFestival,'isGregorianFestival':child.isGregorianFestival}">{{child.lunar}}</div>
<!-- 再展示陰歷日期 -->
<div class="text" v-else-if="child.lunarValue!=undefined">{{child.lunarValue}}</div>

效果圖：