本地网站建设教程,dw做网站链接数据库,内部网站建设的步骤过程,江岸区建设局网站自定义日历
工作需要#xff0c;但现有框架封装的日历无法满足需求#xff0c;又找不到更好的插件#xff0c;所以准备自己封装一个。
效果图和说明 一个很简易版的demo日历#xff0c;本文只提供最基本的功能代码#xff0c;便于阅读二开。
新建calendar.vue文件
但现有框架封装的日历无法满足需求又找不到更好的插件所以准备自己封装一个。
效果图和说明 一个很简易版的demo日历本文只提供最基本的功能代码便于阅读二开。
新建calendar.vue文件
template
div classcalendar!-- 年月 --div classheaddivspan clicksetYear(false)lt;lt;/spanspan stylemargin-left: 17px; clicksetMonth(false)lt; /span/divdiv {{date.year}} 年 {{date.month}} 月/divdivspan stylemargin-right: 17px; clicksetMonth(true)gt; /spanspan clicksetYear(true)gt;gt;/span/div/div!-- 星期 --div classweeksulli v-for(item,index) of weeks :keyindex{{item}}/li/ul/div!-- 日 --div classdaysulli v-for(item,index) of days :keyindex :class{ash:item.cls}{{item.val}}/li/ul/div
/div
/templatescript
export default {data(){return{date:{year:,month:},weeks:[日, 一, 二, 三, 四, 五, 六],days:[],}},methods:{// 获取年、月getDate(){let date new Date()this.date.year date.getFullYear()this.date.month date.getMonth()1this.getViewDays()},// 获取界面中显示的天getViewDays(){let oneDayWeek new Date(${this.date.year}-${this.date.month}-01).getDay()let lastMonth this.date.month-1 0 ? this.date.month-1 : 12// 获取上月天数let lastMonthDays this.getDays(lastMonth)this.days []// 补齐上月天数for(let i0; ioneDayWeek; i){this.days.push({val: lastMonthDays - oneDayWeek i 1,cls:true})}let thisMonthDays this.getDays(this.date.month)// 放入这月天数for(let i1; ithisMonthDays; i){this.days.push({val: i})}// 下月天数补齐let nextMonthDay 42-this.days.lengthfor(let i1; inextMonthDay; i){this.days.push({val: i,cls:true})}}, // 年份更改setYear(state){if(state){this.date.year}else{this.date.year--}this.getViewDays()},// 月份更改setMonth(state){if(state){if(this.date.month 12){this.date.yearthis.date.month 1}else{this.date.month}}else{if(this.date.month 1){this.date.year--this.date.month 12}else{this.date.month--}}this.getViewDays()}, // 获取一个月有多少天getDays(month){if([1,3,5,7,8,10,12].indexOf(month) ! -1){return 31}else if([4,6,9,11].indexOf(month) ! -1){return 30}else{if((this.date.year % 4 0 this.date.year % 100 ! 0) || this.date.year % 400 0){return 29}else{return 28}}}},mounted(){this.getDate()}
}
/scriptstyle langscss scoped
.calendar{width: 380px;box-shadow: 0px 0px 3px #ccc;margin: 0 auto;margin-top: 30px;border-radius: 5px;padding: 15px 25px;.head{display: flex;justify-content: space-between;span{cursor: pointer;}}.weeks ul{display: flex;justify-content: space-around;border-bottom: 1px solid #ccc;padding: 10px 0;font-size: 13px;margin-top: 20px;}.days ul{display: flex;flex-wrap: wrap;justify-content: space-between;li{width: 54px;height: 40px;line-height: 40px;text-align: center;}.ash{color: #ccc;}}
}
/style最后保存运行即可。
