一、组件简介

AppInput 的 datetimefield 类型的组件对 ant design <a-date-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
disabledDate	不可选择的日期	(currentDate: moment, typeParams) => boolean		undefined
format	展示的日期格式	string		YYYY-MM-DD HH:mm:ss
separator	设置分隔符	string		~
disabledTime	不可选择的时间	(currentDate: moment, typeParams) => boolean		undefined

2.2 typeParams 说明

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

例如：

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

三、Events 事件

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

提示

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

四、简单示例

<template>
  <app-input :value.sync="datetimefield" :columns="datetimefieldColumns" />
</template>

<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    datetimefield: undefined,
    datetimefieldColumns: {
      xtype: 'datetimefield'
      // format: 'YYYY-MM-DD HH:mm',
      // allowClear: false,
      // clearable: false,
      // defaultValue: '2022-06-06 15:45:00',
      // disabled: true,
      // readOnly: true,
      // disabledDate: (current) => {
      //   // Can not select days before today and today
      //   return current && current < moment().endOf('day')
      // },
      // disabledTime: (date) => {
      //   debugger
      //   return {
      //     disabledHours: () => [1, 2, 3],
      //     disabledMinutes: () => [4, 5, 6],
      //     disabledSeconds: () => [7, 8, 9]
      //   }
      // },
      // placeholder: '请选择日期时间',
      // size: 'small',
      // valueChange: ({ date, value }) => {
      //   console.log(date, value)
      // }
    }
  }
}
</script>