在uniapp中,点击u-input组件picker出现,再选择picker中的时间,时间出现在picker中
时间: 2023-06-27 21:02:08 浏览: 38
要实现这个功能,你可以使用uniapp的u-picker组件来实现。具体步骤如下:
1. 在页面中引入u-picker组件:
```html
<template>
<view>
<u-picker :mode="mode" :value="value" @change="onChange"></u-picker>
</view>
</template>
<script>
import uPicker from '@/components/u-picker/u-picker.vue'
export default {
components: {
uPicker
},
data() {
return {
mode: 'time', // picker的类型为时间
value: '12:00' // 初始化picker的值为'12:00'
}
},
methods: {
onChange(e) {
console.log('onChange', e)
this.value = e.detail.value // 将选择的时间赋值给value
}
}
}
</script>
```
2. 在u-picker组件中设置mode为'time',表示选择器类型为时间。
3. 设置value为当前时间,即初始化picker的值。
4. 监听picker的change事件,在回调函数中将选择的时间赋值给value。
这样,当用户点击u-input组件,picker弹出后选择时间,选择的时间就会显示在picker中。