tmagic-editor/docs/form-config/fields/text.md

Input 输入框

通过鼠标或键盘输入字符

基础用法

<template #source>

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

禁用状态

<template #source>

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

复合型输入框

后置内容

<template #source>

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

<template #source>

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

过滤内容

<template #source>

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

表单校验

可通过 rules 配置校验规则。其中 typeMatch: true 会按字段 type（以及 filter / valueFormat 等）校验值是否合法，详见表单校验。

{
  name: 'text',
  text: '输入框',
  rules: [
    { required: true, message: '请输入' },
    { typeMatch: true, message: '值类型不合法' },
  ],
}

去掉首尾空格

<template #source>

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

显示详情

<template #source>

通过配置 tooltip，在输入时显示提示内容。

Input Attributes

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

::: details 查看 FilterFunction / OnChangeHandler / ToolTipConfigType 及关联类型定义 <<< @/../packages/form-schema/src/base.ts#FilterFunction{ts}

<<< @/../packages/form-schema/src/base.ts#OnChangeHandler{ts}

<<< @/../packages/form-schema/src/base.ts#OnChangeHandlerData{ts}

<<< @/../packages/form-schema/src/base.ts#ChangeRecord{ts}

<<< @/../packages/form-schema/src/base.ts#FormValue{ts}

<<< @/../packages/form-schema/src/base.ts#ToolTipConfigType{ts}

<<< @/../packages/form-schema/src/base.ts#Rule{ts} :::

配置类型

::: details 查看 TextConfig 配置类型定义 <<< @/../packages/form-schema/src/base.ts#TextConfig{ts}

<<< @/../packages/form-schema/src/base.ts#FormItem{ts}

<<< @/../packages/form-schema/src/base.ts#Input{ts}

:::

append Attributes

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