vue之手把手教你寫日曆組件

来源:https://www.cnblogs.com/crushxz/archive/2019/08/10/11330726.html
-Advertisement-
Play Games

恢復內容開始 1.日曆組件 1.分析功能：日曆基本功能，點擊事件改變日期，樣式的改變 1.結構分析：html 1.分為上下兩個部分 2.上面分為左按鈕，中間內容展示，右按鈕 下麵分為周幾展示和日期展示 3.基本結構頁面html書寫 4.一些事件以及邏輯 1.使得當前的日期為今天的日期 2.設置該月日 ...


---恢復內容開始---

1.日曆組件

1.分析功能：日曆基本功能，點擊事件改變日期，樣式的改變

1.結構分析：html

1.分為上下兩個部分

2.上面分為左按鈕，中間內容展示，右按鈕

下麵分為周幾展示和日期展示

3.基本結構頁面html書寫

<template>
    <div class="calender2">
        <div class="date-header">
            <div class="pre-month"></div>
            <div class="show-date">2019年8月9日</div>
            <div class="next-month"></div>
        </div>
        <div class="date-content">
            <div class="week-header">
                <div 
                v-for="item in ['日','一','二','三','四','五','六']"
                :key= item
                >{{ item }}</div>
            </div>
            <div class="week-day">
                <div 
                class="every-day"
                v-for="item in 42"
                :key="item"
                >{{ item }}</div>
            </div>
        </div>
    </div>
</template>
*{
    margin: 0px;
    border: 0px;
    list-style: none;
}
.calender2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height:380px;
    width:420px;
    border: 1px solid #ccc;
}
.date-header{
    margin-left: 10px;
    height: 40px;
    width: 350px;
    line-height: 40px;
    text-align: center;
}
.pre-month{
    position: absolute;
    display: inline-block;
    height: 0px;
    width:0px;
    border:20px solid ;
    border-color: transparent rgb(35, 137, 206) transparent transparent;
}
.next-month{
    position: absolute;
    display: inline-block;
    height: 0px;
    width:0px;
    border:20px solid ;
    border-color: transparent transparent transparent  rgb(35, 137, 206);
}
.show-date{
    margin-left: 40px;
    margin-top: 0px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    width: 310px;
    color: rgb(35, 137, 206);
}
.week-header{
    background: rgb(35, 137, 206);
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}
.week-header div{
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 20px;
    width: 60px;
}
.every-day{
    display: inline-block;
    height: 50px;
    width: 60px;
    text-align: center;
    line-height: 50px;
}
.other-day{
    color: #ccc;
}
.now-day{
    background: rgb(35, 137, 206);
}
.active-day{
    /* padding: 2px */
    /* border-sizing:content-box; */
    border: 2px solid rgb(35, 137, 206);
}
</style>

4.一些事件以及邏輯

1.使得當前的日期為今天的日期

            <div class="show-date">{{ year }}年{{ month }}月{{ day }}日</div>
data(){
        return{
            year:null,
            month:null,
            day:null
        }
    },
    created(){
        this.getInitDate();
    },
    methods:{
        getInitDate(){
            const date = new Date();
            this.year = date.getFullYear();
            this.month = date.getUTCMonth() + 1;
            this.day = date.getDate();
        }
    }

2.設置該月日期起始值（找到一號是在哪裡）

beginDay(){
    return new Date(this.year, this.mounth - 1, 1).getDay();
}

3.當月天數字體正常顯示

<div 
v-if="item - beginDay >= 0 && item - beginDay <= curDays"
>{{ item - beginDay }}</div>
​

4.當月天數之前的部分變灰，外加正常顯示日期

註意幾個數學問題：

1.當前月天數日期
2.上月剩餘天數
3.此月顯示的下月天數
<div 
     v-if="item - beginDay > 0 && item - beginDay <= curDays"
     >{{ item - beginDay }}</div>
<div 
     class="other-day" 
     v-else-if="item - beginDay <= 0"
     >{{ item - beginDay + prevDays }}</div>
<div 
     class="other-day" 
     v-else>{{ item - beginDay -curDays }}</div>

