Input 输入框

通过鼠标或键盘输入字符

基础用法

Input输入框的type为'text', 是type的默认值，所以可以不配置

[
  {
    name: "text",
    text: "输入框"
  }
]

显示配置

禁用状态

通过 disabled 属性指定是否禁用 input 组件

[
  {
    name: "text",
    text: "输入框",
    disabled: () => true
  }
]

显示配置

复合型输入框

后置内容

可以通过配置append来增加一个后置内容。

[
  {
    name: "text",
    text: "重量",
    append: "公斤"
  }
]

显示配置

可以通过配置append来增加一个后置按钮。

[
  {
    name: "text",
    text: "输入框",
    append: {
      type: "button",
      text: "操作",
      handler: (vm) => {
          vm.$message(vm.mForm.values.text);
        }
    }
  }
]

显示配置

过滤内容

设置filter为'number'，可以将值转换成数值，也可以配置一个函数来自由转换。

[
  {
    name: "text",
    text: "输入框",
    filter: "number"
  }
]

显示配置

去掉首尾空格

设置trim为true'，可以去掉首尾空格。

[
  {
    name: "text",
    text: "输入框",
    trim: true
  }
]

显示配置

显示详情

在开启多选模式后，默认情况下会展示所有已选中的选项的Tag

[
  {
    name: "text",
    text: "输入框",
    tooltip: true
  }
]

显示配置

Input Attributes

参数	说明	类型	可选值	默认值
name	绑定值	string	—	—
placeholder	输入框占位文本	string	—	—
text	表单标签	string	—	—
disabled	是否禁用	boolean / FilterFunction	—	false
tooltip	输入时显示内容	boolean	—	false
placeholder	输入框占位文本	string	—	—
trim	是否去掉首尾空格	boolean	—	false
filter	过滤值	string / Function	number	-
onChange	值变化时触发的函数	OnChangeHandler	—	-
append	后置内容	string / Object	—	-

append Attributes

参数	说明	类型	可选值	默认值
type	内容类型	string	button	—
text	文本内容	string	—	—
handler	点击操作	Function	—	-