本篇内容介绍了“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怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。