一、组件简介

AppInput 的 timefield 类型的组件对 ant design <a-time-picker /> (opens new window) 组件的二次封装。

二、Props 参数

属性	说明	类型	可选值	默认值
columns	配置项	object		undefined
value	输入框内容	string		undefined
typeParams	类型参数	object		{}
size	控件大小，配置项中没有 size 属性时，使用此属性	string	large、default、small	small
reseal	是否要重新封装组件	boolean		false

2.1 columns 详细配置

属性	说明	类型	可选值	默认值
xtype	AppInput的类型	string		textfield
allowClear	是否允许点击清除图标删除内容	boolean		false
clearable	与 allowClear 功能相同 (优先取allowClear)	boolean		false
placeholder	占位符，提示文字	string		undefined
defaultValue	默认值	string	预设默认值	undefined
disabled	是否禁用(优先)	boolean, function(typeParams): boolean		false
readOnly	与 disabled 功能相同 (优先取disabled)	boolean		false
size	控件大小	string	large、default、small	small
disabledHours	禁止选择部分小时选项	function()
disabledMinutes	禁止选择部分分钟选项	function(selectedHour)
disabledSeconds	禁止选择部分秒选项	function(selectedHour, selectedMinute)
hideDisabledOptions	隐藏禁止选择的选项	boolean		false
hourStep	小时选项间隔	number		1
secondStep	秒选项间隔	number		1
format	展示的时间格式	string		HH:mm:ss

2.2 typeParams 说明

typeParams 译为类型参数，用来标记当前输入组件的类型，它是一个对象，可以为其传递任意属性，当值发生变化后，会将其按原样返回。

例如：

• 在表格中使用时，希望为其添加行记录 :typeParams="{ row }"
• 在表单中使用时，希望为其添加表单数据 :typeParams="{ formData }"

三、Events 事件

属性	说明	参数
valueChange	当数据改变后触发	{ columns: 列配置对象, value: 当前值, oldValue: 旧值 }

提示

• Events 事件中的方法均可挂载在配置项下
• 当需要重新封装组件（reseal 为 true）时，若挂载在配置项下，则无效

四、简单示例

<template>
  <app-input :value.sync="timefield" :columns="timefieldColumns" />
</template>

<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    timefield: undefined,
    timefieldColumns: {
      xtype: 'timefield'
      // format: 'HH:mm',
      // allowClear: false,
      // clearable: false,
      // defaultValue: '11:02:41',
      // disabled: true,
      // readOnly: true,
      // disabledHours: () => { return [1, 2, 3] },
      // disabledMinutes: () => { return [4, 5, 6] },
      // disabledSeconds: () => { return [7, 8, 9] },
      // hideDisabledOptions: true,
      // hourStep: 4,
      // minuteStep: 15,
      // secondStep: 10,
      // placeholder: '请选择时间',
    }
  }
}
</script>