最近项目中需要使用日历,并且是可以展示标注的,因为基于 Element UI,所以多方查找后使用了 ele-calendar 组件,话不多说,直接上代码:
1、全局安装:npm install ele-calendar
2、文件中使用:
<ele-calendar
:render-content="renderContent"
:data="datedef"
:prop="prop"
@pick="datePick">
</ele-calendar>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css'
import _ from 'lodash'
import moment from 'moment'
export default {
data() {
return {
datedef: [
{'date': "2019-08-01", 'content': 'aa', "cid": null},
{'date': "2019-08-15", 'content': 'bb', "cid": null},
],
prop: 'date' //对应日期字段名
}
},
components: {
eleCalendar
},
methods: {
renderContent(h, {defdate, ...parmas}) {
//把时间转成时间戳
var imoment = moment(defdate);
//把时间进行格式化
let geshi = imoment.format('YYYY-MM-DD');
//拿到时间所对应的星期
let week = imoment.day();
//用日期对比数组中的元素,如果存在就返回对象,如果不存在就返回空
let info = _.find(this.datedef, {'date': geshi});
return (
<div style = "min-height:60px;">
{imoment.date()}
<br/>
{info? info.content : ''}
</div>
);
},
datePick(date, event, row, dome) {
let imoment = moment(date);
let iformat = imoment.format("YYYY-MM-DD");
let week = imoment.day();
// 在数组里面查找是否有点击的那一项
let info = _.find(this.datedef, {'date': iformat});
// info如果存在,就在数组中找到,并且修改属性,如果不存在,在数组加入点击日期对应的对象
this.datedef =info?_.map(this.datedef,iobject=>info==iobject?{...iobject,'content':iobject.content=='休息'?'上 班':'休息'}:iobject):[...this.datedef,{'date':iformat,'content':'上班'}];
}
}
}
经测试可以正常运行,如出错请评论联系我,不足之处,多多指教!!