一、组件简介

AppInput 的 iconselect 类型的组件对 vxe-table <vxe-pulldown> (opens new window)、ant design <a-input /> (opens new window)、 ant design <a-icon /> (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

2.2 typeParams 说明

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

例如：

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

三、Events 事件

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

提示

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

四、简单示例

<template>
  <app-input :value.sync="iconselect" :columns="iconselectColumns" />
</template>
<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    iconselect: undefined,
    iconselectColumns: {
      xtype: 'iconselect'
      // allowClear: true,
      // clearable: true,
      // placeholder: '占位符',
      // defaultValue: '默认值',
      // disabled: true,
      // readOnly: true,
      // size: 'small',
      // valueChange: ({ value }) => {
      //   console.log(value)
      // }
    }
  }
}
</script>