下拉时间选择器 - vue2-timepicker

2016-10-22      118      Vue
项目简介

Vue2时间选择器

下拉时间选择器(小时,分钟,秒),应用于Vue 2.x,有着灵活的事件格式支持。

依赖

Vue.js v2.0+

安装

通过NPM(推荐)

npm install vue2-timepicker --save

Bower

bower install vue2-timepicker --save

入门

步骤1:导入VueTimepicker

A:导入单文件组件(推荐)

// import
import VueTimepicker from 'vue2-timepicker'

// Or, require
var VueTimepicker = require('vue2-timepicker')

B:使用 <script>  和 <style>  导入配置文件

<script src="yourpath/vue/dist/vue.min.js"></script>
<script src="yourpath/vue2-timepicker/dist/vue2-timepicker.min.js"></script>

<link href="yourpath/vue2-timepicker/dist/vue2-timepicker.min.css" rel="stylesheet"></link>

注意:当使用dist文件时,需要一个Vue.use()调用

// Work with <script> block
Vue.use(window.VueTimepicker)

// Else
Vue.use(VueTimepicker)

步骤2:在你的组件中使用VueTimepicker

var yourComponent = new Vue({
  components: { VueTimepicker },
  ...
})

步骤3:然后,你可以组件模板上按照你的想法添加vue-timepicker

<vue-timepicker></vue-timepicker>

使用方法

基础使用方法

<!-- Default to 24-Hour format HH:mm -->
<vue-timepicker></vue-timepicker>

自定义事件格式

<!-- Show seconds picker -->
<vue-timepicker format="HH:mm:ss"></vue-timepicker>

<!-- 12-hour format, with AM/PM picker -->
<vue-timepicker format="hh:mm A"></vue-timepicker>

<!-- 12-hour format, with seconds picker and am/pm picker -->
<vue-timepicker format="hh:mm:ss a"></vue-timepicker>

自定义选择区间

<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->
<vue-timepicker :minute-interval="5"></vue-timepicker>

<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->
<vue-timepicker :second-interval="10"></vue-timepicker>

<!-- Bind interval config with your own data variable -->
<vue-timepicker :minute-interval="yourMinuteInterval"></vue-timepicker>

隐藏清除按钮

<vue-timepicker hide-clear-button></vue-timepicker>

使用v-model绑定值

// e.g. If you want to assign "10:05:00" as the initial value of vue-timepicker
var yourComponent = new Vue({
  components: { VueTimepicker },
  data: function () {
    return {
      yourTimeValue: {
        HH: "10",
        mm: "05",
        ss: "00"
      },
      ...
    }
  },
  ...
})
<!-- HTML -->
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>

获得时间选择器的当前值

方法1:从v-model读取值:

<!-- In the last section, we've set the initial value (yourTimeValue) to "10:05:00" -->
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>
// Then, open the dropdown picker and pick a new time.
// Like setting to "14:30:15" for example
// Check the value after that
console.log(this.yourTimeValue)
// outputs -> {HH: "14", mm: "30", ss: "15"}

方法2:添加@change事件处理

<!-- A: No argument -->
<vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler"></vue-timepicker>

<!-- B: Custom arguments -->
<vue-timepicker :time-value.sync="yourTimeValue" @change="otherChangeHandler($event, 'foo', 'bar')"></vue-timepicker>
// A: No argument
changeHandler (eventData) {
  console.log(eventData)
  // -> {data: {HH:..., mm:... }}
}

// B: Custom arguments
otherChangeHandler (eventData, yourArg1, yourArg2) {
  console.log(eventData)
  // -> {data: {HH:..., mm:... }}
  console.log(yourArg1)
  // -> 'foo'
  console.log(yourArg2)
  // -> 'bar'
}

不像v-model值返回你提供绑定变量中定义的时间变量,change事件将会返回所有支持的格式。

在上面的示例中,当选择器以HH:mm:ss格式设置为“14:30:15”时,change事件将会返回如下数据:

// `@change` event data
{
  HH: "14",
  H: "14",
  hh: "14",
  a: "am",
  A: "AM",
  h: "14",
  kk: "14",
  k: "14",
  m: "30",
  mm: "30",
  s: "15",
  ss: "15"
}

而v-model只返回数据定义的标记:

// Previously defined variable (`yourTimeValue` in this case) as {HH:..., mm:..., ss:...}
// Hence, the `v-model` returns:
{
  HH: "14",
  mm: "30",
  ss: "15"
}