vue 上下滑动选择小时
时间: 2023-06-29 14:18:41 浏览: 40
可以使用第三方的滑动选择组件来实现,在 Vue 中常用的有 vant、mint-ui 等组件库。下面是一个示例代码:
```html
<van-picker
:columns="hours"
title="选择小时"
@change="onHourChange"
>
<template #toolbar>
<van-toolbar>
<van-button text type="default" @click="hidePicker">取消</van-button>
<van-button text type="primary" @click="hidePicker">确认</van-button>
</van-toolbar>
</template>
</van-picker>
```
```js
export default {
data() {
return {
hours: Array.from({ length: 24 }, (_, i) => `${i}时`),
selectedHour: '',
showPicker: false,
}
},
methods: {
onHourChange(value) {
this.selectedHour = value[0]
},
showHourPicker() {
this.showPicker = true
},
hidePicker() {
this.showPicker = false
},
},
}
```
在这个例子中,我们使用了 vant 组件库中的 van-picker 组件来实现滑动选择小时。首先在 data 中定义了 hours 数组,表示可选的小时数;然后在模板中使用 van-picker 组件,并将 hours 绑定到 columns 属性上。当选择器的值发生变化时,@change 事件会触发 onHourChange 方法,我们可以在这里更新选中的小时数。同时,我们还为选择器添加了一个工具栏,里面包含了取消和确认按钮,点击这些按钮可以关闭选择器。
最后,我们在模板中使用 v-if 指令来控制选择器的显示与隐藏,通过调用 showHourPicker 和 hidePicker 方法来切换状态。