您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue怎么自定義日歷小控件”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“Vue怎么自定義日歷小控件”吧!
先上效果圖:
可以在效果圖中看到,選擇不同的月份的時候當月天數(shù)與星期幾都是一一對應,非當月天數(shù)則是灰色顯示,一目了然。
并且此日歷控件支持自動確定當前時間,每次打開默認顯示的就是最新的月份,用來做簽到打卡的功能比較合適。
由于使用的是原生div進行制作,自定義功能非常強,可以自由的更換樣式、背景、顏色、大小等等。
在與數(shù)據(jù)庫的時候可以從數(shù)據(jù)庫獲得時間信息并填充到控件中,圖中的色塊就可以看出。
該控件使用了Vue、CSS、以及最原生的div實現(xiàn)了自定義的樣式,不得不說,div在自定義這一塊是真的太給力了。
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日歷控件</title> <script src="./vue.js"></script> </head> <style> .writer-upper-right { float: left; width: 333px; height: 300px; border: 2px orange solid; border-radius: 7px; } .calendar-head { width: 100%; height: 15%; border-radius: 7px; } .calendar-body { width: 99.9%; height: 84.9%; border-radius: 7px; border-top: 1px orange solid; } .calendar-head-title { float: left; width: 100px; height: 79%; line-height: 33px; border-radius: 7px; border: 2px orange solid; margin-top: 2px; margin-left: 1px; text-align: center; color: orange; font-size: 21px; } .calendar-head-year { float: left; margin-left: 9px; width: 100px; height: 79%; border-radius: 7px; border: 2px orange solid; margin-top: 2px; color: orange; text-align: center; } .select-calendar-year { float: left; width: 100%; height: 100%; border: none; background: none; color: orange; text-indent: 0.7em; font-size: 20px; } .select-calendar-year:focus { outline: none; } .select-calendar-year:hover { cursor: pointer; } .calendar-body-week { width: 99.8%; height: 32px; margin: 0 auto; border-bottom: 1px orange solid; } .calendar-body-days { width: 99.8%; height: 199px; border-bottom: 1px orange solid; border-top: none; border-radius: 7px; } .calendar-body-info { width: 99.8%; height: 18px; border-radius: 7px; } .weekEveryDay { float: left; width: 40px; height: 23px; margin-left: 5px; margin-top: 4px; border: 1px orange solid; border-radius: 5px; line-height: 23px; text-align: center; font-size: 15px; color: orange; } .monthEveryDay { margin-top: 7px; } .not-now-month { border-color: gray; color: gray; } .now-day-writer { background-color: orange; color: black; } .now-day-not-writer { border-color: gray; background-color: gray; color: black; } .info-if-writer { float: left; width: 60px; height: 16px; margin-left: 5px; margin-top: 1px; } .color-span { float: left; width: 15px; height: 15px; margin-top: 1px; background-color: gray; } .color-info { float: left; width: 40px; height: 15px; margin-top: 1px; margin-left: 5px; line-height: 15px; text-align: left; font-size: 12px; color: gray; } .color-span2 { background-color: orange; } .color-info2 { color: orange; } </style> <body > <div id="app"> <div class="writer-upper-right"> <div class="calendar-head"> <div class="calendar-head-title">日歷控件</div> <div class="calendar-head-year"> <label> <select class="select-calendar-year" v-model="calendarYear" @change="SelectCalendarYear"> <option v-for="year in calendarAllYear" :value="year" :key="year">{{year}}年</option> </select> </label> </div> <div class="calendar-head-year"> <label> <select class="select-calendar-year" v-model="calendarMonth" @change="SelectCalendarMonth"> <option v-for="month in calendarAllMonth" :value="month" :key="month">{{month}}月</option> </select> </label> </div> </div> <div class="calendar-body"> <div class="calendar-body-week"> <div class="weekEveryDay">SUN</div> <div class="weekEveryDay">MON</div> <div class="weekEveryDay">TUE</div> <div class="weekEveryDay">WED</div> <div class="weekEveryDay">THU</div> <div class="weekEveryDay">FRI</div> <div class="weekEveryDay">SAT</div> </div> <div class="calendar-body-days"> <div class="weekEveryDay monthEveryDay not-now-month" v-for="day in calendarPrevDays" disabled>{{day}}</div> <div class="weekEveryDay monthEveryDay" v-for="day in calendarNowDays" :class="['weekEveryDay monthEveryDay', {'now-day-writer' : calendarHadWrite.includes(day)}, {'now-day-not-writer' : calendarNotWrite.includes(day)}]" >{{day}}</div> <div class="weekEveryDay monthEveryDay not-now-month" v-for="day in calendarNextDays" disabled>{{day}}</div> </div> <div class="calendar-body-info"> <div class="info-if-writer"> <div class="color-span"></div> <div class="color-info">未更新</div> </div> <div class="info-if-writer"> <div class="color-span color-span2"></div> <div class="color-info color-info2">有更新</div> </div> </div> </div> </div> </div> </body> </html>
到此,相信大家對“Vue怎么自定義日歷小控件”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關內(nèi)容可以進入相關頻道進行查詢,關注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。