Vue 时间选择器组件：使用 Element UI 实现

Vue 时间选择器组件：使用 Element UI 实现

Vue 时间选择器可以使用第三方组件库，例如 Element UI 或 Vuetify。以下是使用 Element UI 的示例：

1. 安装 Element UI

在终端中运行以下命令安装 Element UI。

npm install element-ui --save

2. 引入 Element UI

在 Vue 组件中引入 Element UI 库。

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

export default {
  name: 'MyComponent',
  components: {
    ElementUI
  }
}

3. 使用时间选择器

在 Vue 模板中使用 Element UI 的时间选择器组件。

<template>
  <div>
    <el-time-picker
      v-model='time'
      placeholder='选择时间'
      :picker-options='{ start: '08:30', step: '00:15', end: '18:30' }'
    ></el-time-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: ''
    };
  }
};
</script>

以上示例中的时间选择器具有以下特点：

• 只显示时间，不显示日期。
• 可以设置可选时间范围和时间间隔。
• v-model 绑定时间选择器的选择值。