本篇内容介绍了“vue怎么实现周日历切换效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
效果如下：
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>周日历</title> <!-- 引入组件样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" ></head><body> <div id="app"> <!-- 上面的日历 --> <div class="calendar"> <div class="arrow"> <i class="el-icon-arrow-left" @click="arrow('left')"></i> <i class="el-icon-arrow-right" @click="arrow('right')"></i> </div> <el-calendar v-model="value" :range="dateRange"></el-calendar> </div> <!-- 下面的日历 --> <div class="date"> <div class="arrow0"> <i class="el-icon-arrow-left" @click="weekPre"></i> <i class="el-icon-arrow-right" @click="weekNext"></i> </div> <!-- 年份 月份 --> <div class="month"> <p>{{ currentYear }}年{{ currentMonth }}月</p> </div> <!-- 星期 --> <ul class="weekdays"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> <li>日</li> </ul> <!-- 日期 --> <ul class="days"> <li @click="pick(day)" v-for="(day, index) in days" :key="index"> <!--本月--> <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span> <span v-else> <!--今天--> <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span> <span v-else>{{ day.getDate() }}</span> </span> </li> </ul> </div> </div></body><!-- 引入vue --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script> new Vue({ el: '#app', data: function() { return { // 上 value: "", endDate: "", dateRange: [], dateNum: 0, // 下 currentYear: "", // 年份 currentMonth: "", // 月份 currentDay: "", // 日期 currentWeek: "", // 星期 days: [], } }, mounted () { }, created () { // 上面的日历 this.dateList(this.dateNum); console.log(this.dateRange); // 下面的日历 this.initData(); }, methods: { // 上面的日历 // 获取当前时间的周一 getMonday(date) { var day = date.getDay(); var deltaDay; if (day == 0) { deltaDay = 6; } else { deltaDay = day - 1; } var monday = new Date(date.getTime() - deltaDay * 24 * 60 * 60 * 1000); monday.setHours(0); monday.setMinutes(0); monday.setSeconds(0); return monday; //返回选定时间的周一的0时0分0秒 }, getDateNew(time) { console.log(time); let times = new Date(time); let year = times.getFullYear(); let month = times.getMonth() + 1 < 10 ? "0" + (times.getMonth() * 1 + 1) : times.getMonth() * 1 + 1; let day = times.getDate() < 10 ? "0" + times.getDate() * 1 : times.getDate() * 1; return year + "-" + month + "-" + day; }, dateList(delta) { //将时间对象转换为时间戳并加几天后转换为时间对象 var DateNews = this.getMonday( new Date((new Date().getTime() / 1000 + 86400 * 7 * delta) * 1000) ); let startDate = this.getDateNew(DateNews, delta); this.endDate = this.getDateNew( new Date((DateNews.getTime() / 1000 + 6 * 86400) * 1000) ); this.dateRange = [startDate, this.endDate]; }, arrow(arrow) { if (arrow == "left") { this.dateNum--; this.dateList(this.dateNum); } else if (arrow == "right") { this.dateNum++; this.dateList(this.dateNum); } }, // 下面的日历 formatDate (year, month, day) { const y = year let m = month if (m < 10) m = `0${m}` let d = day if (d < 10) d = `0${d}` return `${y}-${m}-${d}` }, initData (cur) { let date = '' if (cur) { date = new Date(cur) } else { date = new Date() } this.currentDay = date.getDate() // 今日日期 几号 this.currentYear = date.getFullYear() // 当前年份 this.currentMonth = date.getMonth() + 1 // 当前月份 this.currentWeek = date.getDay() // 1...6,0 // 星期几 if (this.currentWeek === 0) { this.currentWeek = 7 } const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日 this.days.length = 0 // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek for (let i = this.currentWeek - 1; i >= 0; i -= 1) { const d = new Date(str) d.setDate(d.getDate() - i) // console.log(y:" + d.getDate()) this.days.push(d) } for (let i = 1; i <= 7 - this.currentWeek; i += 1) { const d = new Date(str) d.setDate(d.getDate() + i) this.days.push(d) } }, // 上个星期 weekPre () { const d = this.days[0] // 如果当期日期是7号或者小于7号 d.setDate(d.getDate() - 7) this.initData(d) }, // 下个星期 weekNext () { const d = this.days[6] // 如果当期日期是7号或者小于7号 d.setDate(d.getDate() + 7) this.initData(d) }, // 上一個月 传入当前年份和月份 pickPre (year, month) { const d = new Date(this.formatDate(year, month, 1)) d.setDate(0) this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)) }, // 下一個月 传入当前年份和月份 pickNext (year, month) { const d = new Date(this.formatDate(year, month, 1)) d.setDate(35) this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)) }, // 当前选择日期 pick (date) { alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())) }, },}) </script><style lang="scss"> #app { width: 40%; margin: auto; } ul { padding: 0; } li { list-style-type: none; } .calendar { position: relative; width: 100%; background: #fff; margin-top: 20px; margin-left: 20px; } .el-calendar__header { display: block; } .el-calendar-table .el-calendar-day { height: auto; text-align: center; } .el-calendar-table td.is-selected { background-color: #24b18d; color: #fff; } .el-calendar-table .el-calendar-day:hover { background-color: #24b18d; color: #fff; } .el-calendar-table { border-bottom: 1px solid #e4e4e4; padding-bottom: 15px; } .el-calendar-table .next { color: rgb(143, 143, 143); } .el-calendar__title,.el-calendar__button-group { text-align: center; } .arrow { width: 100%; max-height: 46px; position: absolute; top: 15px; text-align: center; } .arrow i { font-size: 20px; cursor: pointer; } .arrow i:nth-child(1) { margin-right: 10%; text-align: left; } .arrow i:nth-child(2) { margin-left: 10%; text-align: right; } .date { position: relative; margin-top: 20px; padding: 10px 20px; background-color: #D3D3D3; } .arrow0 { width: 100%; max-height: 46px; position: absolute; top: 27px; left: 0px; text-align: center; } .arrow0 i { font-size: 20px; cursor: pointer; } .arrow0 i:nth-child(1) { margin-right: 10%; text-align: left; } .arrow0 i:nth-child(2) { margin-left: 10%; text-align: right; } .month { text-align: center; } .weekdays { display: flex; } .weekdays li { flex: 1; text-align: center; } .days { display: flex; } .days li { flex: 1; text-align: center; cursor: pointer; } .days li span { display: inline-block; width: 22px; height: 22px; } .days li span:hover { color: #fff; background-color: #409EFF; border-radius: 50%; } .active { display: inline-block; color: #fff; border-radius: 50%; background-color: #fa6854!important; } .other-month { color: #e4393c; } </style></html>“vue怎么实现周日历切换效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
