cloud-ui.vusion

# UTimePicker 时间选择 - [示例](#示例) - [基本用法](#基本用法) - [隐藏底部按钮](#隐藏底部按钮) - [自定义底部文案](#自定义底部文案) - [只读和禁用](#只读和禁用) - [日期范围](#日期范围) - [日期最小单位](#日期最小单位) - [方法](#方法) - [范围选择](#范围选择) - [范围选择分钟](#范围选择分钟) - [API]() - [Props/Attrs](#propsattrs) - [Events](#events) **Selector** 时间选择 ## 示例 ### 基本用法 ``` html <u-time-picker time="15:46:33"></u-time-picker> ``` ### 隐藏底部按钮 ```html <u-linear-layout> <u-time-picker time="15:46:33" :showFooterButton=false></u-time-picker> <u-time-picker time="15:46:33" :showRightNowButton=false></u-time-picker> <u-time-picker time="15:46:33" :showRightNowButton=false :showFooterButton=false></u-time-picker> </u-linear-layout> ``` ### 自定义底部文案 ```html <u-linear-layout> <u-time-picker cancelTitle="取" okTitle="确" rightNowTitle="此" ></u-time-picker> </u-linear-layout> ``` ### 只读和禁用 ``` html <u-linear-layout> <u-time-picker time="15:46:33" readonly="readonly"></u-time-picker> <u-time-picker time="15:46:33" disabled="disabled"></u-time-picker> </u-linear-layout> ``` ### 日期范围 ``` html <u-time-picker time="15:46:33" min-time="12:30:00" max-time="14:45:00"></u-time-picker> ``` ### 日期最小单位 ``` vue <template> <u-time-picker minUnit="minute" min-time="12:30" max-time="14:45" :time="time" @change="change($event.time)"></u-time-picker> </template> <script> export default { data() { return { time: '13:12', }; }, methods: { change(time) { this.time = time; console.log(time); }, }, }; </script> ``` ### 方法 ``` vue <template> <u-time-picker :time="time" @change="change($event.time)"></u-time-picker> </template> <script> export default { data() { return { time: '20:12:12', }; }, methods: { change(time) { this.time = time; console.log(time); }, }, }; </script> ``` ### 范围选择 ``` html <u-time-picker range startTime="12:46:33" endTime="18:18:33" min-time="12:30:00" max-time="21:45:15"> </u-time-picker> ``` ### 范围选择分钟 ``` html <u-time-picker range startTime="12:46" endTime="18:18" min-time="12:30:00" max-time="21:45:15" min-unit="minute"> </u-time-picker> ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | minUnit | string | `[object Object]`<br/>`[object Object]` | `'second'` | 最小时间单位 | | range | boolean | | `false` | 是否支持进行时间区间选择，关闭则为时间点选择 | | placeholder | string | | `'请选择时间'` | 为空时显示的占位符文本 | | placeholderRight | string | | | 为空时显示的占位符文本（右侧） | | value.sync, v-model | string | | `''` | 默认显示的时间值，格式如08:08:08 | | startTime.sync | string | | | 默认显示的起始时间值，格式如08:08:08 | | endTime.sync | string | | | 默认显示的结束时间值，格式如08:08:08 | | min-time | string | | `'00:00:00'` | 最小可选的时间值，填写null则不限制，日期填写格式为“00:00:00” | | max-time | string | | `'23:59:59'` | 最大可选的时间值，填写null则不限制，日期填写格式为“00:00:00” | | show-formatter | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]` | | | | advanced-format | { enable: boolean, value: string } | | `'{ enable: false, value: '' }'` | | | autofocus | boolean | | `false` | 设置是否自动获取焦点 | | showRightNowButton | boolean | | `true` | 点击可快捷选择当前时间 | | rightNowTitle | string | | `''` | | | showFooterButton | boolean | | `true` | 控制弹出层的关闭和设置的生效与否 | | cancelTitle | string | | `''` | | | okTitle | string | | `''` | 确定按钮的显示名称，如果为空则不显示 | | preIcon | string | `[object Object]` | `'time'` | | | suffixIcon | string | `[object Object]` | | | | append-to | string | `[object Object]`<br/>`[object Object]` | `'body'` | 设置弹出层依据哪个元素定位位置，可选值：`'body'`表示添加到 document.body，`'reference'`表示添加到参考元素中。 | | clearable | boolean | | `true` | 可点击清除按钮一键清除内容 | | readonly | boolean | | `false` | 正常显示，但禁止选择/输入 | | disabled | boolean | | `false` | 置灰显示，且禁止任何交互（焦点、点击、选择、输入等） | | visible | boolean | | `true` | 显示状态分为“True(打开)/False(关闭)”，默认为“打开” | | width | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]` | `'normal'` | 设置时间选择输入框宽度大小 | | height | string | `[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]`<br/>`[object Object]` | `'normal'` | 设置时间选择输入框高度大小 | ### Events #### @change 时间改变时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | time | object | 改变后的时间 | #### @blur 失去焦点时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | FocusEvent | 原生事件对象 | | senderVM | | 发送事件实例 |