快活林资源网 Design By www.csstdc.com
辰小白小白最近在写日历模板,项目已经用了element组件,奈何element日历组件官方文档提供的资料实在太少了。所以这里希望有相关开发需要的朋友能够少走一些辰小白踩过的坑。
首先展示一些模板效果图:
这个项目的详细介绍可以下辰小白的这篇文章:后端开发的福音,vue+element实现的vue-element-admin前台框架,开箱即用
下面是日历模板首页源码
<template> <div> <el-card class="_calendar"> <el-container> <el-main> <el-card> <el-calendar v-model="value" :first-day-of-week="7"> <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法--> <template slot="dateCell" slot-scope="{date, data}"> <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)"> <p :class="data.isSelected "> {{ data.day.split('-').slice(1).join('-') }} <i :class="[data.isSelected " ></i> <i v-if="_.indexOf(isArrange, data.day)>0" class="el-icon-s-claim"></i> <!-- <i class="el-icon-coffee-cup"></i> --> </p> </div> </template> </el-calendar> </el-card> </el-main> <el-aside width="40%" style="overflow: hidden;"> <el-card> <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" @click="saveOnClick" > <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" @click="infoOnClick"> <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" @click.stop="infoDel"></i> </div> </div> <div role="alert" class="el-alert el-alert--info is-dark" @click="infoOnClick"> <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" @click="infoOnClick"> <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" @click="infoOnClick"> <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> </el-card> </el-aside> </el-container> </el-card> <calendarDrawer ref="calendarDrawer"></calendarDrawer> <calendarForm ref="calendarForm"></calendarForm> </div> </template> <script> import calendarDrawer from "./calendar-drawer.vue"; import calendarForm from "./calendar-form.vue"; export default { components: { calendarDrawer, calendarForm }, data: function() { return { value: new Date(), isArrange: [ "2020-06-08", "2020-06-09", "2020-06-10", "2020-06-11", "2020-06-17", "2020-06-18" ] }; }, created: function() { this.$nextTick(() => { // 点击前一个月 let prevBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:nth-child(1)" ); prevBtn.addEventListener("click", e => { console.log(this.data); this.$notify({ title: "上一月", message: "上个月头天:" + this.value, type: "success", position: "top-left" }); }); //点击下一个月 let nextBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:nth-child(3)" ); nextBtn.addEventListener("click", () => { console.log(this.value); this.$notify({ title: "下一月", message: "下个月头天:" + this.value, type: "warning", position: "top-left" }); }); //点击今天 let todayBtn = document.querySelector( ".el-calendar__button-group .el-button-group>button:nth-child(2)" ); todayBtn.addEventListener("click", () => { this.$notify.info({ title: "今天", message: "今天:" + this.value, position: "top-left" }); }); }); }, mounted: function() {}, methods: { //点击日期块 calendarOnClick(e) { console.log(e); // this.isArrange.push("2020-06-19"); this.$notify.error({ title: "日历块点击", message: e, position: "top-left" }); }, //点击信息块 infoOnClick() { this.$refs.calendarDrawer.drawer = true; }, //新增排班 saveOnClick() { this.$refs.calendarForm.dialogFormVisible = true; }, //删除排班 infoDel() { this.$confirm("此操作将永久删除该排班, 是否继续", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.$message({ type: "success", message: "删除成功!" }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); } } }; </script> <style scoped> .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); } </style> <style > ._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-calendar { height: 100%; } ._calendar .el-card__body { padding: 0px; } </style>
具体的几个点击事件都有备注,这里不细说了
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]