您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

适配mpvue平台的的微信小程序日历组件mpvue-calendar

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-06-28 15:30热度:

基于 vue-calendar 的适配 mpvue 平台的的微信小程序日历组件

预览

安装


npm i mpvue-calendar

使用

  • import Calendar from 'mpvue-calendar' 引入组件
  • components 中注册组件 Calendar
  • template 中使用组件 <Calendar />

参数及方法

示例


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