Vue自定義日歷小控件使用方法詳解
更新時(shí)間：2022年08月29日 16:08:43 作者：一臉聰明
這篇文章主要為大家詳細(xì)介紹了Vue自定義日歷小控件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue自定義日歷小控件的具體代碼，供大家參考，具體內(nèi)容如下
廢話少說，先上效果圖：
可以在效果圖中看到，選擇不同的月份的時(shí)候當(dāng)月天數(shù)與星期幾都是一一對(duì)應(yīng)，非當(dāng)月天數(shù)則是灰色顯示，一目了然。
并且此日歷控件支持自動(dòng)確定當(dāng)前時(shí)間，每次打開默認(rèn)顯示的就是最新的月份，用來做簽到打卡的功能比較合適。
由于使用的是原生div進(jìn)行制作，自定義功能非常強(qiáng)，可以自由的更換樣式、背景、顏色、大小等等。
在與數(shù)據(jù)庫的時(shí)候可以從數(shù)據(jù)庫獲得時(shí)間信息并填充到控件中，圖中的色塊就可以看出。
該控件使用了Vue、CSS、以及最原生的div實(shí)現(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 style="background: url('./bg-xk.gif');margin: 100px 100px;">
?? ?<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>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS前向后瞻正則表達(dá)式定義與用法,分析了前向后瞻正則表達(dá)式的具體定義、功能及具體使用技巧,需要的朋友可以參考下2016-12-12
javascript中parentNode,childNodes,children的應(yīng)用詳解
本篇文章是對(duì)javascript中parentNode,childNodes,children的應(yīng)用進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
layui form表單提交之后重新加載數(shù)據(jù)表格的方法
今天小編就為大家分享一篇layui form表單提交之后重新加載數(shù)據(jù)表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了，絕大多數(shù)遮罩是通過計(jì)算頁面大小，然后覆蓋一個(gè)與頁面同等大小的層實(shí)現(xiàn)，如騰訊qzone, wordpress后臺(tái)。2010-06-06
Javascript實(shí)現(xiàn)的常用算法（如冒泡、快速、鴿巢、奇偶等）
這篇文章主要介紹了Javascript實(shí)現(xiàn)的常用算法,如冒泡、快速、鴿巢、選擇、木桶、奇偶等,需要的朋友可以參考下2014-04-04
javascript獲取下拉列表框當(dāng)中的文本值示例代碼
需要將用戶點(diǎn)擊下拉列表當(dāng)中某個(gè)選項(xiàng)后，將其所選的內(nèi)容保存起來，下面與大家分享下如何使用js獲取下拉列表框文本值，由此需求的朋友可以參考下2013-07-07
TypeScript中的交叉類型和聯(lián)合類型示例講解
交叉類型簡(jiǎn)單來說就是通過&符號(hào)將多個(gè)類型進(jìn)行合并成一個(gè)類型，然后用type來聲明新生成的類型，聯(lián)合類型和交叉類型比較相似，聯(lián)合類型通過|符號(hào)連接多個(gè)類型從而生成新的類型，本文就這兩個(gè)類型結(jié)合示例代碼詳細(xì)講解，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2022-12-12
這篇文章主要介紹了TypeScript如何開啟嚴(yán)格空值檢查，文章圍繞TypeScript的相關(guān)資料展開詳情內(nèi)容，需要的小伙伴可以參考一下2022-03-03
基于JS實(shí)現(xiàn)經(jīng)典的井字棋游戲
井字棋作為我們?cè)谏蠈W(xué)時(shí)代必玩的一款連珠游戲，承載了很多人的童年記憶。本文我們就用HTML、css、js來實(shí)現(xiàn)一款井字棋游戲，感興趣的可以動(dòng)手嘗試一下2022-04-04
javascript同步Import,同步調(diào)用外部js的方法
javascript同步Import,同步調(diào)用外部js的實(shí)現(xiàn)代碼，測(cè)試確實(shí)可用2008-07-07