幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了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:注意红色划掉的没有实现
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...