本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码,供大家参考,具体内容如下
组件代码如下:
<template> <van-picker :title="title" :show-toolbar="showToolbar" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" :confirm-button-text="confirmButtonText" :cancel-button-text="cancelButtonText" :loading="loading" :readonly="readonly" :item-height="itemHeight" :visible-item-count="visibleItemCount" :swipe-duration="swipeDuration" > <template slot="default"> <slot name="default"></slot> </template> <template slot="title"> <slot name="title"></slot> </template> <template slot="confirm"> <slot name="confirm"></slot> </template> <template slot="cancel"> <slot name="cancel"></slot> </template> <template slot="option"> <slot name="option"></slot> </template> <template slot="columns-top"> <slot name="columns-top"></slot> </template> <template slot="columns-bottom"> <slot name="columns-bottom"></slot> </template> </van-picker> </template> <script> import Vue from 'vue' import { Field, Picker, Popup } from 'vant'; Vue.use(Field).use(Picker).use(Popup); export default { name: "VanDatePicker", props: { value: { type: Date, default: () => new Date() }, minDate: { type: Date, default: () => new Date(new Date().getFullYear()-5,0,1) }, maxDate: { type: Date, default: () => new Date(new Date().getFullYear()+5,0,1) }, showToolbar: { type: Boolean, default: () => false }, title: { type: String, default: () => '' }, confirmButtonText: { type: String, default: () => '确认' }, cancelButtonText: { type: String, default: () => '取消' }, loading: { type: Boolean, default: () => false }, readonly: { type: Boolean, default: () => false }, itemHeight: { type: Number||String, default: () => 44 }, visibleItemCount: { type: Number||String, default: () => 6 }, swipeDuration: { type: Number||String, default: () => 1000 }, }, data() { return { monthArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'], dayArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24','25', '26', '27', '28', '29', '30', '31'], }; }, computed: { columns: function () { let minYear = this.minDate.getFullYear(); let maxYear = this.maxDate.getFullYear(); let year = this.value.getFullYear(); let month = this.value.getMonth(); let day = this.value.getDate(); let yearArr = []; let i = 0; while (i < maxYear - minYear + 1) { yearArr.unshift((maxYear - i) + ''); i ++; } let columns = [ { values: yearArr, defaultIndex: Math.floor(year) - minYear }, { values: this.monthArr, defaultIndex: Math.floor(month) }, { values: this.dayArr, defaultIndex: Math.floor(day-1) }, { values: ['-'] }, { values: yearArr, defaultIndex: Math.floor(year) - minYear }, { values: this.monthArr, defaultIndex: Math.floor(month) }, { values: this.dayArr, defaultIndex: Math.floor(day-1) }, ]; return columns } }, watch: { }, methods: { onConfirm(value, index) { // console.log(`当前值:${value}, 当前索引:${index}`); this.$emit('confirm',value,index); }, onChange(picker, value, index) { // console.log(`当前值:${value}, 当前索引:${index}`); let _this = this; let minMonth = this.minDate.getMonth(); let minDay = this.minDate.getDate(); let maxMonth = this.maxDate.getMonth(); let maxDay = this.maxDate.getDate(); let d = new Date(value[0],value[1],0); setDate(0); setDate(4); function setDate(i) { //最小年份 if (value[i]-0===_this.minDate.getFullYear()) { picker.setColumnValues(i+1,_this.monthArr.slice(minMonth)); let strMinM = ''; if (minMonth<9) { strMinM = '0'+(minMonth+1) } else { strMinM = strMinM + 1 + '' } picker.setColumnValue(i+1,value[i+1]-1<minMonth"")>finallyVal.slice(len+1).join("")){ picker.setValues([...finallyVal.slice(0,len),"-",...finallyVal.slice(0,len)]); if (new Date(finallyVal.slice(0,len).join("-")+' 00:00:00').getTime()===this.maxDate.getTime()) { console.log(111); picker.setColumnValues(5,_this.monthArr.slice(0,maxMonth+1)); picker.setColumnValues(6,_this.dayArr.slice(0,maxDay)); } } this.$emit('change',picker,finallyVal,index); }, onCancel() { // console.log('取消'); this.$emit('cancel'); }, }, } </script> <style scoped> </style>
调用demo
<template> <div> <van-field readonly clickable label="时间段" :value="value" placeholder="选择时间段" @click="showPicker = true" /> <van-popup v-model="showPicker" round position="bottom"> <van-date-picker show-toolbar v-model="currentDate" title="选择时间段" :min-date="minDate" :max-date="maxDate" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" > </van-date-picker> </van-popup> </div> </template> <script> import VanDatePicker from '@/components/VanDatePicker'; export default { name: "Test", components: {VanDatePicker}, data() { return { value: '', showPicker: false, minDate: new Date(2010, 5, 15), maxDate: new Date(2025, 10, 15), currentDate: new Date(), startDate: '', endDate: '', }; }, mounted() { }, methods: { onConfirm(value, index) { console.log(`当前值:${value}, 当前索引:${index}`); this.startDate = value.slice(0,3).join('-'); this.endDate = value.slice(4,7).join('-'); this.value = this.startDate + '至' + this.endDate; this.showPicker = false }, onChange(picker, value, index) { console.log(`当前值:${value}, 当前索引:${index}`); }, }, } </script> <style scoped> </style>
UI示例
API:注意红色划掉的没有实现
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于Vant UI框架实现时间段选择器”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]