Vue初探-日期選擇器

MAX_zuo 發布于2019-08-22 10:47 / 3032人閱讀

摘要：之前用用面向對象的方法實現過日期選擇器，最近在練習，現在用實現一遍。需求設定實現一個日期選擇器，默認顯示，高亮顯示。能夠點擊上一月下一月進行日期跳轉。實現日期選擇有兩個比較關鍵的方法獲取當月天數，以便循環遍歷多少天。

之前用jquery用面向對象的方法實現過日期選擇器，最近在練習vue，現在用vue實現一遍。發現vue用數據驅動的方式來實現，感覺還不錯。

需求設定

1.實現一個日期選擇器，默認顯示，today高亮顯示。
2.能夠點擊上一月、下一月進行日期跳轉。
3.點擊某一天能夠拿到日期

思路分析

之前用jquery實現的時候可能會考慮將dom封裝到js中，在js中拼接html字符串，在頁面調用的地方直接引用。考慮到vue可以進行組件式開發，日期組件完全可以多帶帶提取出一個vue文件，所以這里直接將dom寫在html中，開發時可寫在template里。

實現日期選擇有兩個比較關鍵的方法：1.獲取當月天數，以便循環遍歷多少天。2.獲取當月第一天是星期幾，以便確定第一天顯示在哪里。

在編寫組件時，我們選擇維護三個變量nowYear,nowMonth,nowDate,即vue實例上掛在的當前年、月、日。

在進行數據初始化，也可以看做組件初始化顯示時，首先為這三個變量附初值

var date = new Date();
this.nowYear = date.getFullYear();
this.nowMonth = date.getMonth();
this.nowDate = date.getDate();

然后，將傳統方法中的init函數，也就是原來的dom拼接函數，在這里僅僅操作一個數組，即維護一個數組days,存儲需要顯示的當月日期數據。

同樣我們利用vue體統的@click可以很方便的綁定事件，然后進行days的更新。當days更新時，vue的watcher就會發現并告訴dom更新，利用Vm.$nextTick方法，執行回調函數。即

this.$nextTick(() => {
  this.nowDate();
  this.init();
})

效果演示

目前只實現到需求設定的程度，于實際應用可能稍有差距，可以理解下思路，使用時自行實現

demo:(http://fehey.com/Vue-items/vu...
源碼：github源碼

博客：(http://fehey.com/)歡迎前端小伙伴交流指正~

GPU云服務器云服務器 asp日期選擇器日期連續選擇日期選擇控件日期選擇庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91253.html

vue初探--編寫表格組件

摘要：容器里面包含部分，其一為提供過濾器的入口其二為表格組件。數據綁定，簡寫形式為在父組件和子組件的通訊中，必須要在子組件里面聲明。如果是編寫則必須是注冊組件的語法糖。下次還是上動圖吧以后基本上碰到這種使用表格呈現數據的組件。在項目當中，經常會有表格組件，包含2部分，其一為table-header,其二為table-content 然后在這個小demo里面涉及到了vue的個別指令: v-f...

dabai 2019-08-19 17:12 評論0 收藏0
gulp和webpack初探

摘要：首先聲明一下，和兩者關系不大，主要是團隊之前一直用構建工具，這幾天業務上比較清閑，老大讓我學學新的和這些潮流工具，于是草草研究了一天，記一些筆記。最后使用將各個組件打包在一起。首先聲明一下，gulp和webpack兩者關系不大，主要是團隊之前一直用grunt構建工具，這幾天業務上比較清閑，老大讓我學學新的gulp和webpack這些潮流工具，于是草草研究了一天，記一些筆記。 gulp...

jhhfft 2019-08-19 18:40 評論0 收藏0
初探vue-cli 3.0

摘要：當你將一系列的特性選擇完畢后最后回提示你是否將已選項保存成一個快速將來可復用的當你選擇保存時，被保存的將會存在用戶的目錄下一個名為的文件里。準備工作 npm install -g @vue/cli or yarn global add @vue/cli 安裝需要Node.js8.9以上版本，安裝完成后可以通過vue --version來驗證是否安裝成功項目創建 vue create...

superPershing 2019-08-23 12:23 評論0 收藏0
vue 手寫一個時間選擇器

摘要：實現代碼于文章末尾處構思頁面結構組件由輸入框和日歷面板組成，寫好頁面主體結構。輸入框點擊顯示或隱藏日歷面板方法改變布爾值控制日歷面板的顯示隱藏。同時，當組件銷毀時，也要及時清除該監聽器。最近研究了 DatePicker 的實現原理后做了一個 vue 的 DatePicker 組件，今天帶大家一步一步實現 DatePicker 的 vue 組件。原理 DatePicker 的原理是—...

sf_wangchong 2019-08-23 11:54 評論0 收藏0
開發中遇到的問題總結

摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 評論0 收藏0