iview timepicker

iView的TimePicker组件可以用来选择时间。它提供了多种时间格式和选项，可以满足不同需求的时间选择。以下是使用iView TimePicker组件的步骤：

1. 安装iView

npm install iview --save

2. 引入iView组件和样式

<template>
  <div>
    <TimePicker v-model="time" :format="'HH:mm'" :steps="[1, 5, 10]" :placement="'bottom-end'"></TimePicker>
  </div>
</template>

<script>
  import { TimePicker } from 'iview'
  import 'iview/dist/styles/iview.css'

  export default {
    components: {
      TimePicker
    },
    data() {
      return {
        time: ''
      }
    }
  }
</script>

在上面的代码中，我们首先引入了iView的TimePicker组件和样式。然后，在模板中，我们使用了TimePicker组件，并绑定了一个v-model来获取用户选择的时间。我们还设置了时间格式为“HH:mm”，时间步长为1、5、10分钟，以及弹出框的位置为底部右侧。

3. 使用TimePicker组件

现在，我们可以在Vue组件中使用iView的TimePicker组件了。当用户选择一个时间时，它会自动更新绑定的时间数据。

<template>
  <div>
    <TimePicker v-model="time" :format="'HH:mm'" :steps="[1, 5, 10]" :placement="'bottom-end'"></TimePicker>
    <p>你选择的时间是: {{time}}</p>
  </div>
</template>

<script>
  import { TimePicker } from 'iview'
  import 'iview/dist/styles/iview.css'

  export default {
    components: {
      TimePicker
    },
    data() {
      return {
        time: ''
      }
    }
  }
</script>

在上面的代码中，我们添加了一个段落，用于显示用户选择的时间。我们使用了双括号语法来显示时间数据。

这就是使用iView TimePicker组件的基本步骤。你可以根据自己的需求调整时间格式、步长、弹出框位置等选项。