乙個可擴充套件自適應的日曆元件

2022-08-23 20:51:09 字數 846 閱讀 4579

這個元件除了很多自帶的api,最好的部分是你可以拿到他vue原始碼,然後進行自定義樣式和功能。github位址如下: 。效果如下:

專案裡的calendar.js是處理農曆日期的,我們如果不需要農曆可以不引入,並把vue中的對應**刪了。

我們可以拿到對應的vue**,就可以自定義我們樣式了,我們把頭部樣式改成我們效果圖的樣式,對應的css可以根據自己效果自己寫。

然後我們的專案裡對應的日期如果考勤異常,會有對應標註

首先在html裡增加對應的**通過status的不同值繫結不同的樣式

然後我的資料格式如下,data裡有userinfo,分別對應遲到、早退和曠工:

methods裡增加乙個方法獲取使用者資訊(y,m,d對應的引數是年月日):

我們需要在普通日期對應的**中把,我們的使用者資訊傳入到options裡

乙個vue的日曆元件ele calendar

1.基於element ui開發的vue日曆元件。位址更新 1.增加value format指定返回值的格式 2.增加頭部插槽自定義頭部 template ele calendar todo event為切換年月是呼叫事件 3.增加日期多選 selectionmode dates 事件select返...

HTML 新增乙個自適應footer

乙個可調整的輸入框和footer 調整輸入框大小後,footer自動下移 所謂自適應的footer,就是指 footer的至多出現在網頁底部,並且如果允許,總是出現在底部。這就保證了 網頁載入時,使用者能夠在最底部看到footer 如果網頁內容高度發生變化,footer要麼上移要麼下移,上移不能超過...

Vue專案中實現乙個日曆元件

本專案是乙個pc端的專案,使用已有的元件,沒有找到pc端的,所以需要自己寫乙個日曆。打卡詳情 mounted console.log this.selyear,this.selectedmonthdate this.getcurmonthdata this.selectedmonthdate met...