vue 时间控件实现

2026-02-18 17:20:45VUE

Vue 时间控件的实现方法

使用原生 HTML5 的 input 类型

HTML5 提供了原生时间选择控件，可以通过 <input type="time"> 或 <input type="datetime-local"> 实现基础功能。

<template>
  <div>
    <input type="time" v-model="timeValue" />
    <input type="datetime-local" v-model="datetimeValue" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeValue: '',
      datetimeValue: ''
    }
  }
}
</script>

使用 Element UI 的 DateTimePicker

Element UI 提供了功能丰富的时间日期选择器组件，适合需要更多定制化需求的场景。

vue 时间控件实现

<template>
  <div>
    <el-date-picker
      v-model="dateTime"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
  </div>
</template>

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

使用 Vuetify 的时间选择器

Vuetify 提供了美观且响应式的时间选择组件，适合 Material Design 风格的项目。

vue 时间控件实现

<template>
  <v-time-picker
    v-model="time"
    :allowed-minutes="allowedStep"
    format="24hr"
  ></v-time-picker>
</template>

<script>
export default {
  data() {
    return {
      time: null,
      allowedStep: m => m % 5 === 0
    }
  }
}
</script>

使用 vue-datepicker 独立组件

对于需要轻量级解决方案的项目，可以使用专门的 vue-datepicker 组件库。

<template>
  <datepicker v-model="date"></datepicker>
</template>

<script>
import Datepicker from 'vue-datepicker'

export default {
  components: {
    Datepicker
  },
  data() {
    return {
      date: new Date()
    }
  }
}
</script>

自定义时间选择组件

当有特殊需求时，可以创建自定义时间选择组件，结合下拉选择或滑动选择等方式。

<template>
  <div class="custom-time-picker">
    <select v-model="hours">
      <option v-for="h in 24" :value="h-1">{{ h-1 }}</option>
    </select>
    <span>:</span>
    <select v-model="minutes">
      <option v-for="m in 60" :value="m-1">{{ m-1 }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hours: 0,
      minutes: 0
    }
  },
  computed: {
    timeString() {
      return `${this.hours}:${this.minutes}`
    }
  }
}
</script>

每种方法都有其适用场景，选择时应考虑项目需求、UI 框架兼容性和功能复杂度。原生方案最简单但功能有限，UI 框架组件功能丰富但依赖特定框架，独立组件则提供了平衡的选择。