java月歷組件_vue之手把手教你寫日歷組件

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

1.日歷組件

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

1.結構分析：html

4fcf8c49bd61a50d7ff5fbdca5190d72.png

1.分為上下兩個部分

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

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

3.基本結構頁面html書寫

2019年8月9日

v-for="item in ['日','一','二','三','四','五','六']"

:key= item

>{{ item }}

class="every-day"

v-for="item in 42"

:key="item"

>{{ item }}

*{

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);

}

7512d981c4eb0968428f89c4d63c9c4a.png

4.一些事件以及邏輯

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

{{ year }}年{{ month }}月{{ day }}日

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.當月天數字體正常顯示

v-if="item - beginDay >= 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

?

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

注意幾個數學問題：

1.當前月天數日期

2.上月剩余天數

3.此月顯示的下月天數

v-if="item - beginDay > 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

class="other-day"

v-else-if="item - beginDay <= 0"

>{{ item - beginDay + prevDays }}

class="other-day"

v-else>{{ item - beginDay -curDays }}

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.前后兩個按鈕的功能

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();

440ef54c84e587ca3e1d21ecac33994c.png

完成

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

1.日歷組件

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

1.結構分析：html

4fcf8c49bd61a50d7ff5fbdca5190d72.png

1.分為上下兩個部分

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

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

3.基本結構頁面html書寫

2019年8月9日

v-for="item in ['日','一','二','三','四','五','六']"

:key= item

>{{ item }}

class="every-day"

v-for="item in 42"

:key="item"

>{{ item }}

*{

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);

}

7512d981c4eb0968428f89c4d63c9c4a.png

4.一些事件以及邏輯

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

{{ year }}年{{ month }}月{{ day }}日

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.當月天數字體正常顯示

v-if="item - beginDay >= 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

?

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

注意幾個數學問題：

1.當前月天數日期

2.上月剩余天數

3.此月顯示的下月天數

v-if="item - beginDay > 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

class="other-day"

v-else-if="item - beginDay <= 0"

>{{ item - beginDay + prevDays }}

class="other-day"

v-else>{{ item - beginDay -curDays }}

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.前后兩個按鈕的功能

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();

440ef54c84e587ca3e1d21ecac33994c.png

完成

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/370431.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/370431.shtml
英文地址，請注明出處：http://en.pswp.cn/news/370431.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

HTML5和css3

HTML5和css3

超鏈接 <a target"頁面打開位置" href"鏈接地址">內容</a>target:_blank 重新打開一個頁面target:_self 當前頁面打開 1.頁面地址&#xff1a; 基礎功能&#xff0c;用于進入該鏈接的頁面&#xff1b; 2.錨點&#xff1a; 需要給標簽名定義id…
閱讀更多...
python下載顯示文件丟失_Microsoft.PythonTools.resources.dll

python下載顯示文件丟失_Microsoft.PythonTools.resources.dll

我該如何安裝從金山毒霸下載的DLL文件&#xff1f;一&#xff1a;1、從金山毒霸下載壓縮文件。2、將DLL文件解壓到電腦上的某個地方。3、把該文件跟要求使用它的程序放在同一路徑上。注意32位程序需要使用32位的DLL文件&#xff0c;64位程序需要使用64位的DLL文件。否則會出現0…
閱讀更多...
maven project module 依賴項目創建 ---轉

maven project module 依賴項目創建 ---轉

一、創建Maven Project 1.右擊 --> New --> Other&#xff0c;--> Maven --> Maven Project --> Next 2.如下圖&#xff0c;選中Create a simple project --> Next 3.輸入Group Id, Artifact Id, Version, Packaging選擇pom&#xff0c;因為創建的Maven Pr…
閱讀更多...
java soot_正確執行3個地址代碼的SOOT API

java soot_正確執行3個地址代碼的SOOT API

