一、组件简介

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

二、Props 参数

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

2.1 columns 详细配置

属性	说明	类型	可选值	默认值
xtype	AppInput的类型	string		'textfield'
defaultValue	默认值	string	预设默认值	undefined
disabled	是否禁用(优先)	boolean, function(typeParams): boolean		false
readOnly	与 disabled 功能相同 (优先取disabled)	boolean		false
size	控件大小	string	large、default、small	small
formatter	指定输入框展示值的格式	function(value: number｜string): string
parser	指定从 formatter 里转换回数字的方式，和 formatter 搭配使用	function( string): number
symbol	数值符号(输入内容前的符号)	string		undefined
maxValue	最大值	number, function(typeParams)		Infinity
minValue	最小值	number, function(typeParams)		Infinity
step	每次改变步数，可以为小数	number、string		1
precision	数值精度	number
precisionRange	数值精度范围, [最小值，最大值]	array

2.2 typeParams 说明

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

例如：

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

三、Events 事件

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

提示

• Events 事件中的方法均可挂载在配置项下
• 当 reseal 为 true 时，若挂载在配置项下，则无效

四、简单示例

<template>
  <app-input :value.sync="password" :columns="passwordColumns" />
</template>

<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    numberfield: undefined,
    numberfieldColumns: {
      xtype: 'numberfield'
      // allowClear: true,
      // clearable: true,
      // placeholder: '占位符',
      // defaultValue: '默认值',
      // disabled: true,
      // readOnly: true,
      // size: 'small',
      // formatter: value => `${value}%`,
      // parser: value => value.replace('%', ''),
      // symbol: '$',
      // maxValue: 9,
      // minValue: 1,
      // step: 2,
      // precision: 6,
      // precisionRange: [2, 6],
      // valueChange: ({ value }) => {
      //   console.log(value)
      // }
    }
  }
}
</script>