vue-date-mobile v1.0.3

vue-mobile-calendar

基于 Vue 移动端日历组件 支持上下滑动切换月份功能

How to use

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>

Props

Event

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
      },
  }
}

Slot

作用域插槽会插入到日历每天的单元格中，且可以访问到当天的日期对象

<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'
              }
          }
      }
  }
}