基于 Vue 移动端日历组件 支持上下滑动切换月份功能
npm i -S vue-date-mobile
global regisiter
import Vue from 'vue'
import VueMobileCalendar from 'vue-date-mobile'
Vue.use(VueMobileCalendar)
OR in component
import VueMobileCalendar from 'vue-date-mobile'
// in vue component
export default {
components: { VueMobileCalendar }
}
<vue-mobile-calendar></vue-mobile-calendar>
name | type | desc | default |
---|---|---|---|
selected | String | The current selected date | null |
lunar | Boolean | Display lunar | false |
show | Boolean | Display the calendar | true |
name | params | desc |
---|---|---|
@change | Select date object | The day which user clicked |
@move | Date object | The first day in changed month |
Event e.g.
<vue-mobile-calendar @move="changeMonth" @change="selectDay" :lunar="true"></vue-mobile-calendar>
export default {
components: { VueMobileCalendar },
methods: {
selectDay (date) {
console.log(date.dateStr); // yyyy-mm-dd eg:2018-12-18
console.log(date.showInLunar); // 十二
},
changeMonth (date) {
console.log(date) // Date Object
},
}
}
作用域插槽会插入到日历每天的单元格中,且可以访问到当天的日期对象
<vue-mobile-calendar>
<div slot-scope="{date}" class="price">{{prices[date.dateStr].price}}</div>
</vue-mobile-calendar>
export default {
components: { VueMobileCalendar },
data () {
return {
prices: {
'2018-12-18': {
price: '$222'
}
}
}
}
}