您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)在vant中使用時(shí)間選擇器實(shí)現(xiàn)結(jié)束時(shí)間和開(kāi)始時(shí)間,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
<template> <div class="linesMigrate"> <div class="conditionDiv"> <div class="singleCondition" : @click="showPopupDateChooseStart"> <div class="dateValueDiv" v-if="allDateStart">{{dateFormatterStart}}</div> <div class="dateValueDiv" v-if="!allDateStart" :>{{dateFormatterStart}}</div> </div> <div class="singleCondition" : @click="showPopupDateChoose"> <div class="dateValueDiv" v-if="allDate">{{dateFormatter}}</div> <div class="dateValueDiv" v-if="!allDate" :>{{dateFormatter}}</div> </div> </div> <!-- 選開(kāi)始時(shí)間 --> <van-popup v-model="showDateChooseStart" position="bottom" :close-on-click-overlay="false" : :overlay-> <div class="popupDate" :> <img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePopStart" : /> <van-datetime-picker :show-toolbar="false" v-model="dateChooseStart" type="date" :min-date="minDateStart" :max-date="maxDateStart" /> <div class="chooseTodayDiv" @click="chooseDateStart">選擇最近一周</div> </div> </van-popup> <!-- 選結(jié)束時(shí)間 最近一天 --> <van-popup v-model="showDateChoose" position="bottom" :close-on-click-overlay="false" : :overlay-> <div class="popupDate" :> <img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePop" : /> <van-datetime-picker :show-toolbar="false" v-model="dateChoose" type="date" :min-date="minDate" :max-date="maxDate" /> <div class="chooseTodayDiv" @click="chooseDateToday">選擇最新一天</div> </div> </van-popup> <Loading :isShow="loadingState" /> </div> </template> <script> import Loading from '../../components/common/loading.vue';// 引入公共的loading組件 import Vue from 'vue'; import { Popup } from 'vant'; import { DatetimePicker } from 'vant'; Vue.use(DatetimePicker); Vue.use(Popup); export default { name: 'lines', mounted() { // 獲取數(shù)據(jù) this.loadingState=false; this.initRequest(); }, data() { return { // 時(shí)間選擇背景樣式數(shù)據(jù) conditonStyle2: { background: "url(" + require("../../assets/img/migrate2.png") + ") no-repeat center", backgroundSize: "contain" }, // 日期組件彈出層展示與否的標(biāo)志 --開(kāi)始時(shí)間 showDateChooseStart:false, // 日期組件彈出層展示與否的標(biāo)志 showDateChoose:false, // 彈出層背景圖片 bgDateImgStyle: { background: "url(" + require("../../assets/img/migratePopBackDate.png") + ") no-repeat", backgroundSize: "contain" }, // 標(biāo)準(zhǔn)化未經(jīng)處理的時(shí)間格式 dateChoose: new Date(), dateChooseStart: new Date(), // 處理過(guò)格式的日期數(shù)據(jù) dateFormatter:"日期", allDate:true, dateFormatterStart:"日期", allDateStart:true, minDateStart: new Date(2019,8,1), // 開(kāi)始時(shí)間最小2019/9/01 maxDateStart: new Date(), // 開(kāi)始時(shí)間最大 當(dāng)前時(shí)間 minDate: new Date(), //最小時(shí)間必須 》開(kāi)始的最大時(shí)間maxDateStart maxDate: new Date(), // 開(kāi)始時(shí)間最大 當(dāng)前時(shí)間 // 控制加載中狀態(tài)的標(biāo)志 loadingState:true }; }, methods: { // 初始的請(qǐng)求方法 async initRequest(){ this.chooseDateToday(); this.chooseDateStart(); }, // 展示日期彈出層--開(kāi)始時(shí)間 showPopupDateChooseStart() { this.showDateChooseStart = true; }, // 展示日期彈出層 --結(jié)束時(shí)間 showPopupDateChoose() { // 設(shè)置結(jié)束時(shí)間的最小值 this.minDate = this.dateChooseStart; this.showDateChoose = true; }, // 關(guān)閉日期彈出層 ---開(kāi)始時(shí)間 closeDatePopStart(){ this.showDateChooseStart = false; this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd"); // 設(shè)置結(jié)束時(shí)間的最小值 this.minDate = this.dateChooseStart; this.allDateStart=false; // this.loadingState=true; }, // 關(guān)閉日期彈出層 --結(jié)束時(shí)間 closeDatePop(){ this.showDateChoose = false; this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd"); // 設(shè)置開(kāi)始時(shí)間的最大值 this.maxDateStart = this.dateChoose; this.allDate=false; // this.loadingState=true; }, // 日期格式轉(zhuǎn)換函數(shù) dateTransfor(date,format){ var o = { "M+" : date.getMonth()+1, //月份 "d+" : date.getDate(), //日 "h+" : date.getHours(), //小時(shí) "m+" : date.getMinutes(), //分 "s+" : date.getSeconds(), //秒 "q+" : Math.floor((date.getMonth()+3)/3), //季度 "S" : date.getMilliseconds() //毫秒 }; if(/(y+)/.test(format)) { format=format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(let k in o) { if(new RegExp("("+ k +")").test(format)){ format = format.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); } } return format; }, // 選擇時(shí)間函數(shù) -- 七天前 chooseDateStart(){ let yesToday=new Date(); yesToday.setDate(yesToday.getDate()-7); this.dateChooseStart=yesToday; this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd"); }, // 選擇時(shí)間函數(shù) -- 今日 chooseDateToday(){ this.dateChoose= new Date(); this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd"); }, // 選擇時(shí)間函數(shù) i=0今日 chooseDate(i){ let yesToday=new Date(); yesToday.setDate(yesToday.getDate()-i); return this.dateTransfor(yesToday,"yyyy-MM-dd"); }, }, components: { Loading } }; </script> <style scoped> /*覆蓋原有彈出層樣式*/ .van-popup { position: absolute; background: transparent; /*bottom: 3.01rem;*/ } /*覆蓋日期組件原有樣式*/ .van-picker{ position: relative; background-color: #fff; user-select: none; width: 100%; } /*篩選條件們的div樣式*/ .conditionDiv{ display: flex; justify-content: center; width: 100%; height: 3.7%; margin-top: 4%; } /*單個(gè)篩選條件的樣式*/ .singleCondition{ width: 27%; margin-left: 2%; margin-right: 2%; /*border: 1px solid #451da4;*/ height: 100%; /*padding-right: 5%;*/ color: #fff; display: flex; justify-content: center; align-items: center; /*flex-direction: column;*/ font-size: 0.72rem; } /*日期組件的div,由于其背景用icon而非整個(gè)背景圖,因此樣式上不同*/ .singleDateDiv{ width: 23%; margin-left: 2%; margin-right: 2%; /*border: 1px solid #451da4;*/ height: 100%; color: #fff; padding-right: 5%; display: flex; justify-content: flex-start; } /*日期的值位置樣式*/ .dateValueDiv{ display: flex; justify-content: center; flex-direction: column; font-size: 0.72rem; width: 82%; } /*日期彈出層中選擇今天div樣式*/ .chooseTodayDiv{ box-sizing: border-box; z-index: 2; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; color: red; height: 3rem; width: 90%; background: #fff; border-top: 1px solid lightgrey; font-size: 0.875rem; } /*日期彈窗*/ .popupDate { border-radius: 2px; background: #fff; height: 100%; width: 90%; margin: 0 auto; } </style> <style> /*覆蓋原有的選擇器樣式*/ .van-picker-column{ font-size: 0.9rem; } </style>
補(bǔ)充知識(shí):Vant庫(kù)的使用,及日期組件的一些注意點(diǎn)
Vant庫(kù)對(duì)于開(kāi)發(fā)商城類項(xiàng)目,真的是非常nice,會(huì)讓你情不自禁愛(ài)上它。Vant庫(kù)支持按需加載、為移動(dòng)端商城設(shè)計(jì)的風(fēng)格,非常完美。但是,本人在實(shí)際開(kāi)發(fā)中,也遇到了一些小問(wèn)題,折騰了老半天,最終得以解決。
下面先說(shuō)說(shuō)在vue中使用Vant庫(kù)的流程及一些注意事項(xiàng),以及遇到的坑和解決辦法。
首先送上官網(wǎng)傳送門:www.youzanyun.com/zanui/vant#…,具體的api可自行查閱使用。
第一步,安裝:
cnpm i vant -S
第二步,引入組件:
關(guān)于怎么引入Vant組件,有全局引入(非常不推薦)和按需引入兩種方式
這里演示按需引入的方式,因?yàn)楣倬W(wǎng)說(shuō)的稍微有些復(fù)雜,對(duì)于一些剛接觸的小伙伴,可能會(huì)造成一些誤解(PS:我在剛開(kāi)始接觸的時(shí)候這里就蹲了兩個(gè)坑,簡(jiǎn)直欲哭無(wú)淚呀~)。直接說(shuō)怎么用吧:
為了方便我們按需引入組件,這里還需要安裝一個(gè)插件
cnpm i babel-plugin-import -D
安裝好該插件好,還需要在.babelrc文件中plugins那里進(jìn)行一個(gè)簡(jiǎn)單的配置,這里附上完整的plugins部分內(nèi)容。這里我們?cè)趐lugins數(shù)組中插入了import那個(gè)數(shù)組,其他內(nèi)容是原來(lái)就有的。
"plugins": [ "transform-vue-jsx", "transform-runtime", ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]
完成好配置后,在main.js中按需引入你需要的組件。例如這里引入Vant的button組件:
import { Button } from 'vant'; // 在mian.js中通過(guò)import導(dǎo)入組件,多個(gè)組件直接在{,,,}加入即可 Vue.use(Button); //讓vue加載該組件如果還需要用其他組件,可以這樣寫(xiě)Vue.use(Button).use().user(); <van-button type="default">默認(rèn)按鈕</van-button> // 在template中使用組件
這里提一點(diǎn),如果是類似Toast這種組件,只需要在main.js中引入就好:
import { Toast } from 'vant'; // 然后在你需要的頁(yè)面直接這樣使用就好 // 只要引入后,vant就會(huì)自動(dòng)把Toast組件掛在vue的原型上Vue.prototype.$Toast = Toast; this.$Toast('message');
可以看到,這里button組件以及正常導(dǎo)入使用了。Vant中還有更多適合實(shí)際開(kāi)發(fā)的功能更豐富的組件,小伙伴們自行查閱官方文檔使用吧。
附官網(wǎng)API文檔傳送門:www.youzanyun.com/zanui/vant#…
最后,在說(shuō)一個(gè)關(guān)于Vant日期組件使用時(shí)所遇到的一個(gè)大坑。
Vant日期組件的官網(wǎng)api沒(méi)有給出關(guān)于事件函數(shù)的使用demo,到時(shí)小編在使用時(shí)不小心邁進(jìn)了一個(gè)大坑。
就是change或者confirm事件時(shí),怎么都獲取不到回調(diào)參數(shù),即在點(diǎn)擊確定時(shí)回去不到返回的選中時(shí)間,總是提示undefined或者null。下面是小編錯(cuò)誤的寫(xiě)法,大家不要踩坑:
<!--這是html部門--> <van-datetime-picker v-model="currentDate" type="datetime" @confirm="confirm()" @change="change()" /> // 這是對(duì)應(yīng)的方法 methods: { confirm(val) { console.log(val) }, change(e) { console.log(e.getValues()) } }
乍一看,是按照文檔上說(shuō)的方式使用的呀,可是不僅confirm沒(méi)有返回選中的日期時(shí)間,change事件的各種回調(diào)方式也使用不了。
但是吧,如果你要打印1,又可以打印出來(lái),說(shuō)明接口走這個(gè)方法了。
到底怎么回事呢,選中的時(shí)間怎么就出不來(lái)呢?小編差點(diǎn)都要懷疑是不是這個(gè)Vant組件有問(wèn)題了!
說(shuō)重點(diǎn):后來(lái)小編終于找到了解決辦法:
原來(lái)是這里出了問(wèn)題,@confirm="confirm()" @change="change()"
這里多加了一對(duì)括號(hào),正確的寫(xiě)法是
<!--這是html部分--> <van-datetime-picker v-model="currentDate" type="datetime" @confirm="confirm" @change="change" /> // 這是對(duì)應(yīng)的方法 methods: { confirm(val) { console.log(val) // 打印出了時(shí)間 }, change(e) { console.log(e.getValues()) // 打印出了選中的時(shí)間,是個(gè)數(shù)組 } }
以上就是在vant中使用時(shí)間選擇器實(shí)現(xiàn)結(jié)束時(shí)間和開(kāi)始時(shí)間,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。