今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习。
显示效果图:
本月:
上月:
下月:
下方是源码
<template>
<div>
<el-calendar v-model="value" id="calendar">
<!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<!--自定义内容-->
<div>
<div class="calendar-day">{
{ data.day.split('-').slice(2).join('-') }}</div>
<div v-for="item in calendarData">
<div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
<div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
<el-tooltip class