vue日历/日程提醒/html5本地缓存功能-创新互联

先上图

成都创新互联公司致力于互联网网站建设与网站营销，提供成都网站设计、做网站、成都外贸网站建设公司、网站开发、seo优化、网站排名、互联网营销、小程序开发、公众号商城、等建站开发，成都创新互联公司网站建设策划专家，为不同类型的客户提供良好的互联网应用定制解决方案，帮助客户在新的全球化互联网环境中保持优势。

功能：

1、上拉日历折叠，展示周

2、左右滑动切换月

2、“今天”回到今天；“+”添加日程

3、localStorage存储日程

index,html

<body>
　　<div id="app" v-cloak @mousedown="down" @mouseup="heightChange">
　　　　<!--日历-->
　　　　<div id="calendar">
　　　　　　<!-- 年份 月份 -->
　　　　　　<div class="year-month">
　　　　　　　　<span class="add" @click="eventAdd">+</span>
　　　　　　　　<span class="choose-yearMonth" >{{ currentYear }}-{{currentMonth}}</span>
　　　　　　　　<span class="today" @click="backToday">今天</span>
　　　　　　</div>
　　　　　　<div class="clear"></div>
　　　　　　<!-- 星期 -->
　　　　　　<ul class="weekdays">
　　　　　　　　<li >日</li>
　　　　　　　　<li>一</li>
　　　　　　　　<li>二</li>
　　　　　　　　<li>三</li>
　　　　　　　　<li>四</li>
　　　　　　　　<li>五</li>
　　　　　　　　<li >六</li>
　　　　　　</ul>
　　　　　　<!-- 日期 -->
　　　　　　<ul class="days" ref="daysBox">
　　　　　　　　<!--展示月-->
　　　　　　　　<li : @touchstart="down" @touchend="move" v-for="day in days"> //移动端点击方法，可切换pc端点击方法，见下
　　　　　　　　　　<!--非本月日期，灰色字体-->
　　　　　　　　　　<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>
　　　　　　　　<!--展示周-->
　　　　　　　　<li : @mousedown="down" @mouseup="move_week" v-for="day in week_day"> //pc端点击方法，可切换移动端点击方法，见上
　　　　　　　　　　<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>
　　　　　　　　<li><i class="mui-icon mui-icon-arrowdown"></i></li>
　　　　　</ul>
　　</div>
　　<!-- 添加日程 -->
　　<div id="content" v-if="show">
　　　　<div class="nav">
　　　　　　<span class="back" @click="eventAdd_false">返回</span>
　　　　　　<span class="finish" @click="eventAdd_true(id)">完成</span>
　　　　</div>
　　　　<div class="mui-input-row">
　　　　　　<input type="text" placeholder="日程内容" ref="eventName"/>
　　　　　　<input type="text" placeholder="备注信息" ref="eventInfo"/>
　　　　　　<input type="text" list="cars" placeholder="担任角色" ref="eventRole"/>
　　　　　　<datalist id="cars">
　　　　　　　　<option value="经办人">
　　　　　　　　<option value="交办人">
　　　　　　　　<option value="其他">
　　　　　　</datalist>
　　　　　　<input type="text" v-model="getRemindTime" placeholder="设置提醒时间" @click="timeAdd"/>
　　　　</div>
　　　　<div class="overlay" v-if="selectTime">
　　　　　　<div id="curtain">
　　　　　　　　<div class="icon-shell">
　　　　　　　　　　<div class="icon-false" @click="setTime_false">X</div>
　　　　　　　　　　<div class="icon-true" @click="setTime_true"></div>
　　　　　　　　</div>
　　　　　　　　<div class="clear"></div>
　　　　　　　　<label >日
　　　　　　　　　　<input type="number" v-model="currentDay" min="0" />
　　　　　　　　</label>
　　　　　　　　<label >时
　　　　　　　　　　<input type="number" v-model="currentHour" min="0" />
　　　　　　　　</label>
　　　　　　　　<label >分
　　　　　　　　　　<input type="number" v-model="currentMinute" min="0" />
　　　　　　　　</label>
　　　　　　</div>
　　　　</div>
　　</div>
　　<!--选项卡-->
　　<div id="box">
　　　　<ul class="ul1">
　　　　　　<li v-for="(item,index) in tabtit" v-bind:class="{active:index == num}" @click="tab(index)">
　　　　　　　　{{item}}
　　　　　　</li>
　　　　</ul>
　　　　<ul class="ul2">
　　　　　　<li v-for="(main,index) in tabmain" v-show="index == num">
　　　　　　　　<div v-for="(date,index) in main">
　　　　　　　　　　<div class="clear"></div>
　　　　　　　　　　<div>{{date.eventName}}</div> <div class="keep-right">{{date.eventTime}}</div>
　　　　　　　　　　<div class="clear"></div>
　　　　　　　　　　<div>{{date.eventInfo}}</div>
　　　　　　　　　　<div class="clear"></div>
　　　　　　　　　　<div>{{date.eventRole}}</div> <div class="keep-right" @click="select(index)">...</div>
　　　　　　　　　　<div class="clear"></div>
　　　　　　　　　　<div class="overlay" v-if="index==selectIndex" @click="closeDiv"></div>
　　　　　　　　　　<div v-if="index==selectIndex" class="select-p">
　　　　　　　　　　　　<p>修改</p>
　　　　　　　　　　　　<p>...</p>
　　　　　　　　　　　　<p>...</p>
　　　　　　　　　　　　<p>...</p>
　　　　　　　　　　　　<p>...</p>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</li>
　　　　</ul>
　　</div>
　　<!--mui框架下底部选项卡
　　<nav class="mui-bar mui-bar-tab">
　　<a class="mui-tab-item">
　　<span class="mui-icon mui-icon-home"></span>
　　<span class="mui-tab-label">工作</span>
　　</a>
　　<a class="mui-tab-item">
　　<span class="mui-icon mui-icon-phone"></span>
　　<span class="mui-tab-label">角色</span>
　　</a>
　　<a class="mui-tab-item">
　　<span class="mui-icon mui-icon-email"></span>
　　<span class="mui-tab-label">事项圈</span>
　　<a class="mui-tab-item">
　　<span class="mui-icon mui-icon-gear"></span>
　　<span class="mui-tab-label">同事</span>
　　</a>
　　<a class="mui-tab-item mui-active">
　　<span class="mui-icon mui-icon-gear"></span>
　　<span class="mui-tab-label">日历</span>
　　</a>
　　</nav>-->
　　</div>
</body>

分享题目：vue日历/日程提醒/html5本地缓存功能-创新互联
链接分享：https://www.cdcxhl.com/article36/djsesg.html

成都网站建设公司_创新互联，为您提供微信小程序、响应式网站、网站制作、网站维护、网站建设、网站设计公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容