Vue2 cube-ui时间选择器详解

概述

Cube-UI是基于Vue.js的组件库，其中包含了丰富的UI组件，提高了开发效率。其中，时间选择器是其中一个常用组件之一，本文将详解如何使用Cube-UI的时间选择器组件。

安装

要使用Cube-UI的时间选择器，我们需要先安装Cube-UI。使用npm安装：

npm install cube-ui -S

使用

安装完cube-ui后，在Vue项目中引入cube-ui:

import Vue from 'vue'
import Cube from 'cube-ui'

Vue.use(Cube)

然后，我们就可以在Vue组件中使用时间选择器组件了。

<cube-datetime-picker></cube-datetime-picker>

这样我们就可以看到一个默认的时间选择器组件了。

属性

时间选择器有很多属性可以设置，例如：类型、格式、最大最小值等。下面介绍一些常用的属性：

type

时间选择器可以选择不同的类型，共有三种类型："date"、"time"、"datetime"。默认为"date"。

<cube-datetime-picker type="time"></cube-datetime-picker>

format

时间选择器的格式可以自定义。默认格式为："YYYY-MM-DD"。

<cube-datetime-picker format="YYYY/DD/MM"></cube-datetime-picker>

minDate/maxDate

可以设置时间选择器的最小值和最大值。默认值为Undefined，即不做限制。

<cube-datetime-picker :min-date="new Date('2020-01-01')" :max-date="new Date('2020-12-31')"></cube-datetime-picker>

use12hour

是否使用12小时制显示，默认为false。

<cube-datetime-picker :use-12hour="true"></cube-datetime-picker>

事件

时间选择器还有一些事件可以使用。例如，选择时间或者取消选择等等。

<cube-datetime-picker
  @change="onChange"
  @cancel="onCancel"
>
</cube-datetime-picker>

methods: {
  onChange(date) {
    console.log(date)
  },
  onCancel() {
    console.log('cancel')
  }
}

示例说明

下面举两个使用CubeUI时间选择器的示例：

示例1：设置日期范围选择

<template>
  <cube-datetime-picker
    :min-date="minDate"
    :max-date="maxDate"
    @change="onChange"
  >
  </cube-datetime-picker>
</template>

<script>
export default {
  data() {
    return {
      minDate: new Date(2021, 1, 1),
      maxDate: new Date(2021, 1, 31),
    }
  },
  methods: {
    onChange(date) {
      console.log(date)
    },
  },
}
</script>

示例2：选择12小时制

<template>
  <cube-datetime-picker
    :use-12hour="true"
    @change="onChange"
  >
  </cube-datetime-picker>
</template>

<script>
export default {
  methods: {
    onChange(date) {
      console.log(date)
    },
  },
}
</script>

在这个示例中，我们设置了时间选择器的属性use-12hour为true，表示使用12小时制来显示时间。

结语

时间选择器是一个非常常用的组件，使用Cube-UI的时间选择器可以快速构建一个漂亮的时间选择器。当然，本文只是对时间选择器的基础使用做了一个简单的讲解，如果需要更多的属性和事件，请查看官方文档或者源码。