Fes Design

TimePicker 时间选择 ​

时间选择组件

组件注册 ​

js
import { FTimePicker } from '@fesjs/fes-design';

app.use(FTimePicker);

代码演示 ​

基础用法 ​

play
<template>
    <FSpace vertical>
        <FTimePicker
            style="width: 200px"
            modelValue="22:22:22"
            placeholder="请输入"
        />
    </FSpace>
</template>

自定义下方控制区域 ​

play
<template>
    <FSpace vertical>
        <FTimePicker
            v-model="currentTime"
            v-model:open="isOpen"
            class="time-picker"
            placeholder="请输入"
        >
            <template #addon="slotProps">
                <div style="text-align: right; padding: 8px 12px">
                    <FButton
                        type="primary"
                        size="small"
                        @click="confirm(slotProps.activeTime)"
                    >
                        happy时刻
                    </FButton>
                </div>
            </template>
        </FTimePicker>
    </FSpace>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const currentTime = ref();
        const isOpen = ref(false);
        const confirm = (activeTime) => {
            console.log('[timePicker.addon] [confirm] activeTime:', activeTime);
            currentTime.value = activeTime;
            isOpen.value = false;
        };
        return {
            currentTime,
            isOpen,
            confirm,
        };
    },
};
</script>

<style>
.time-picker {
    width: 200px;
}
</style>

不带确定按钮 ​

play
<template>
    <FSpace vertical>
        <FTimePicker
            v-model="time"
            placeholder="请输入"
            :disabledHours="disabledHours"
            :control="false"
        />
    </FSpace>
</template>

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

export default {
    setup() {
        const time = ref('22:22:22');
        const disabledHours = (hour) => {
            return hour === 1;
        };
        watch(time, () => {
            console.log('[timePicker.control] [watch] time.value:', time.value);
        });
        return {
            time,
            disabledHours,
        };
    },
};
</script>

禁用 ​

play
<template>
    <FSpace vertical>
        <FTimePicker placeholder="请输入" disabled />
        <FTimePicker modelValue="23:00:00" disabled />
    </FSpace>
</template>

格式 ​

play
<template>
    <FSpace vertical>
        <FTimePicker placeholder="请输入" format="HH:mm" />
    </FSpace>
</template>

Props ​

属性说明类型默认值
modelValue日期的值，可以使用 v-model 实现数据的双向绑定string-
open面版是否打开，可以使用 v-model:open 实现数据的双向绑定booleanfalse
appendToContainer弹窗内容是否添加到指定的 DOM 元素booleantrue
disabled禁用booleanfalse
clearable是否展示清除按钮booleantrue
placeholder占位内容，数组仅用于范围选择时自定义开始和结束的占位内容string-
format时间格式stringHH:mm:ss
hourStep小时选项间隔number1
minuteStep分钟选项间隔number1
secondStep秒钟选项间隔number1
disabledHours禁止选择部分小时选项(hour: number) => boolean-
disabledMinutes禁止选择部分分钟选项(hour: number, minute: number) => boolean-
disabledSeconds禁止选择部分秒钟选项(hour: number, minute: number, second: number) => boolean-
control是否显示下方控制区域booleantrue
getContainer指定下拉选项挂载的 HTML 节点() => HTMLElement() => document.body

Slots ​

属性说明
addon选择框底部显示自定义的内容

Events ​

事件名称说明回调参数
change用户确认选定的值时触发组件绑定值
blur失去焦点时触发事件
focus获取焦点时触发事件