記一次寫考勤日曆元件(vue)

2021-10-04 12:50:07 字數 2052 閱讀 9263

這是在工作的時候做的乙個考勤日曆功能,整體來說比較簡單,記錄在此,方便以後覆盤

用到的元件有moment.js,有這個元件大大簡化了一些時間的加減計算先上整體效果:

ps:樣式有點醜,沒做調整

1.首先是html結構部分

"width: 500px;height: 500px;"

>

<

!-- 標題、上月、下月--

>

="width-100-per layout-side" style=

"height: 10%;"

>

="cursor-pointer layout-center leftrightbtn" @click=

"prevmonth"

>

<

<

/div>

="height-100-per layout-center-top width-40-per"

>

="layout-center timetitle"

>

"font-weight: bold"

>年$

月`}}<

/span>

<

/div>

<

/div>

="cursor-pointer layout-center leftrightbtn" @click=

"nextmonth"

>

>

<

/div>

<

/div>

<

!-- 日期表--

>

="width-100-per layout-left-top padding-10-px" style=

"height: calc(100% - 10%)"

>

<

!-- 星期--

>

="width-100-per layout-left-top" style=

"height: 10%"

>

"width: calc(100% / 7);"

class

="layout-center" v-

for=

"(i,index) in weekarr"

:key=

"index + i"

>

}<

/div>

<

/div>

<

!-- 日期--

>

="width-100-per layout-left-top" style=

"height: 90%"

>

for=

"(i,index) in datearr"

>

="layout-center tablecol"

:style=

"":key=

"index"

:class=""

>

"i"class

="width-100-per height-100-per layout-center"

:class

="" style=

"cursor: default;position: relative"

>

}<

/span>

"showdaystatus(i)"

class

="checkbadge"

>

<

/div>

<

/div>

<

/div>

<

/template>

<

/div>

<

/div>

<

/div>2.js部分

記一次關於vue效能問題

當時開發專案的時候,涉及到乙個操作列表 不是單純展示的列表,裡面包含很多操作功能 的功能。把列表的每個小item寫成乙個子元件,當時寫子元件沒有考慮到資料量的問題。所以在寫子元件,並沒有做什麼優化,而且裡面還加了form表單校驗,裡面還有很多事件處理,樣式處理等等複雜的邏輯。注意 首先需要從設計上面...

記 第一次Vue實戰應用

學習時使用demo練習,現在是第一次在實戰中使用vue,這是乙個單頁面應用。實現的效果如下 姓名非空驗證 手機號格式驗證 錯誤提示 http請求後端資料 杭州哈智機械人 提供技術支援 首先在標籤中引入 杭州哈智機械人 提供技術支援 resource 1.5.1 ajax url facerecogn...

記一次Vue整體實踐經驗!

首先mode history 堅持使用history。不需要注釋修改,打包時也要使用,千萬別改為hash,不僅路由不美觀,並且會出現一系列問題,一直伴隨你到打包上線。比如 此錯誤困擾兩天,去掉mode hash 才解。開發之前路由不跳轉 打包後使用nginx 時部分路由404。等等等等總之路由就搞得...