點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

前面文章 ，主要時講如何封裝組件，然後通過npm發佈，今天就給大家造個輪子。先看看預覽圖：

VUE開發一個組件——日曆選擇控件

快速應用

# 安裝
npm install vue-c-calendar -S

引入模塊

import cCalendar from 'vue-c-calendar'
Vue.use(cCalendar)

組件參數

labels: {// 頭部顯示的文字部分（出發/到達）
 type: Array,
 required: true
},
isSame: { // 是否可以選擇相同日期（起始日期）
 type: Boolean,
 default: false
},
startDate: String, // 已選擇的開始時間
endDate: String, // 已選擇的結束時間
showAmount: { // 共顯示月份 默認3個月
 type: Number,
 default: 3
},
disableBefore: { // 禁用什麼日期之前的日期（默認今天）
 type: String,
 default: formatDate(TODAY)
},
disableAfter: String, // 禁用什麼日期之後的日期 

start: String, // 什麼月份開始（可以為空）
sameEnable: { // 是否需要判斷禁用日期（可以為true）
 type: Boolean,
 default: true
}

需要源碼的可以點擊最下方“瞭解更多”，源碼預覽：

view

VUE開發一個組件——日曆選擇控件

js

VUE開發一個組件——日曆選擇控件

VUE開發一個組件——日曆選擇控件

公告

閱讀更多 web秀 的文章

關鍵字: 控件 日曆 組件