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

| name | type | desc | default | | ------------------ | -------- | ----------------------------- | ------- | | selected | String | The current selected date | null | | lunar | Boolean | Display lunar | false | | show | Boolean | Display the calendar | true |

Event

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

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