手机版

Vue编写可显示周和月模式的日历某视频剪辑软件自定义日历内容的显示

时间:2021-08-22 来源:互联网 编辑:宝哥软件园 浏览:

之前写了一篇周和月日历,但感觉体验不是太好,所以有重新做了一遍,加上了动画。还可以自定义显示日历里的内容。

现在贴出项目源码,我现在是放在程序员里的下载资源,这里哦

现在我上传带了开源代码库上了,可以去这里下载哦,如果觉得好的话希望能给个明星,谢谢支持

1.总共分为两个组件(父组件calendar.vue)

模板' div class='日历-框ul类='日历-标题里一/莉莉二/莉莉三/莉莉四/莉莉五/莉莉六/莉莉日/Li/ul日历内容ref=' calendar _ swiper ' : check date=' current _ day ' @ on-change=' change index ' div-for=' monthList ' : key=' index ' class=' month swiper-item ' ul v-for=' month ' : key=' weekindex ' Li v-for=' day,day index ' in week ' @ click='选择日(日,年.display : block ' I class=' day ' { day。天} }/我我{ {天。农力。old _ str } }/I/span div class=' things ' a : style=' { color : things。一天中的事情。事物“{事物。标题} }/a/div/div/Li/ul/div/日历内容/div/模板脚本从导入日历内容'./test _ canlen/swiper-monthorweek。vue "从导入格式"./test _ canlen/format ' export default { data(){ return { disp _ Date : new Date()、today:new Date()、current_day:new Date()、monthList:[]、checkedDay:'0000-00-00 ',can _ click:true、}、created(){ this.get3month() }、methods:{ chooseDay(年、月、日、其他月、模式){/为了个人电脑端点击事件和移动冲突if(!this.can_click)返回this.current_day=新日期(年、月、日)this.checkedDay=this.format(年、月、日)如果(其他月份模式==' month '){ var _ tmpdt=new Date(这。显示日期。getfullyear(),这个。显示日期。get month()-其他月份,0)var max day=_ tmpdt。getdate()var _ day=maxday day?maxday :这一天。disp _ Date=新日期(年,月-另一个月,这一天。更改索引(其他月份,false,true)} else if(其他月份模式==' week '){ this。disp _ Date=这个。current _ day }其他{ this

版权声明:Vue编写可显示周和月模式的日历某视频剪辑软件自定义日历内容的显示是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。