vue2实现滑动时间选择器效果

要实现滑动时间选择器效果，可以使用第三方组件库，比如element-ui或者vant-ui。以下是使用element-ui的示例代码：

1. 安装element-ui

npm install element-ui --save

2. 在main.js中引入element-ui

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在组件中使用el-time-picker组件

<template>
  <div>
    <el-time-picker
      v-model="time"
      :picker-options="pickerOptions"
      placeholder="选择时间"
      :format="format"
      :clearable="false"
      :readonly="true"
      :editable="false"
      :arrow-control="false"
    ></el-time-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: '',
      pickerOptions: {
        start: '00:00',
        step: '00:30',
        end: '23:30'
      },
      format: 'HH:mm'
    }
  }
}
</script>

以上代码中，el-time-picker是element-ui中的时间选择器组件，参数说明如下：

- v-model: 绑定的时间值
- picker-options: 选择器选项，比如开始时间、结束时间、步长等
- placeholder: 未选择时间时的提示文字
- format: 时间格式
- clearable: 是否显示清除按钮
- readonly: 是否只读
- editable: 是否可编辑
- arrow-control: 是否显示箭头控制按钮

通过设置picker-options可以实现滑动选择时间的效果，其中start、end和step分别表示可选时间的起始值、结束值和步长，这里设置步长为30分钟。format指定时间的格式为HH:mm，即小时:分钟。

这样就可以实现滑动时间选择器的效果了。