一、组件简介

AppInput 的 progressfield 类型的组件对 ant design <a-slider /> (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
defaultValue	默认值	number	预设默认值	undefined
disabled	是否禁用(优先)	boolean, function(typeParams): boolean		false
readOnly	与 disabled 功能相同 (优先取disabled)	boolean		false
maxValue	最大值	number, function(typeParams)		100
minValue	最小值	number, function(typeParams)		0
step	步长，取值必须大于 0，并且可被 (max - min) 整除	number	null	1
range	双滑块模式	boolean		false
reverse	反向坐标轴	boolean		false
vertical	是否为垂直方向	boolean		false
tooltipPlacement	设置 Tooltip 展示位置	string	top、left、right、bottom、topLeft、topRight、bottomLeft、bottomRight、leftTop、leftBottom、rightTop、rightBottom	top
tooltipVisible	是否始终显示tooltip	boolean		false

2.2 typeParams 说明

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

例如：

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

三、Events 事件

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

提示

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

四、简单示例

<template>
  <app-input :value.sync="progressfield" :columns="progressfieldColumns" :style="{ width: '151px' }" />
</template>

<script>
export default {
  name: '组件应有自己的名字，首字母大写，按目录使用驼峰命名',
  data () {
    progressfield: undefined,
    progressfieldColumns: {
      xtype: 'progressfield'
      // defaultValue: 10,
      // disabled: true,
      // readOnly: true,
      // maxValue: 100,
      // minValue: 0,
      // range: true,
      // reverse: true,
      // vertical: true,
      // tooltipPlacement: 'top',
      // tooltipVisible: true
    }
  }
}
</script>