利用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 = null
let self_days_text=''
let self_hours=null
let 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 = days
self_days_text = days_text
self_hours = hours
self_seconds = seconds
}
const timestampToString =(nd)=>{
if(!nd) return
const 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.value
const 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=0
if(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 === 4
format = 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>
原文地址：https://blog.csdn.net/fangcaojushi/article/details/142737132
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！