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怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！