本文主要是介绍ele-calendar 日历插件使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
安装：
npm install ele-calendar
例子：
<template><div style="width:500px; margin:50px auto"><ele-calendar:render-content="renderContent":data="datedef":prop="prop":currentmonth="true":disabledDate="disabledDate"@pick="clickpick"@date-change="datechange"><template slot-scope="slotProps">{{ slotProps.todo.yearLabel + slotProps.todo.month}}</template></ele-calendar></div></template><script>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css' //引入cssexport default {data(){return{dialogVisible: true ,datedef:[{"date":"2020-10-30","content":"占用"},{"date":"2020-10-26","content":"占用"},],prop:'date' //对应日期字段名}},components: {eleCalendar},methods: {clickpick(value,event,row,celltd){var d = new Date(value)const month = d.getMonth() + 1const day = d.getDate()let smonth = monthif(month<10)smonth = '0'+monthlet sday = dayif(sday<10)sday = '0'+dayvar date = d.getFullYear() + '-' + smonth + '-' + sdayconsole.log(date)},disabledDate(val){var d = new Date(val)const month = d.getMonth() + 1const day = d.getDate()let smonth = monthif(month<10)smonth = '0'+monthlet sday = dayif(sday<10)sday = '0'+dayvar date = d.getFullYear() + '-' + smonth + '-' + sdayreturn this.datedef.some((v=> {if (v.date === date) {return true}}))},renderContent(h,parmas) {const loop = data =>{// console.log(JSON.stringify(data.defvalue.value))return (data.defvalue.value ? (<div><div>{data.defvalue.text}</div><span >{data.defvalue.value.content}</span></div>) : <div>{data.defvalue.text}</div>)}return (<div style="min-height:60px;">{loop(parmas)}</div>);},datechange(val){/* this.datedef=[{"date":"2020-10-30","content":"555"},{"date":"2020-10-26","content":"666"},]*/}}
}
</script>
这篇关于ele-calendar 日历插件使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