5.能知道當前日期，能點擊其他日期，並且會有相應的變化

知道當前日期：

 this.curDate = `${this.year}-${this.month}-${this.day}`

判斷今天是不是當前日期，並且給一個樣式：

'now-day':`${year}-${month}-${item - beginDays}` == curDate

當點擊當月有的日期的時候會根據你的點擊顯示的日期發生變化

判斷是點擊的那一天：

'active-day':`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}`

點擊這一天，綁定點擊事件

@click="handleClickDay(item - beginDay)"
handleClickDay(day){
    this.day = day
}

6.前後兩個按鈕的功能

            <div class="pre-month" @click="handlePrev"></div>
            <div class="next-month" @click="handleNext"></div>
handlePrev(){
            if(this.month == 1){
                this.month = 12
                this.year--
            }else{
                this.month--
            }
        },
        handleNext(){
            if(this.month == 12){
                this.month = 1
                this.year++
            }else{
                this.month++
            }
        }

7.判斷點擊的是否為當月的最後一天

computedDay(){
            const allDay = new Date(this.year, this.month, 0).getDate();
            if(this.day > allDay){
                this.day = allDay;
            }
        }

將這個函數分別在handlePrev(),handleNext()裡面執行-------註意是this.computedDay();

完成

---恢復內容結束---

1.日曆組件

1.分析功能：日曆基本功能，點擊事件改變日期，樣式的改變

1.結構分析：html

1.分為上下兩個部分

2.上面分為左按鈕，中間內容展示，右按鈕

下麵分為周幾展示和日期展示

3.基本結構頁面html書寫

<template>
    <div class="calender2">
        <div class="date-header">
            <div class="pre-month"></div>
            <div class="show-date">2019年8月9日</div>
            <div class="next-month"></div>
        </div>
        <div class="date-content">
            <div class="week-header">
                <div 
                v-for="item in ['日','一','二','三','四','五','六']"
                :key= item
                >{{ item }}</div>
            </div>
            <div class="week-day">
                <div 
                class="every-day"
                v-for="item in 42"
                :key="item"
                >{{ item }}</div>
            </div>
        </div>
    </div>
</template>
*{
    margin: 0px;
    border: 0px;
    list-style: none;
}
.calender2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height:380px;
    width:420px;
    border: 1px solid #ccc;
}
.date-header{
    margin-left: 10px;
    height: 40px;
    width: 350px;
    line-height: 40px;
    text-align: center;
}
.pre-month{
    position: absolute;
    display: inline-block;
    height: 0px;
    width:0px;
    border:20px solid ;
    border-color: transparent rgb(35, 137, 206) transparent transparent;
}
.next-month{
    position: absolute;
    display: inline-block;
    height: 0px;
    width:0px;
    border:20px solid ;
    border-color: transparent transparent transparent  rgb(35, 137, 206);
}
.show-date{
    margin-left: 40px;
    margin-top: 0px;
    display: inline-block;
    line-height: 40px;
    text-align: center;
    width: 310px;
    color: rgb(35, 137, 206);
}
.week-header{
    background: rgb(35, 137, 206);
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}
.week-header div{
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 20px;
    width: 60px;
}
.every-day{
    display: inline-block;
    height: 50px;
    width: 60px;
    text-align: center;
    line-height: 50px;
}
.other-day{
    color: #ccc;
}
.now-day{
    background: rgb(35, 137, 206);
}
.active-day{
    /* padding: 2px */
    /* border-sizing:content-box; */
    border: 2px solid rgb(35, 137, 206);
}
</style>

4.一些事件以及邏輯

1.使得當前的日期為今天的日期

            <div class="show-date">{{ year }}年{{ month }}月{{ day }}日</div>
data(){
        return{
            year:null,
            month:null,
            day:null
        }
    },
    created(){
        this.getInitDate();
    },
    methods:{
        getInitDate(){
            const date = new Date();
            this.year = date.getFullYear();
            this.month = date.getUTCMonth() + 1;
            this.day = date.getDate();
        }
    }

2.設置該月日期起始值（找到一號是在哪裡）

