vue+elementUI简单的实现日历功能,供大家参考,具体内容如下
<div class="calender2"> <div class="date-headers"> <div class="date-header"> <div><el-button type="primary" @click="handlePrev"><i class="el-icon-arrow-left"></i>上一月</el-button></div> <div>{{ year }}年{{ month }}月{{ day }}日</div> <div><el-button type="primary" @click="handleNext">下一月<i class="el-icon-arrow-right"></i></el-button></div> <div><el-button type="primary" icon="el-icon-refresh-left" @click="refresh"></el-button></div> </div> </div> <div class="date-content"> <div class="week-header"> <div v-for="item in ['日','一','二','三','四','五','六']" :key=item >{{ item }} </div> </div> <div class="week-day"> <div class="every-day" v-for="item in 42" :key="item" @click="handleClickDay(item - beginDay)" > <div v-if="item - beginDay > 0 && item - beginDay <= curDays" :class="`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}` " >{{ item - beginDay }}</div> <div class="other-day" v-else-if="item - beginDay <= 0">{{ item - beginDay + prevDays }}</div> <div class="other-day" v-else>{{ item - beginDay -curDays }}</div> </div> </div> </div> </div>
## javascript
<script> export default { name: "HelloWorld", data() { return { year: null, month: null, day: null, currentDay: null, currentYearMonthTimes: null,//当前年的月的天数 monthOneDay: null,//一个月中的某一天 curDate: null, prevDays: null,//上一月天数 } }, computed: { curDays() { return new Date(this.year, this.month, 0).getDate(); }, // 设置该月日期起始值(找到一号是在哪里) beginDay() { return new Date(this.year, this.month - 1, 1).getDay(); } }, created() { this.getInitDate(); this.currentYearMonthTimes = this.mGetDate(this.year, this.month); //本月天数 this.prevDays = this.mGetDate(this.year, this.month - 1); this.curDate = `${this.year}-${this.month}-${this.day}` console.log(this.curDate) }, methods: { refresh(){ //强制刷新页面 location. reload() }, handleClickDay(day){ //点击这一天,绑定点击事件 console.log( '形参传进来的',day) console.log( 'data里面的this.day',this.day) console.log( 'data里面的currentYearMonthTimes',this.currentYearMonthTimes) this.day = day if(this.day > this.currentYearMonthTimes){ this.$message.warning('不能选择超出本月的日期'); } console.log(day) }, computedDay() { const allDay = new Date(this.year, this.month, 0).getDate(); if (this.day > allDay) { this.day = allDay; } }, //设置页头显示的年月日 getInitDate() { const date = new Date(); this.year = date.getFullYear(); this.month = date.getUTCMonth() + 1; this.day = date.getDate(); }, // 如果要获取当前月份天数: mGetDate() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var d = new Date(year, month, 0); return d.getDate(); }, handlePrev() { if (this.month == 1) { this.month = 12 this.year-- } else { this.month-- } this.computedDay() }, handleNext() { if (this.month == 12) { this.month = 1 this.year++ } else { this.month++ } this.computedDay() } } } </script>
<style scoped> * { margin: 0px; border: 0px; list-style: none; } .calender2 { border-radius: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 396px; width: 420px; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) } .date-header { height: 60px; width: 422px; display: flex; align-items: center; justify-content: space-around; } .date-headers { height: 60px; width: 422px; display: flex; } .pre-month { position: absolute; display: inline-block; height: 0px; width: 0px; border: 15px solid; border-color: transparent rgb(35, 137, 206) transparent transparent; } .next-month { position: absolute; display: inline-block; height: 0px; width: 0px; border: 15px solid; border-color: transparent transparent transparent rgb(35, 137, 206); } .show-date { margin-left: 40px; margin-top: 0px; display: inline-block; line-height: 30px; text-align: center; width: 310px; color: rgb(35, 137, 206); } .week-header { color: #000000; font-size: 14px; text-align: center; line-height: 30px; } .week-header div { margin: 0; padding: 0; display: inline-block; height: 20px; width: 60px; } .every-day { display: inline-block; height: 50px; width: 60px; text-align: center; line-height: 50px; } .other-day { color: #ccc; } .nowDay { background: rgb(121, 35, 206); border: 1px solid #87c66d; } .active-day { /* padding: 2px */ /* border-sizing:content-box; */ border: 2px solid rgb(35, 137, 206); } </style>
完成后的效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
vue,elementUI,日历
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue+elementUI实现简单日历功能”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
20240901
20240901
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】