簡單的vue日曆元件

2021-08-11 11:22:26 字數 1421 閱讀 6032

根據公司設計圖製作了乙個簡單的日曆元件,主要包括切換上一年、上一月、下一年、下一月,鎖定開始時間、結束時間等功能,以上就是效果圖。

**html

:child="date0">

:child="date1">

**js

kim=new vue(

},date1:}}

});

vue.component("mcalendar",

},methods:else;

if(this.isdate());

};},

setdateinfo:function

(dates)else

if(this.month==1||this.month==3||this.month==5||this.month==7||this.month==8||this.month==10||this.month==12)else;

this.datalist=;

for(var i=1;i<=(num+week);i++);

if(nowend);

this.datalist.push();

}else);

};};

this.datatop=''+this.getmonthtext(this.month)+'

'+this.year+'';

},clickdate:function

(type,day,dates);

break;

default:

break;}},

isdate:function

(); return

false;

},zerofill:function

(num),

getmonthtext:function

(m);

return month;}},

template:''+

''+''+

''+''+

''+'

'+ ''+

''+'

'+ ''+

'日'+

'一'+

'二'+

'三'+

'四'+

'五'+

'六'+

''+ '}

'+ '

'+ '

'+ '

'});

附件位址

Vue日曆元件的功能

本來呢,開開心心的寫完了這個功能,然後發現elemeng更新了,增加了日曆元件這個功能 我的內心機器奔潰,但是,element的日曆元件太簡單了,我感覺還是手擼乙個吧,畢竟也不是很難 實現了顯示農曆,備註功能,點選某一天為某一天新增備註的功能.引用的是他人寫好的元件 在他的基礎上增加了功能,實現了備...

vue初學實踐之路 vue簡單日曆元件 3

這一篇我們來實現管理員修改每一天剩餘數量的功能。div id calendar div id left span 要修改的日期 span li v for d in checkeddays li div v if checkeddays.length 0 label for checkedcount...

vue初學實踐之路 vue簡單日曆元件 1

最近做的專案有乙個需求,需要有乙個日曆元件供預定功能使用,之前的 過於繁瑣複雜,所以我採用vue重寫了這個元件。效果圖。只是乙個簡單的日曆元件,所以並不需要用到node伺服器,只需要乙個html檔案即可。專案基本目錄 首先在引入 vue.js script src script 貼上最主要的html...