練手：一個基於Vue的上下滑動翻月日曆元件

叄木發表於2018-11-25
Vue元件

v-calendar-slider

介紹

一個基於Vue，上下滑動切換月份日程管理元件

DEMO

練手：一個基於Vue的上下滑動翻月日曆元件

安裝

npm install --save v-calendar-slider
複製程式碼

使用

import calendarSlider from 'v-calendar-slider'

Vue.use(calendarSlider)

<calendar-slider :events="events" @monthChanged="monthChangedHandle" @dateClick="dateClickHandle"></calendar-slider>
複製程式碼

Props

prop 必選 型別 說明
events false Array[Object] 事務列表
defaultActiveMonth false String 預設月份（YYYY-MM）

prop: events 格式

[
    {
        date: '2018-12-22',
        number: 2
    },
    {
        date: '2018-12-26',
        number: 2
    }
]
複製程式碼

events

名稱 說明 回撥引數
dateClick 點選日期觸發時間 點選的日期（YYYY-MM-DD）
monthChanged slider切換後回撥 切換後當前月份 （YYYY-MM）

程式碼地址

GitHub

相關文章