vue實現(xiàn)日歷備忘錄功能
更新時間：2020年09月24日 09:40:00 作者：TCorners
這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷備忘錄功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用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="https://cdn.bootcss.com/vue/2.5.11/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el : "#box",
data : {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
pickDay : null,
currentMemo : null,
memo_list :["2018-05-11","2018-05-31"]//時間格式必須為xxxx-xx-xx;
},
created: function() {
this.initCalendar(null);
},
methods:{
initCalendar: function(cur){
if (cur) {
var date = new Date(cur);
} else {
var date = new Date();
this.pickDay = date.getDate();
}
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
var str = this.formatDate(this.currentYear , this.currentMonth, 1);
this.currentWeek = new Date(str).getDay() == 0 ? 7 : new Date(str).getDay();
this.days.length = 0;//初始化數(shù)組
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
var memo_type = false;
d.setDate(d.getDate() - i);
for (var j = 0; j < this.memo_list.length; j++) {
var memoTime = new Date(this.memo_list[j]).getTime();
if( d.getTime() == memoTime){
memo_type = true;
}
}
this.days.push({day:d,memo_type:memo_type});
}
for (var i = 1; i <= 35 - this.currentWeek; i++){
var d = new Date(str);
d.setDate(d.getDate() + i);
var memo_type = false;
for (var j = 0; j < this.memo_list.length; j++) {
var memoTime = new Date(this.memo_list[j]).getTime()
if( d.getTime() == memoTime){
memo_type = true;
}
}
this.days.push({day:d,memo_type:memo_type});
}
},
pick: function(date){
this.pickDay = date.getDate();
this.initCalendar(this.formatDate(date.getFullYear() , date.getMonth() + 1, 1));
var curPickDay = this.formatDate(date.getFullYear() , date.getMonth() + 1, date.getDate())
// 數(shù)據(jù)發(fā)送請求拿回即可，這里我就寫死了,隨便寫兩個樣例
if(curPickDay == "2018-05-11"){
this.currentMemo = [{
cont :"setDate() 方法用于設置一個月的某一天。該方法什么都不返回"
},{
cont :"getTime() 方法可返回距 1970 年 1 月 1 日之間的毫秒數(shù)。"
}]
}else if(curPickDay == "2018-05-31"){
this.currentMemo = [{
cont :"getDay() 方法可返回表示星期的某一天的數(shù)字。返回值是 0（周日） 到 6（周六） 之間的一個整數(shù)"
},{
cont :"setDate(0); 上月最后一天；setDate(-1); 上月倒數(shù)第二天；setDate(dx) 參數(shù)dx為 上月最后一天的前后dx天"
}]
}else{
this.currentMemo= null;
}
},
pickPre: function(year, month){
// setDate(0); 上月最后一天
// setDate(-1); 上月倒數(shù)第二天
// setDate(dx) 參數(shù)dx為 上月最后一天的前后dx天
var d = new Date(this.formatDate(year , month , 1));
d.setDate(0);
this.initCalendar(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
},
pickNext: function(year, month){
var d = new Date(this.formatDate(year , month , 1));
d.setDate(35);
this.initCalendar(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
},
// 返回 類似 2016-01-02 格式的字符串
formatDate: function(year,month,day){
var y = year;
var m = month;
if(m<10) m = "0" + m;
var d = day;
if(d<10) d = "0" + d;
return y+"-"+m+"-"+d
}
}
})
</script>
</html>
歡迎大家提意見，提BUG
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue.js 提供了一個方法 watch，它用于觀察Vue實例上的數(shù)據(jù)變動。下面這篇文章主要給大家介紹了關于Vue.js中關于偵聽器（watch）的高級用法的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-05-05
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下2020-02-02
這篇文章主要給大家介紹了關于vue打包后修改配置后端IP地址、端口等信息的兩種方法,文中通過代碼示例以及圖文介紹的非常詳細,對大家學習或者使用vue打包具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
vue項目中實現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項目中實現(xiàn)el-dialog組件可拖拽效果，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
本文主要介紹了Vue3中同時定義多個插槽的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
本文主要介紹了vue封裝el-upload批量上傳只請求一次接口，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
<keep-alive> 是一個抽象組件,用于將其內部的組件保留在內存中,而不會重新渲染,這意味著當組件在<keep-alive> 內部切換時,其狀態(tài)將被保留,而不是被銷毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01
vue3已經內置了這個功能啦,可以在style中使用v-bind指令綁定script模塊中的響應式變量,這篇文章我們來講講vue是如何實現(xiàn)在style中使用script模塊中的響應式變量,感興趣的朋友一起看看吧2024-07-07
今天小編就為大家分享一篇在vue中多次調用同一個定義全局變量的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue的計算屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11