mpvue calendar怎么使用

本篇內容介紹了“mpvue calendar怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

基于 vue-calendar 的適配 mpvue 平臺的的微信小程序日歷組件

安裝

npm i mpvue-calendar

使用

• import Calendar from 'mpvue-calendar' 引入組件

• components 中注冊組件 Calendar

• template 中使用組件 <Calendar />

參數及方法

• value 參數 在普通模式下value為一維數組如2018年6月21為 [2018,6,21] 在range和multi模式下value為二維數組，如range模式選中2018年6月21到6月28為 [[2018,6,21], [2018,6,28]]

• events 參數 events為自定義備注，例如備注2018年6月21日為 {'2018-6-21': '今日備注', '2018-6-22':'明日備注'} ，在 clean 模式下備注為圓點， lunar 農歷模式下不顯示備注

• disabled 參數 disabled為禁用日期，如禁用2018-6-21日為 ['2018-6-21']

示例

<template>
  <div><Calendar
      :months="months"
      :value="value"
      @next="next"
      @prev="prev"
      :events="events"
      lunar
      clean
      @select="select"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
    /><button @click="setToday">返回今日</button>
  </div>
</template>

<script>
import Calendar from 'mpvue-calendar'

export default {
  data () {
    return {
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      disabledarr: ['2018-6-27','2018-6-25'],
      value: [2018,6,7],
      begin:[2016,1,1],
      end:[2020,1,1],
      events: {'2018-6-7':'今日備注', '2018-6-8':'一條很長的明日備注'},
    }
  },
  components: {
    Calendar
  },
  methods: {
    selectMonth(month,year){
      console.log(year,month)
    },
    prev(month){
      console.log(month)
    },
    next(month){
      console.log(month)
    },
    selectYear(year){
      console.log(year)
    },
    setToday(val,val1,val2) {
      this.$refs.calendar.setToday();
    },
    select(val, val2) {
      console.log(val)
      console.log(val2)
    }
  }
}
</script>

“mpvue calendar怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！