Time Picker 时间选择器

type : 'time-picker'

时间选择器，用于选择时、分、秒。

代码演示

<template>
    <x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({});

const formOptions = ref([
    {
        type: 'time-picker',
        label: '时分秒',
        name: 'val1',
        attrs:{
             minTime: '09:40:10',
            maxTime: '20:20:50',
            'visible-option-num':4,
            formatter: (type, option) => {
                if (type === 'hour') {
                    option.text += '时';
                }
                if (type === 'minute') {
                    option.text += '分';
                }
                if (type === 'second') {
                    option.text += '秒';
                }
                return option;
            },
            filter: (type, options) => {
                if (type === 'minute') {
                    return options.filter((option) => Number(option.value) % 10 === 0);
                }
                return options;
            }
        }
    },
    {
        type: 'time-picker',
        label: '时分',
        name: 'val2',
        attrs: {
            'columnsType': ['hour', 'minute']
        }
    },
    {
        type: 'time-picker',
        label: '秒',
        name: 'val3',
        attrs: {
            'columnsType': ['second']
        }
    },
]);
</script>
<style lang="scss" scoped></style>

基础用法

进阶用法

<template>
    <x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({});

const formOptions = ref([
    {
        type: 'time-picker',
        label: '设置可选范围',
        name: 'val1',
        attrs:{
             minTime: '09:40:10',
            maxTime: '20:20:50',
            'visible-option-num':4,
        }
    },
    {
        type: 'time-picker',
        label: '格式化选项',
        name: 'val2',
        attrs: {
            formatter: (type, option) => {
                if (type === 'hour') {
                    option.text += '时';
                }
                if (type === 'minute') {
                    option.text += '分';
                }
                if (type === 'second') {
                    option.text += '秒';
                }
                return option;
            },
        }
    },
    {
        type: 'time-picker',
        label: '过滤器',
        name: 'val3',
        attrs: {
            filter: (type, options) => {
                if (type === 'minute') {
                    return options.filter((option) => Number(option.value) % 10 === 0);
                }
                return options;
            }
        }
    },
]);
</script>
<style lang="scss" scoped></style>

进阶用法

API

Props

与官方组件 time-picker 参数保持一致，这里以展示新增属性配置为主，具体配置参见官方文档。

Events