vue实现日历备忘录功能
(编辑：jimmy 日期: 2024/11/28 浏览：3 次 )
用vue写了个日历备忘录的功能，省略了备忘录的增删改查功能。
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>备忘录</title>
<style type="text/css">
#box{
width: 469px;
}
/*日历*/
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#calendar{
width:380px;
margin: 40px auto 0;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.pickDay{
margin: 0 auto;
width: 100px;
height: 65px;
text-align: center;
}
.pickDay span{
font-size: 12px;
color: #989898;
}
.pickDay span:first-of-type{
font-size: 72px;
color: #789AF7;
}
.month {
width: 100%;
}
.month ul {
margin: 29px 0 25px;
display: flex;
justify-content: center;
}
.year-month {
width: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.choose-year {
font-size: 14px;
color: #989898;
}
.choose-month {
text-align: center;
color: #989898;
font-size: 14px;
}
.arrow {
width: 28px;
height: 28px;
text-align: center;
}
.arrow:hover {
background: rgba(100, 2, 12, 0.1);
cursor: pointer;
}
.month ul li {
color: #789AF7;
font-size: 20px;
}
.weekdays {
width: 270px;
margin: 0 auto 7.5px;
display: flex;
flex-wrap: wrap;
color: #808080;
justify-content: space-around;
}
.weekdays li {
display: inline-block;
font-size: 16px;
color: #808080;
width: 26px;
text-align: center;
}
.days {
width: 270px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background: #FFFFFF;
}
.days li {
position: relative;
display: inline-block;
width: 14.2%;
text-align: center;
padding-bottom: 7.5px;
padding-top: 7.5px;
color: #999;
cursor: pointer;
}
.days .momo_mark{
position: absolute;
right: 0;
top: 10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #7699F8;
}
.days li span{
font-size: 16px;
}
.days li .active {
color: #789AF7;
}
.days li .other-month {
padding: 5px;
color: #E6E6E6;
}
.days li:hover{
color: #789AF7;
}
.days li:hover .other-month{
color: #789AF7;
}
/*备忘录*/
#memo{
width: 400px;
margin: 30px 0 0 20px;
}
#memo h4{
text-indent: 20px;
height: 20px;
line-height: 20px;
font-size: 14px;
color: #7699F8;
}
.memo_list li{
margin-top: 12px;
}
.memo_list .memo_list_s{
width: 399px;
}
.memo_list .memo_list_s:hover{
background: #EEE;
}
.memo_list .memo_list_s:hover .circle{
background: #F84848;
}
.memo_list .memo_list_s:hover #edit_memo{
background: url(../assets/edit_active.png) no-repeat;
}
.memo_list .memo_list_s:hover #del_memo{
background: url(../assets/del_active.png) no-repeat;
}
.circle{
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #7699F8;
vertical-align: top;
margin: 12px 5px 0px 9px;
}
.memo_list_mont{
display: inline-block;
width: 323px;
min-height: 30px;
line-height: 30px;
font-size: 14px;
color: #666666;
}
.memo_operate{
display: inline-block;
vertical-align: top;
font-size: 0;
padding-top: 9px;
}
.memo_operate button{
width: 12px;
height: 12px;
margin-right: 10px;
background: #fff;
border: none;
}
#addMemo{
width: 96px;
height: 28px;
line-height: 28px;
color: #789BF8;
background: #fff;
border: 1px solid #789BF8;
border-radius: 2px;
margin: 25px 0 0 20px;
}
.memo_cont{
width: 310px;
background: #7699F8;
border-radius: 2px;
margin-left: 20px;
margin-top: 15px;
padding: 37px 30px 24px 30px;
}
.memo_edit{
width: 100%;
min-height: 140px;
line-height: 28px;
color: #fff;
font-size: 14px;
background: url(../assets/bgborder.png) repeat-y;
outline: none;
border: none;
resize:none;
}
.edit_operate{
padding-top: 20px;
display: flex;
justify-content: flex-end;
}
.edit_operate button{
width: 20px;
height: 20px;
margin-left: 16px;
}
#cancel_edit{
background: url(../assets/error.png) center center no-repeat;
}
#save_edit{
background: url(../assets/right.png) center center no-repeat;
}
/*动画*/
.fade-enter-active, .fade-leave-active {
transition: all 0.5s ease-in;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style>
</head>
<body>
<div id="box">
<div id="calendar" v-if="pickDay != null">
<div class="pickDay">
<span>{{pickDay}}</span><span>日</span>
</div>
<!-- 年份 月份 -->
<div class="month">
<ul>
<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
<li class="year-month" @click="pickYear(currentYear,currentMonth)">
<span class="choose-year">{{ currentYear }}</span>
<span class="choose-month"> - {{ currentMonth }}</span>
</li>
<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
</ul>
</div>
<!-- 星期 -->
<ul class="weekdays">
<li>MO</li>
<li>TU</li>
<li>WE</li>
<li>TH</li>
<li>FR</li>
<li style="color:red">SA</li>
<li style="color:red">SU</li>
</ul>
<!-- 日期 -->
<ul class="days">
<li @click="pick(day.day)" v-for="day in days">
<!--本月-->
<span class="momo_mark" v-if="day.memo_type"></span>
<span v-if="day.day.getMonth()+1 != currentMonth" class="other-month">{{ day.day.getDate() }}</span>
<span v-else>
<!--今天-->
<span v-if="day.day.getFullYear() == new Date().getFullYear() && day.day.getMonth() == new Date().getMonth() && day.day.getDate() == new Date().getDate()" class="active">{{ day.day.getDate() }}</span>
<span v-else>{{ day.day.getDate() }}</span>
</span>
</li>
</ul>
</div>
<div id="memo">
<h4>备忘录</h4>
<ul class="memo_list" v-if="currentMemo">
<li v-for="(memo,index) in currentMemo" :key="index">
<div class="memo_list_s">
<span class="circle"></span>
<div class="memo_list_mont">{{memo.cont}}</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="/UploadFiles/2021-04-02/vue.js">
欢迎大家提意见，提BUG
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：ES6 Array常用扩展的应用实例分析