我在運行SOOT API時遇到問題 . 我正在使用java -cp soot-2.5.0.jar soot.Main -f jimple test我遇到以下錯誤&#xff1a;Exception in thread "main" java.lang.RuntimeException: Could not load classfile: java.io.ObjectInputStream atat soot.coffi.Util.resol…
閱讀更多...
JSF AJAX請求的會話超時處理

JSF AJAX請求的會話超時處理

JSF AJAX請求的會話超時處理 當我們使用AJAX行為開發JSF應用程序時&#xff0c;在處理Ajax請求超時場景時可能會遇到問題。 例如&#xff0c;如果您使用的是基于J2EE表單的身份驗證&#xff0c;則會話超時后應將正常請求重定向到登錄頁面。 但是&#xff0c;如果您的請求是AJAX…
閱讀更多...
linux常見命令搜集

linux常見命令搜集

查找根目錄下txt和pdf文件 find / \( -name "*.txt" -o -name "*.pdf" \) -print 正則查找根目錄下所有的txt和pdf文件 find / -regex ".*\(\.txt|\.pdf\)$"查找所有非txt文本 find . ! -name "*.txt" -print制定搜索深度 find ~ -max…
閱讀更多...
前端html,css基礎總結

前端html,css基礎總結

0.1、css引入界面的方式: 內聯式:通過標簽的style屬性&#xff0c;在標簽上直接寫樣式。 <div style"width:100px; height:100px; background:red "></div> 嵌入式:通過style標簽&#xff0c;在網頁上創建嵌入的樣式表。 <style type"text/css&q…
閱讀更多...
知乎python練手的_Python—爬蟲之初級實戰項目：爬取知乎任一作者的文章練手

知乎python練手的_Python—爬蟲之初級實戰項目：爬取知乎任一作者的文章練手

爬蟲之初級實戰項目&#xff1a;爬取知乎任一作者的文章練手在正式上代碼之前&#xff0c;先過一遍之前所學知識的框架內容&#xff0c;溫故而知新&#xff01;&#xff01;&#xff01;接下來我們直接上代碼&#xff0c;一定要手敲代碼、手敲代碼、手敲代碼&#xff01;&#…
閱讀更多...
java url幫助類_Spring居然還提供了這么好用的URL工具類

java url幫助類_Spring居然還提供了這么好用的URL工具類

1. 前言開發中我們經常會操作 URL&#xff0c;比如提取端口、提取路徑以及最常用的提取參數等等。很多時候需要借助于一些第三方類庫或者自己編寫工具類來實現&#xff0c;今天胖哥給大家介紹一種方法&#xff0c;無需新的類庫引入&#xff0c;只要你使用了 Spring Web 模塊都可…
閱讀更多...
Java并發之CyclicBarria的使用（二）

Java并發之CyclicBarria的使用（二）

Java并發之CyclicBarria的使用&#xff08;二&#xff09; 一.簡介 之前借助于其他大神寫過一篇關于CyclicBarria用法的博文&#xff0c;但是內心總是感覺絲絲的愧疚&#xff0c;因為筆者喜歡原創&#xff0c;而不喜歡去轉載一些其他的文章&#xff0c;為此筆者自己原創了一個C…
閱讀更多...
需加裝飾——裝飾模式

需加裝飾——裝飾模式

裝飾模式指的是在不必改變原類文件和使用繼承的情況下&#xff0c;動態地擴展一個對象的功能。它是通過創建一個包裝對象&#xff0c;也就是裝飾來包裹真實的對象。 類圖分析 我們先假設一個業務場景&#xff0c;有三種房子需要裝修&#xff0c;分別是公寓&#xff0c;木屋和別…
閱讀更多...
Java正則表達式教程及示例

Java正則表達式教程及示例

當我開始使用Java時&#xff0c;正則表達式對我來說是一場噩夢。 本教程旨在幫助您掌握Java正則表達式&#xff0c;并讓我定期返回以刷新我的正則表達式學習。 什么是正則表達式&#xff1f; 正則表達式定義字符串的模式。 正則表達式可用于搜索&#xff0c;編輯或處理文本。…
閱讀更多...
Vue2.0 --- vue-cli腳手架中全局引入JQ

