这篇文章主要介绍了element日历calendar组件上月、今天、下月、日历块点击事件及模板源码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
辰小白小白最近在写日历模板，项目已经用了element组件，奈何element日历组件官方文档提供的资料实在太少了。所以这里希望有相关开发需要的朋友能够少走一些辰小白踩过的坑。
首先展示一些模板效果图：
这个项目的详细介绍可以下辰小白的这篇文章：后端开发的福音，vue+element实现的vue-element-admin前台框架，开箱即用
下面是日历模板首页源码
<div> <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--> <div class="div-Calendar"> <p> {{ data.day.split('-').slice(1).join('-') }} <i></i><i>0" class="el-icon-s-claim"></i><!-- <i class="el-icon-coffee-cup"></i> --></p></div> <div class="el-calendar__header"> <div class="el-calendar__title">排班详情</div><div class="el-calendar__button-group"> <div class="el-button-group"> <button type="button" class="el-button el-button--plain el-button--mini"> <span>新增</span></button></div></div></div><div class="calendar-info"> <div style="padding: 15px"> <div role="alert" class="el-alert el-alert--success is-dark"> <i class="el-alert__icon el-icon-success is-big"></i><div class="el-alert__content"> <span class="el-alert__title is-bold">2020-06-19 9:00~11:00</span><p class="el-alert__description">值班人员：张三、李四、王五</p><p class="el-alert__description">携带设备：123547、985431、745481</p><i class="el-alert__closebtn el-icon-close"></i></div></div><div role="alert" class="el-alert el-alert--info is-dark"> <i class="el-alert__icon el-icon-info is-big"></i><div class="el-alert__content"> <span class="el-alert__title is-bold">2020-06-19 9:00~11:00（待审核）</span><p class="el-alert__description">值班人员：张三、李四、王五</p><p class="el-alert__description">携带设备：123547、985431、745481</p><i class="el-alert__closebtn el-icon-close"></i></div></div><div role="alert" class="el-alert el-alert--warning is-dark"> <i class="el-alert__icon el-icon-warning is-big"></i><div class="el-alert__content"> <span class="el-alert__title is-bold">警告提示的文案</span><p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p><i class="el-alert__closebtn el-icon-close"></i></div></div><div role="alert" class="el-alert el-alert--error is-dark"> <i class="el-alert__icon el-icon-error is-big"></i><div class="el-alert__content"> <span class="el-alert__title is-bold">错误提示的文案</span><p class="el-alert__description">文字说明文字说明文字说明文字说明文字说明文字说明</p><i class="el-alert__closebtn el-icon-close"></i></div></div></div></div></div> .is-selected { color: #1989fa; } .p-popover { text-align: center; } ._calendar { height: 99.5%; width: 100%; } .el-main { padding: 0px; overflow: hidden; } .calendar-info { height: 94%; overflow: auto; } .el-alert { margin: 15px 0px; } .el-alert:hover { transform: scale(1.02); } .el-alert:active { transform: scale(1.01); } ._calendar .div-Calendar { height: 125px; box-sizing: border-box; padding: 8px; } ._calendar .el-calendar-table .el-calendar-day { padding: 0px; height: 125px; } ._calendar .el-container, ._calendar .el-ca<span>本文来源gaodai#ma#com搞*代#码9网#</span>lendar { height: 100%; } ._calendar .el-card__body { padding: 0px; }
具体的几个点击事件都有备注，这里不细说了
到此这篇关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码的文章就介绍到这了,更多相关element calendar组件内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网！
以上就是element日历calendar组件上月、今天、下月、日历块点击事件及模板源码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
转载请注明原文链接：element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
