Bootstrap

vue学习之关于element日历calendar组件中上月,今天,下月的显示

今天学习写日历的模板,不过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
;