Vue DevUI
主题

TimeSelect 组件

时间选择器。

何时使用

提供几个固定的时间点供用户选择

基本用法

basic
step
disabled
不可清除
<template>
  <div>
    <div class="mb-0">basic</div>
    <d-time-select class="mb-2" v-model="time00" />

    <div class="mb-0">step</div>
    <d-time-select class="mb-2" v-model="time01" step="00:10" />

    <div class="mb-0">disabled</div>
    <d-time-select class="mb-2" v-model="time02" disabled />
    
    <div class="mb-0">不可清除</div>
    <d-time-select class="mb-2" v-model="time03" :clearable="false" />
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';
export default defineComponent({
  setup(props, ctx) {
    let time00 = ref('');
    let time01 = ref('');
    let time02 = ref('09:30');
    let time03 = ref('09:30');
    return {
      time00,
      time01,
      time02,
      time03,
    };
  },
});
</script>

<style>
.my-10 {
  margin: 10px 0px;
}
</style>

尺寸

lg
md
sm
<template>
  <div>
    <div class="mb-0">lg</div>
    <d-time-select class="mb-2" v-model="time05" size="lg" placeholder="间隔为1小时" step="01:00" />
    
    <div class="mb-0">md</div>
    <d-time-select class="mb-2" v-model="time05" size="md" placeholder="间隔为30分钟" step="00:30" />
    
    <div class="mb-0">sm</div>
    <d-time-select class="mb-2" v-model="time05" size="sm" placeholder="间隔为1分钟" step="00:01" />
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';
export default defineComponent({
  setup(props, ctx) {
    let time00 = ref('');
    let time01 = ref('');
    let time02 = ref('');
    return {
      time00,
      time01,
      time02,
    };
  },
});
</script>

<style>
.my-10 {
  margin: 10px 0px;
}
</style>

时间段

min-time、max-time
start、end
min-time、max-time、start、end
固定时间范围
<template>
  <div>
    <div class="mb-0">min-time、max-time</div>
    <d-time-select class="mb-2" v-model="time01" min-time="02:20" max-time="18:30" placeholder="控制时间的可选范围" />

    <div class="mb-0">start、end</div>
    <d-time-select class="mb-2" v-model="time02" start="09:00" end="18:30" placeholder="控制时间的显示范围" />

    <div class="mb-0">min-time、max-time、start、end</div>
    <d-time-select class="mb-2" v-model="time03" min-time="09:30" max-time="18:30" start="09:00" end="16:30" />

    <div class="mb-0">固定时间范围</div>
    <div>
      <d-row :gutter="5">
        <d-col>
          <d-time-select v-model="startTime" />
        </d-col>
        <d-col>
          <d-time-select v-model="endTime" :min-time="startTime" />
        </d-col>
      </d-row>
  </div>
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';
export default defineComponent({
  setup(props, ctx) {
    let time01 = ref('');
    let time02 = ref('');
    let time03 = ref('09:30');
    let startTime = ref('');
    let endTime = ref('');
    return {
      time01,
      time02,
      time03,
      startTime,
      endTime,
    };
  },
});
</script>

<style>
.my-10 {
  margin: 10px 0px;
}
</style>

事件

selectedTimeChange
<template>
  <div>
    <div class="mb-0">selectedTimeChange</div>
    <d-time-select v-model="timeData01" @change="selectedTimeChange" @focus="focusFun" @blur="blurFun" />
  </div>
</template>

<script>
import { ref, defineComponent, nextTick } from 'vue';

export default defineComponent({
  setup(props, ctx) {
    let timeData01 = ref('00:30');

    // 返回选中的时间
    const selectedTimeChange = (time) => {
      console.log(time);
    };
    const focusFun = (e) => {
      console.log(e);
    };
    const blurFun = (e) => {
      console.log(e);
    };

    return {
      selectedTimeChange,
      timeData01,
      focusFun,
      blurFun,
    };
  },
});
</script>

TimeSelect 参数

参数类型默认说明跳转 Demo
v-modelstring--选中项绑定值基本用法
disabledbooleanfalse禁用状态基本用法
sizeITimeSelectmd输入框尺寸尺寸
placeholderstring'请选择时间'占位内容占位内容
min-timestring'00:00'可选，最早时间点，早于该值的时间段将被禁用时间段
max-timestring'24:00'可选，最晚时间点，晚于该值的时间段将被禁用时间段
startstring'00:00'可选，开始时间时间段
endstring'24:00'可选，结束时间时间段
stepstring'00:30'可选，间隔时间基本用法
clearablebooleantrue可选，是否可清除基本用法
show-glow-stylebooleantrue可选，是否展示悬浮发光效果

TimeSelect 事件

事件说明跳转 Demo
change可选，选定数据时触发基本用法

TimeSelect 类型定义

ITimeSelect 

type ITimeSelect = 'lg' | 'md' | 'sm';
Contributors
粤A2-20044005号