TimeSelect 时间选择器控件

专门为配合表单组件c-form而设计，用于扩展c-time-picker组件。

使用时需要通过openTimePicker事件和c-time-picker组件绑定使用，详细用法请看下方示例。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
name	String		标识，事件中返回	All
modelValue	String		当前选中的值，格式00:00	All
max	String	null	最大时间，格式：00:00	All
min	String	null	最小值时间	All
placeholder	String	请选择	水印	All
placeholderColor	String	c-t-placeholder	水印颜色	All
title	String,Object		标题 object请c-text组件的pros	All
rightIcon	String,Boolean	arrow-right	显示右侧的箭头	All
iconProps	Object	{}	右侧图标配置	All
timerPickerProps	Object		c-timer-picker配置	All
textProps	Object	{}	文字配置 参考c-text组件的props	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
update:modelValue
openTimePicker	传递用于打开time-picker的props
change	value,res
closeTimePicker	{name}

插槽

插槽名	说明
before	前置
default	文本后面，icon图标前面
after	后置

组件依赖

本组件依赖c-calendar组件，使用前请先引入，并通过calendarSelectMixin进行绑定。

组合式Api：

<script setup>
import {useTimeSelect} from "../../uni_modules/cook-uni/components/c-time-select/timeSelectMixin";
const timePicker = ref(null);
const onTimePickerOpen = useTimeSelect(timePicker);
</script>

选项式Api：

<script>
    import timeSelectMixin from "../../uni_modules/cook-uni/components/c-time-select/timeSelectMixin";
    export default {
        mixins:[timeSelectMixin]
    }
</script>

绑定组件：

<c-time-select @openTimePicker="onTimePickerOpen" />

示例

<template>
    <c-form :model="formData">
        <c-form-item label="时间" prop="birthday">
            <!--使用组件-->
            <c-time-select v-model="formData.birthday" @openTimePicker="onTimePickerOpen" />
        </c-form-item>
    </c-form>

    <!--time-picker组件，必须-->
    <c-time-picker ref="timePicker" />
</template>
<script setup>
import {useTimeSelect} from "../../uni_modules/cook-uni/components/c-time-select/timeSelectMixin";

// 绑定time-picker组件
const timePicker = ref(null);
const onTimePickerOpen = useTimeSelect(timePicker);

const formData = {
    birthday:''
}
</script>