利用uniapp的picker封装预约时间的组件

实例图

知识点

picker多列选择器

1.mode为multiSelector多列选择器

2.@columnchange 某一列的改变

<picker v-if="multiArray.length>0" :style="{ backgroundColor: 'white', color: 'black' }"mode="multiSelector"@change="bindChange"@columnchange="bindMultiPickerColumnChange":value="multiIndex":range="multiArray"><input :disabled="true" placeholder-style="color:#bbbbbb" :placeholder="placeholder" :value="value_text" />
</picker>

vue3语法的props emit

1.props

defineProps先从vue中引入

const props = defineProps({timestamp: {type: Number,default: 0},
}）

2.emit

(1).defineEmits用于在setup中注册自定义事件，是一个宏函数，使用时无需导入

(2).defineEmits接受一个数组，元素为自定义事件名

const emit=defineEmits(['dtPickerChanged'])

(3).defineEmit返回一个触发器，用于触发事件，第一个参数是具体事件，第二个是传递的值

emit('dtPickerChanged',timeStamp)

父组件

子组件完整代码

<template><view class="uni-list-cell-db"><picker v-if="multiArray.length>0" :style="{ backgroundColor: 'white', color: 'black' }" mode="multiSelector" @change="bindChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray"><!-- <view class="uni-input">{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[0]]}}:{{multiArray[2][multiIndex[0]]}}</view> --><input :disabled="true" placeholder-style="color:#bbbbbb" :placeholder="placeholder":value="value_text" /></picker></view>
</template><script setup>import {ref,reactive,onBeforeMount,defineProps,toRaw,watch} from 'vue'const props = defineProps({timestamp: {type: Number,default: 0},emptyText: {type: String,default: ''},placeholder:{type: String,default:'请选择时间'}})// 多列选择器const multiArrayFull=ref([])const multiArray=ref([])let multiIndex=ref([0, 0, 0])const value_text = ref('')// 当前值let self_days = nulllet self_days_text=''let self_hours=nulllet self_seconds=null// 当前时间const now= new Date()const emit=defineEmits(['dtPickerChanged'])onBeforeMount(()=>{timestampToString(props.timestamp)buildMultiSelectData()})// 构建多列选择器的数据const buildMultiSelectData=()=>{const days = []const days_text = []// 最近20天			// 利用自动格式化函数来格式化日期的for(let i=1; i<20; i++){const date = now.getTime() + i * 24 * 60 * 60 * 1000;// const mmdd = formatDateAuto(date, 'MM-dd').replace('-','月')const mmdd = formatDateAuto(date, 'MM-dd')const yymmdd = formatDateAuto(date, 'yyyy-MM-dd')let day_text= ''if(i == 0){day_text += ' (今天)';}if(i == 1){day_text += ' (明天)';}if(i == 2){day_text += ' (后天)';}// const formattedDate = `${mmdd}日${day_text}`;const formattedDate = `${mmdd}${day_text}`;days_text.push(formattedDate)days.push(yymmdd)}const hours = ['00', '01','02', '03', '04','05','06','07', '08', '09', '10','11', '12','13', '14','15','16','17','18','19','20','21','22','23']const seconds =['00', '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', '32','33', '34','35','36','37','38','39','40','41', '42','43', '44','45','46','47','48','49','50','51', '52','53', '54','55','56','57','58','59']const range =[];range[0]= days_text;range[1]= hours;range[2]= seconds;console.log(range,"range")multiArrayFull.value = [days,hours,seconds]multiArray.value = range// value_text.value =`${days_text[0]} ${hours[8]}:${seconds[0]}`// 当前数组self_days = daysself_days_text = days_textself_hours = hoursself_seconds = seconds}const timestampToString =(nd)=>{if(!nd) returnconst date_text = formatDateAuto(nd, 'MM-dd HH:mm');value_text.value = date_text}const bindMultiPickerColumnChange=(evt)=>{// console.log('多列选择器列选项evt=',evt)}const bindChange=(evt)=>{// console.log('选择器evt=',evt)// 选择后多选择索引的值multiIndex.value=evt.detail.valueconst indexArr = toRaw(multiIndex.value)const multiArr = toRaw(multiArray.value)value_text.value=`${multiArr[0][indexArr[0]]} ${multiArr[1][indexArr[1]]}:${multiArr[2][indexArr[2]]}`// 返回父const fullArr= toRaw(multiArrayFull.value)let  datetime =''if(fullArr[0][indexArr[0]]){datetime= `${fullArr[0][indexArr[0]]} ${fullArr[1][indexArr[1]]}:${fullArr[2][indexArr[2]]}`}let timeStamp=0if(datetime){// 获取时间戳timeStamp=new Date(datetime.replace(/-/g,'/')).getTime()console.log('日期=',datetime,'时间戳=',timeStamp)}emit('dtPickerChanged',timeStamp)}watch(props.timestamp,(nd)=>{timestampToString(nd)},{ immediate: true })const formatDateAuto=(dt, format = 'yyyy-MM-dd HH:mm:ss')=> { let date = new Date(dt);let year = date.getFullYear();  let month = String(date.getMonth() + 1).padStart(2, '0');  let day = String(date.getDate()).padStart(2, '0');  let hour = String(date.getHours()).padStart(2, '0');  let minute = String(date.getMinutes()).padStart(2, '0');  let second = String(date.getSeconds()).padStart(2, '0');  let obj = {  'M+': month, // 月份  'd+': day, // 日  'h+': hour, // 小时  'm+': minute, // 分  's+': second, // 秒  // 'yyyy': year, // 年份  'MM': month,  'dd': day,  'HH': hour,  'mm': minute,  'ss': second  };  if(/(y+)/i.test(format)){format=format.replace(RegExp.$1,(date.getFullYear()+'').substr(4 - RegExp.$1.length))}for (let k in obj) {  if (new RegExp(`(${k})`).test(format)) {  // || RegExp.$1.length === 4format = format.replace(RegExp.$1, (RegExp.$1.length === 1 ) ? (obj[k]) : (('00' + obj[k]).substr(('' + obj[k]).length)));  }  } return format;  }  </script><style scoped>/* 设置 Picker 组件的背景颜色和文本颜色 */.picker {background-color: white; /* 背景色设置为白色 */color: black; /* 文字颜色设置为黑色 */}
</style>