Vue2.0 --- vue-cli腳手架中全局引入JQ

第一步&#xff1a;安裝jQuery npm/cmpn方式安裝(默認安裝1.7.X版本的JQ) npm/cnpm install jQuery 如果想安裝更高版本的JQ那么可以選擇在package.json文件下面這個位置添加代碼斷&#xff08;當前圖片安裝的是2.2.3版本&#xff0c;如果想安裝更高或者其他可以更改版本號&…
閱讀更多...
python筆記全_Python筆記

python筆記全_Python筆記

一、數據結構和序列1.1、元組&#xff1a;有一種固定長度&#xff0c;不可修改的python對象序列tup 1,2,3 tup : (1,2,3)tup tuple([4,0,2]) tup : (4,0,2)tup[0] 4元組添加元素&#xff1a;tup (["foo",[1,2],True])tup[1].append(3)tup : ("foo",[1,…
閱讀更多...
java 分布式編譯_linux分布式編譯distcc和ccache的部署

java 分布式編譯_linux分布式編譯distcc和ccache的部署

unset LANGUAGEexport LANG"en"cd /home/kingsoftmkdir distcccd distccrpm包用&#xff1a;rpm -ivh ...bz2包用&#xff1a;tar -xvf ...進入distcc解壓后的目錄./configure && make && make installmkdir /usr/lib/distccmkdir /usr/lib/distcc/b…
閱讀更多...
Unity——用UnityEditor拷貝FBX中的AnimationClip

Unity——用UnityEditor拷貝FBX中的AnimationClip

最近有個新需求&#xff0c;要用代碼添加動畫的事件&#xff0c;但是Unity不能直接修改FBX中的AnimationClip 在Animation窗口中可以看到&#xff0c;AnimationClip是Read-Only狀態&#xff0c;用代碼修改這個AnimationClip也是不會生效的&#xff0c;包括用代碼添加事件 解決方…
閱讀更多...
sql 分頁存儲過程

sql 分頁存儲過程

ALTER procedure [dbo].[fenye]pagesize int, --每頁顯示數量pageCurrent int, --當前頁tablename varchar(20), --表名field varchar(20), --顯示的列名(eg: id,name)where varchar(20), --篩選條件 (eg: name not null)orderBy varchar(20), --排序的列名&#xff08;eg: id …
閱讀更多...
使用Hadoop計算共現矩陣

使用Hadoop計算共現矩陣

這篇文章繼續我們在MapReduce的數據密集型文本處理一書中實現MapReduce算法的系列。 這次&#xff0c;我們將從文本語料庫創建單詞共現矩陣。 本系列以前的文章是&#xff1a; 使用MapReduce進行數據密集型文本處理 使用MapReduce進行數據密集型文本處理-本地聚合第二部分 共…
閱讀更多...
HTML5 拖放、交換位置

HTML5 拖放、交換位置

設置元素為可拖放 draggable 屬性設置為 true: <img draggable"true" /> 拖動什么 - ondragstart 和 setData() dataTransfer.setData() 方法設置被拖數據的數據類型和值: function drag(e) { e.dataTransfer.setData("text/html", value); }注&…
閱讀更多...
java 工作6年 面試_為什么不想搞Java了，6年經驗去面試5分鐘結束，現在Java面試為何這么難...

java 工作6年 面試_為什么不想搞Java了，6年經驗去面試5分鐘結束，現在Java面試為何這么難...

3、Java并發什么是可重入鎖、樂觀鎖、悲觀鎖、公平鎖、非公平鎖、獨占鎖、共享鎖&#xff1f;講講ThreadLocal 的實現原理&#xff1f;ThreadLocal 作為變量的線程隔離方式&#xff0c;其內部是如何做的&#xff1f;說說InheritableThreadLocal 的實現原理&#xff1f;并發包中…
閱讀更多...
最新文章

Copyright @ 2022~2023