豆瓣中需要优化的网站标签,找设计网站公司,替 wordpress后台登陆页面模板,辽宁沈阳又发现一例吗今天el-calendar日历组件完整代码 1. 说在前面2. 日历整体代码3. 编辑与新增 1. 说在前面
最近一直忙于上班#xff0c;没咋看博客#xff0c;发现很多小伙伴都要日历组件的代码#xff0c;于是今天抽空给大家整理一下#xff0c;为爱发电#xff01;日历组件的原文在这里没咋看博客发现很多小伙伴都要日历组件的代码于是今天抽空给大家整理一下为爱发电日历组件的原文在这里建议先看这个哈日历组件使用总结需求说明和注意事项都在上文了这篇文章纯代码。由于此页面很复杂为了让大家减轻看代码的负担去掉了很多没用的逻辑。data()里面的数据和css就没一个个搞了大家看着来。一年多前写的还是Vue2的语法。
2. 日历整体代码 el-dialogtitle新增日计划:visible.syncdialogVisiblewidth80%:close-on-click-modalfalse:close-on-press-escapefalse:before-closehandleClosedivel-form :inlinetrue :modelformInline classdemo-form-inlineel-form-item labelel-form-item label月份el-date-pickerv-modelformInline.monthtypemonthplacementbottom-startvalue-formatyyyy-MMformatyyyy-MMplaceholder选择月clearablechangemonthChange/el-date-picker/el-form-item/el-form-itemel-form-item labelel-selectv-modelformInline.projectIdclearableplaceholder选择项目changeprojectChangeFnel-optionv-for(item, index) in projectArr:keyindex:labelitem.proRemake:valueitem.id/el-option/el-select/el-form-itemel-form-itemel-button typeprimary clickeditDetail()查询/el-button/el-form-item/el-formel-calendar v-modelvalue!-- 这里使用的是 2.5 slot 语法对于新项目请使用 2.6 slot 语法--template slotdateCell slot-scope{ date, data }div classmain-cd clickaddPlan(data)div classcalendar-day{{ data.day.split(-).slice(2).join(-) }}/divdivv-for(item, index) in calendarData:keyindexclassis-selectedclick.stopaddPlan(item)span v-ifitem.day data.day item.timeDetailsListel-tooltip placementtopdiv slotcontentdivv-foritems in item.timeDetailsList:keyitems.day{{ items.channelName }} :{{ items.wechatNumber }}个微信号 计划投放{{items.planNumber}} 实际加人{{ items.realityNumber }}/div/divdiv v-foritems in item.timeDetailsList :keyitems.day{{ items.channelName }} :{{ items.wechatNumber }}个微信号 计划投放{{items.planNumber}} 实际加人{{ items.realityNumber }}/div/el-tooltip/span/div/div/template/el-calendar/divspan slotfooter classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clickdialogVisible false确 定/el-button/span/el-dialog实现的效果是这样的 对应的控制方法在这里
// 关闭弹窗handleClose() {this.dialogVisible false;},
// 月份改变下面的数据刷新monthChange(val) {// 这里的数据就是当前月份this.value val;// 去请求不同月份的数据 刷新日历组件this.editDetail();},// 接口请求editDetail(){// 请求接口目的就是刷新日历数据 calendarData this.calendarData res.data;},
3. 编辑与新增
接下来是新增与编辑的逻辑其实就是打开两个不同的弹窗当然逻辑做了删减因为大家肯定是不需要的。 !-- 新增 --el-dialog:titlediaTitlewidth70%:visible.syncdialogFormVisible:close-on-click-modalfalse:close-on-press-escapefalsediv classparent-condiv classleftdiv classtips设置微信号/div/div/divdiv slotfooter classdialog-footer form-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clickconfirmFn保 存/el-buttonel-button typeprimary clickconfirmFn(next) v-ifisAdd保存并创建下个计划/el-button/div/el-dialog!-- 编辑弹窗 --el-dialogtitle编辑日计划:visible.syncdialogVisibleEditwidth60%:close-on-click-modalfalse:close-on-press-escapefalse:before-closehandleCloseEditdiv classedit-time时间{{ editTime }}/divspan slotfooter classdialog-footerel-button clickdialogVisibleEdit false取 消/el-buttonel-button typeprimary clickconfirmEditFn确 定/el-button/span/el-dialog打开编辑与新增是共用一个方法
addPlan(item) {// 此方法是用来清空数据的防止数据重复this.clearDataForm();// 编辑才有这个参数if (item item.projectId) {this.diaTitle 编辑日计划;this.dialogVisibleEdit true; // 打开编辑// 调用接口 做数据回显}else {// 此处做新增逻辑this.diaTitle 新增日计划;this.dialogFormVisible true; // 打开新增}
}其他逻辑实现 // 监听日历的当前值watch: {value(val, oldVal) {this.nowTime this.newDate(val);let tempIndex this.getIndex();// 匹配某一项数据if (tempIndex -1) {this.inputVal this.calendarData[tempIndex].things;} else {this.inputVal ;}},},// 做对应的处理这是在 methods里面的 时间转换newDate(time) {let date new Date(time);let y date.getFullYear();let m date.getMonth() 1;m m 10 ? 0 m : m;let d date.getDate();d d 10 ? 0 d : d;return y - m - d;},// 用于匹配与当前日期相符的数据 getIndex() {let tempIndex this.calendarData.findIndex((item) item.date this.nowTime);return tempIndex;},// 初始化时间 在 mounted 里调用的initData() {this.nowTime this.newDate(this.value);},css部分没做删减了大家要的肯定在里面需要找一下
style langscss scoped
.add-bidding {.calendar-day {color: #202535;font-size: 14px;}.is-selected {color: #f8a535;font-size: 12px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}#calendar.el-button-group .el-button:not(:first-child):not(:last-child):after {content: 当月;}.inputVal {width: 300px;}.main-cd {width: 100%;height: 100%;padding: 10px;overflow: hidden;}::v-deep .el-calendar-day {padding: 0;}::v-deep .el-calendar-table:not(.is-range) td.next {display: none;}::v-deep .el-calendar-table:not(.is-range) td.prev {visibility: hidden;}::v-deep .el-calendar__button-group {display: none;}.now-time {font-size: 18px;height: 40px;line-height: 40px;span {color: #409eff;}}.form-footer {text-align: center;}.edit-time {margin-bottom: 20px;font-size: 16px;}.check-staff-box {margin-top: 10px;display: flex;flex-wrap: wrap;.csb-child {margin-right: 20px;}}.parent-con {width: 100%;.tips {width: 100%;border-left: 4px solid #525357;text-indent: 10px;margin-bottom: 20px;font-size: 16px;font-weight: bold;}}.remarke {color: #999999;}.rule-num {margin-top: 10px;}
}
/style1. 希望本文能对大家有所帮助如有错误敬请指出 2. 原创不易还请各位客官动动发财的小手支持一波关注、评论、点赞、收藏 3. 拜谢各位后续将继续奉献优质好文 4. 如果存在疑问可以私信我(主页有Q)
