el calendar製作考勤顯示的一些心得

2022-07-29 19:42:16 字數 1571 閱讀 3191

用el-calendar來顯示員工的考勤資料是再好不過的了,我們需要實現以下目標:

1、可以正確顯示員工每天的考勤

2、全天打卡、半天打卡、遲到早退等需要在日曆控制項上以不同的顏色來表示

3、點選el-calendar中的每一天時可以彈出當天打卡的詳細時間

網上找了很多資料,最後發現還是用遮罩層實現最方便最美觀,css高手可以美化下遮罩層,讓它上下左右居中,讓它顯示成乙個圓形,我這顯示的是個方塊。

後台查詢某個員工時返回的考勤資料格式如下,

kaoqin:[,]
一、日曆控制項的顯示

1、第三行的css主要是讓顯示的day上下左右居中,以適應使用者不同的縮放需求

2、第八行主要是為了讓顯示的tooltip提示資料換行,看上去更美觀

3、10、11、12行是根據判斷的條件來顯示不同的遮罩層,主要是顏色不同。

1

"value1

"> 2"

datecell

" slot-scope="

">3"

position:relative;text-align:center;height:100%;align-items:center;display:flex;justify-content: center;

">

4 }

5for="

(item,index) in kaoqin

" :key="

index+1

">

6if="

(item.天).indexof(data.day)!=-1

">7"

top">8"

content

" v-html="

tohtml(item.日期)

">910

class="

box-green

" v-if="

item.結果==='success'

">

11class="

box-yello

" v-if="

item.結果==='warning'

">

12class="

box-white

" v-if="

item.結果==='default'

">

1314

1516

1718

1

//把考勤結果轉換成html格式的,實現多個資料的換行

2tohtml(v),

1 .box-green

1213 .box-yello

24 .box-white

三、不同尺寸下的顯示效果(沒有半天打卡,沒有退到早退,都顯示的綠色)

TextView的一些高階顯示

1.自定義字型 可以使用settypeface typeface 方法來設定文字框內文字的字型,而android的typeface又使用ttf字型檔案來設定字型 所以,我們可以在程式中放入ttf字型檔案,在程式中使用typeface來設定字型 第一步,在assets目錄下新建fonts目錄,把ttf...

C 顯示一些數字

前面講述了一些基本的計算,這裡,是我新學習的關於顯示的方法。計算機中可以把數字或者符號顯示成各種各樣的狀態,我在前期的學習中,掌握了一些很基本的方法,來跟大家分享。首先,是顯示10到0的整數。為什麼要倒著顯示呢,因為我要試試 這個符號有沒有用,哈哈 include int main return 0...

MTK一些特殊特效的製作

使用刷屏函式可以製作簡單的特效,但特效方方正正,中矩而不中規,過於單調.使用拷屏函式可以做許多單靠刷屏無法實現的函式,但要製作三維特效,不規則區域的特效,這些方法就有些不夠使用了.更複雜的特效,一是使用3d模,二是使用數學函式.當然前提是你必須對lcd layer struct層的定義十分熟悉,對d...