文本输入-桌面端|飞书低代码平台

文本输入-桌面端|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
适用场景
textInput,用于单行内容的输入。
使用说明
区域
说明
示意图
内容区
  • 默认值
  • 文本输入的默认值类型是string
  • 默认值会在组件初始化、重置、以及依赖的变量发生变化后生效
  • 占位符
  • 占位符属性的类型是string
  • 效果如下:
250px|700px|reset
  • 拓展
  • 标题
250px|700px|reset
  • 前缀文本
  • 后缀文本
  • 前缀图标
  • 后缀图标
250px|700px|reset
内容区示意图
250px|700px|reset
交互区
  • form data key
  • 表单内的输入类组件配置了「form data key」后,表单可获取到该组件的值。
比如,文本输入组件的「form data key」配置为"first_name",表单的data信息中会包含"first_name",并且其值为该文本输入组件的值,可以通过{ { form.data.first_name } }消费该组件的值
  • 同一个表单内有多个相同「form data key」时,均不会生效
  • 事件
  • 文本输入支持4种事件:「值改变时」、「聚焦时」、「失焦时」、「按下回车时」
  • 校验
  • 校验时机:聚焦时、值改变时、表单提交时(如在表单内)
  • 校验内容:
  • 必填
  • 最大长度
  • 最小长度
  • 格式校验
  • 自定义校验规则
  • 可以通过js表达自定义文本输入的校验规则
示例:{ {self.value === 'test' ? 'error': '' } }
  • 只读
  • boolean类型
  • 效果
250px|700px|reset
  • 禁用
  • boolean类型
  • 效果
250px|700px|reset
  • 加载中
  • boolean类型
  • 效果
250px|700px|reset
250px|700px|reset
外观区
  • 清空按钮
  • 当文本输入组件的值不为空的时候,会出现清空按钮,支持一键清空文本输入组件的值
250px|700px|reset
  • 字数统计
250px|700px|reset
  • 隐藏
  • boolean类型,控制输入组件是否在页面上隐藏
250px|700px|reset
属性API
属性
类型
默认值
描述
label
object
{
textContent:"标题",
tooltipText:"",
wrapping:false,
layout:"top",
align:"left",
width:4,
unit:"col"
}
聚合标题相关的属性
聚合标题相关的属性,包含:
  1. 标题内容textContent
  1. 标题提示内容tooltipText
  1. 超出折行wrapping
  1. 标题文本对齐方式align
  1. 标题位置layout
  1. 标题宽度width
  1. 标题宽度单位unit
loading
boolean
false
是否显示加载中
formDataKey
string
{ { self.id } }
默认为组件id
值标识
disabled
boolean
false
是否禁用
hidden
boolean
false
是否隐藏
readOnly
boolean
false
是否只读
rules
json
{}
示例
rules:{
required:false,
maxLength:3,
minLength:2,
pattern:{
type:"Email"
},
custom:""
}
placeholder
String
请输入文本
占位符
prefixText
String
undefined
前缀文本
suffixText
String
undefined
后缀文本
prefixIcon
String
undefined
前缀图标
suffixIcon
String
undefined
后缀图标
showClear
boolean
true
是否开启清空按钮
showCountCharacter
boolean
false
是否开启字数统计
方法API
方法
说明
setValue(value: boolean | string | number | void)
设置组件值
clearValue()
清空组件值
validate()
触发校验
clearValidation()
清空校验状态
reset()
重置组件值
setDisabled(disabled: boolean)
设置是否禁用
setLoading(loading:boolean)
设置是否加载中
setHidden(visible:boolean)
设置是否隐藏
setReadOnly(readOnly:boolean)
设置是否只读
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
联系我们立即试用