溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue怎么自定義日歷小控件

發(fā)布時間:2022-08-30 09:59:12 來源:億速云 閱讀:199 作者:iii 欄目:開發(fā)技術

本篇內(nèi)容主要講解“Vue怎么自定義日歷小控件”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“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ù)學習!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

vue
AI