# Input 输入框 | tmagic-editor
页面可视化平台

Skip to content

# 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 | — | -