vue 上下滑动选择小时
时间: 2023-09-26 11:06:56 浏览: 19
你可以使用第三方的滑动选择组件来实现这个需求,比如 `vue-scroll-picker` 或者 `vue-picker-component`。这些组件提供了类似于原生选择器的用户界面,用户可以通过滑动选择小时,并将选择的值传递给你的应用程序。你可以根据自己的需求选择合适的组件,并按照组件的文档进行使用。下面是一个简单的示例代码:
```html
<template>
<div>
<picker :data="hours" v-model="selectedHour" />
</div>
</template>
<script>
import Picker from 'vue-picker-component';
export default {
components: {
Picker,
},
data() {
return {
hours: [
{ label: '00', value: 0 },
{ label: '01', value: 1 },
{ label: '02', value: 2 },
{ label: '03', value: 3 },
// 省略其它小时选项
{ label: '23', value: 23 },
],
selectedHour: null,
};
},
};
</script>
```
在上面的代码中,我们使用了 `vue-picker-component` 组件来实现小时的选择功能。通过将 `data` 属性设置为一个包含所有小时选项的数组,我们可以让用户通过滑动来选择小时。选中的小时会被绑定到 `selectedHour` 变量上,你可以在适当的时候使用该变量的值来完成你的业务逻辑。