vue 上下滑动选择小时
时间: 2023-06-29 07:18:40 浏览: 21
您可以使用 Vue.js 和一些现有的库来实现上下滑动选择小时的功能。其中,可以使用 vue-scroll-picker 库来实现上下滑动选择小时的效果。
该库提供了一个 ScrollPicker 组件,您可以将其集成到您的 Vue.js 应用程序中。您可以使用该组件来创建一个选择小时的滚动选择器,然后将其放置在您的页面上。
使用该库的示例代码如下所示:
```
<template>
<scroll-picker :options="hours" v-model="selectedHour"/>
</template>
<script>
import ScrollPicker from 'vue-scroll-picker'
export default {
components: {
ScrollPicker
},
data () {
return {
hours: [],
selectedHour: ''
}
},
mounted () {
for (let i = 0; i < 24; i++) {
this.hours.push({label: i.toString(), value: i})
}
}
}
</script>
```
在上面的代码中,我们首先导入了 vue-scroll-picker 库中的 ScrollPicker 组件。然后,我们在 Vue 实例中定义了一个用于存储小时选项和所选小时的 data 对象。在 mounted 生命周期钩子中,我们使用 for 循环生成一组小时选项,并将其添加到 hours 数组中。
最后,我们在模板中使用 ScrollPicker 组件来显示小时选择器,并将 hours 数组绑定到该组件的 options 属性上。我们还将 selectedHour 属性绑定到该组件的 v-model 属性上,以便在用户选择小时时更新所选属性。
这样,当用户在滚动选择器中选择小时时,selectedHour 属性将被更新为所选小时的值。