beginDay(){
    return new Date(this.year, this.mounth - 1, 1).getDay();
}

3.當月天數字體正常顯示

<div 
v-if="item - beginDay >= 0 && item - beginDay <= curDays"
>{{ item - beginDay }}</div>
​

4.當月天數之前的部分變灰，外加正常顯示日期

註意幾個數學問題：

1.當前月天數日期
2.上月剩餘天數
3.此月顯示的下月天數
<div 
     v-if="item - beginDay > 0 && item - beginDay <= curDays"
     >{{ item - beginDay }}</div>
<div 
     class="other-day" 
     v-else-if="item - beginDay <= 0"
     >{{ item - beginDay + prevDays }}</div>
<div 
     class="other-day" 
     v-else>{{ item - beginDay -curDays }}</div>

5.能知道當前日期，能點擊其他日期，並且會有相應的變化

知道當前日期：

 this.curDate = `${this.year}-${this.month}-${this.day}`

判斷今天是不是當前日期，並且給一個樣式：

'now-day':`${year}-${month}-${item - beginDays}` == curDate

當點擊當月有的日期的時候會根據你的點擊顯示的日期發生變化

判斷是點擊的那一天：

'active-day':`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}`

點擊這一天，綁定點擊事件

@click="handleClickDay(item - beginDay)"
handleClickDay(day){
    this.day = day
}

6.前後兩個按鈕的功能

            <div class="pre-month" @click="handlePrev"></div>
            <div class="next-month" @click="handleNext"></div>
handlePrev(){
            if(this.month == 1){
                this.month = 12
                this.year--
            }else{
                this.month--
            }
        },
        handleNext(){
            if(this.month == 12){
                this.month = 1
                this.year++
            }else{
                this.month++
            }
        }

7.判斷點擊的是否為當月的最後一天

computedDay(){
            const allDay = new Date(this.year, this.month, 0).getDate();
            if(this.day > allDay){
                this.day = allDay;
            }
        }

將這個函數分別在handlePrev(),handleNext()裡面執行-------註意是this.computedDay();

完成


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML連載29-div和span標簽
    一、div標簽 1.作用：一般用於配合CSS完成網頁的基本佈局 2.例子： 二、span標簽 1.作用：一般用於配合css修改網頁中的一些局部信息 2.例子：span適用於修改我們單獨要求的一塊區域的屬性 三、div和span有什麼區別 1.div會單獨占領一行 2.div是容器級的標簽，而span ...
  • es6學習筆記（二）
    1、Promise 作用：解決非同步回調問題 Promise.resolve('aa') 將aa轉為Promise對象，且是resolve狀態 相當於：new Promise(resolve=>{resolve('aa')}) Promise.reject('bb') 將bb轉成Promsie對象，且 ...
  • javascript錯誤處理
    JavaScript 錯誤 - Throw、Try 和 Catch ...
  • 數組解構賦值，方法
    可以同時定義多個變數，值來源於已有的數組 //1. 定義的變數 數組的項數 let [a,b,c]=[1,2,3];//等同於let a=1,b=2,c=3; //2. 定義的變數>數組的項數 let [a,b,c]=[1,2];//a=1,b=2,c=undefined 定義的變數沒有對應的值就是 ...
  • 擲骰子
    圖片和css樣式已分別上傳至相冊和文件。 ...
  • CSS 基礎樣式
    文本 背景 可使用總屬性background來設置： 邊框 列表樣式 表格樣式 設置單元格間距： border-spacing是對<table>使用的，對<td>、<th>使用無效。 border-spacing不能和border-collapse一起使用，一起使用時border-spacing無效 ...
  • js實現簡單進度條
    主要用到的 offsetWidth 屬性，定時器。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>進度條 </t... ...
  • manifest.json 解析--手機web app開發筆記（三-1）
    在HBuilderX生成的文檔中，還有一個“manifest.json”，只要是創建“移動App”應用，都會在工程下生成這個文件，一看擴展名就知道他是一個json格式文件，文件文件根據w3c的webapp規範制定，是5+移動App的配置文件，用於指定應用的顯示名稱、圖標、應用入口文件地址及需要使用的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類