vue+element?DatePicker實(shí)現(xiàn)日期選擇器封裝
前言
今天封裝了一個(gè)DatePicker日期選擇器,發(fā)現(xiàn)帶快捷選擇的不太好封裝,我需要在不同的地方快捷選擇不同的時(shí)間,并且快捷顯示的時(shí)間是從昨天開(kāi)始,在網(wǎng)上找了一圈都沒(méi)找到便自己寫了一個(gè)記錄一下。
效果
今天是2022年1月3日,最近一周便是從昨天開(kāi)始往前推一周
我這里只有兩種顯示快捷選擇時(shí)間的樣式,可以根據(jù)具體需求無(wú)限加,達(dá)到我想要在不同的選擇器中顯示不同的快捷時(shí)間選擇的需求。
一、封裝組件
創(chuàng)建linechart
linechart:
直接上代碼:
<!-- 時(shí)間選擇器(帶快捷選擇) time:時(shí)間(必傳) time:{ 1:近七天,近三十天,近九十天 2:近一天,近三天,近五天,近三十天 } <template> <div class="line_charts"> <el-date-picker v-model="timedata" type="daterange" unlink-panels :range-separator="$t('to')" :start-placeholder="$t('start_date')" :end-placeholder="$t('end_date')" :picker-options="pickerOptions" > </el-date-picker> </div> </template> <script> export default { props:{ time:{ default(){ return []; } } }, data(){ return{ timedata:'', //選擇時(shí)間數(shù)據(jù) pickerOptions:{ //快捷選擇時(shí)間數(shù)據(jù) shortcuts: [] }, shortcuts:'', } }, methods:{ getshortcuts(){ //快捷選擇時(shí)間事件 if (this.time == 1) { this.pickerOptions.shortcuts = [ { text: '最近七天', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7 - 3600 * 1000 * 24 * 1); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1); console.log(picker); picker.$emit('pick', [start, end]); } }, { text: '最近一個(gè)月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1); picker.$emit('pick', [start, end]); } }, { text: '最近三個(gè)月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90 - 3600 * 1000 * 24 * 1); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1); picker.$emit('pick', [start, end]); } } ] }else{ this.pickerOptions.shortcuts = [ { text: '最近一天', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 1 - 3600 * 1000 * 24 * 1); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1); console.log(picker); picker.$emit('pick', [start, end]); } }, { text: '最近三天', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 3 - 3600 * 1000 * 24 * 1); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1); picker.$emit('pick', [start, end]); } }, { text: '最近五天', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 5 - 3600 * 1000 * 24 * 1); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1); picker.$emit('pick', [start, end]); } }, { text: '最近一個(gè)月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1); picker.$emit('pick', [start, end]); } } ] } } }, mounted(){ this.getshortcuts() } } </script>
二、頁(yè)面中使用
workBench:
<template> <div class="workbench"> <linechart :time=1 ></linechart> </div> </template> <script> import linechart from './visualization/linechart.vue' export default { components:{ linechart }, } </script>
總結(jié)
我這里是通過(guò)父組件傳入的time去區(qū)分我想要哪種快捷選擇的時(shí)間
:time=1
子組件也就是封裝的組件(linechart),進(jìn)行接收父組件傳入的time并進(jìn)行渲染 主要邏輯是:
- 接收time,
- 通過(guò)mounted周期函數(shù)去執(zhí)行g(shù)etshortcuts()函數(shù)
- 判斷需要哪種類型的快捷選擇時(shí)間進(jìn)行對(duì)應(yīng)渲染
我這里的話起止時(shí)間都是減了一天的(因?yàn)槲沂切枰獜淖蛱扉_(kāi)始計(jì)算)
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1); end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
需要從今天開(kāi)始計(jì)算的話直接(三十天為例)
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
其他的話在Element的官方文檔上都有介紹就不過(guò)多說(shuō)明了。
到此這篇關(guān)于vue+element DatePicker實(shí)現(xiàn)日期選擇器封裝的文章就介紹到這了,更多相關(guān)vue+element DatePicker日期選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vant開(kāi)發(fā)微信小程序安裝以及簡(jiǎn)單使用教程
這篇文章主要介紹了vant開(kāi)發(fā)微信小程序安裝以及簡(jiǎn)單使用教程,需要的朋友可以參考下2022-12-12vuex中store.commit和store.dispatch的區(qū)別及使用方法
這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue element-ui導(dǎo)航實(shí)現(xiàn)全屏/取消全屏功能
這篇文章主要介紹了vue element-ui導(dǎo)航實(shí)現(xiàn)全屏/取消全屏功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vue不同項(xiàng)目之間傳遞、接收參數(shù)問(wèn)題
這篇文章主要介紹了Vue不同項(xiàng)目之間傳遞、接收參數(shù)問(wèn)題,主要針對(duì)是登錄操作,我們?yōu)榱送瓿蒘SO(Single Sign On)的效果,認(rèn)證和授權(quán)在UC完成,用戶發(fā)起資源請(qǐng)求,服務(wù)網(wǎng)關(guān)會(huì)進(jìn)行過(guò)濾,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04淺談Vue路由快照實(shí)現(xiàn)思路及其問(wèn)題
這篇文章主要介紹了淺談Vue路由快照實(shí)現(xiàn)思路及其問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06Vue3中ref和reactive的基本使用及區(qū)別詳析
這篇文章主要給大家介紹了關(guān)于Vue3中ref和reactive的基本使用及區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-07-07解決vue偵聽(tīng)器watch,調(diào)用this時(shí)出現(xiàn)undefined的問(wèn)題
這篇文章主要介紹了解決vue偵聽(tīng)器watch,調(diào)用this時(shí)出現(xiàn)undefined的問(wèn)題,具有很好的參考2020-10-10