mpvue calendar怎么使用
本文主要介绍"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如何使用" 就介绍到这。希望大家多多支持编程宝库。
mpvue开发小程序遇到的问题有哪些及怎么解决:本文主要介绍"mpvue开发小程序遇到的问题有哪些及如何解决",希望能够解决您遇到有关问题,下面我们一起来看这篇 "mpvue开发小程序遇到的问题有哪些及如何解决" 文章。 ...