这篇文章主要为大家详细介绍了vue+elementUI实现简单日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+elementUI简单的实现日历功能，供大家参考，具体内容如下
<div class="calender2"> <div class="date-headers"> <div class="date-header"> <div><i class="el-icon-arrow-left"></i>上一月</div><div>{{ year }}年{{ month }}月{{ day }}日</div><div>下一月<i class="el-icon-arrow-right"></i></div><div></div></div></div><div class="date-content"> <div class="week-header"> <div>{{ item }} </div></div><div class="week-day"> <div class="every-day"> <div> 0 && item - beginDay {{ item - beginDay }}</div><div class="other<a style="color:transparent">本文来源gao($daima.com搞@代@#码(网5</a>-day" v-else-if="item - beginDay {{ item - beginDay + prevDays }}</div><div class="other-day">{{ item - beginDay -curDays }}</div></div></div></div></div>
## javascript
* { 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); }
完成后的效果
以上就是vue+elementUI实现简单日历功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue+elementUI实现简单日历功能
转载请注明原文链接：vue+elementUI实现简单日历功能
