Skip to content

文本输入框 textfield 组件

textfield组件是一种基础的用户界面元素,允许用户通过鼠标或键盘输入字符,用于表单组件内,便于用户输入和提交数据。

功能描述

  1. 用户可以通过键盘输入字符,包括字母、数字和特殊符号
  2. 用户可以通过鼠标点击输入框来激活焦点,从而开始输入。
  3. 在输入框为空时,显示提示性文字,帮助用户理解需要输入的内容类型。

示例显示

事件

调用组件的事件,同上button组件

事件名称说明参数和示例
appendIconClick点击附加图标后触发textfield1_appendIconClick(){}
focus获取焦点时触发textfield1_focus(){}
blur失去焦点触发textfield1_blur(){}
change更改时触发textfield1_change(){}
input输入时触发textfield1_input(){}
scancode扫码枪读码后触发textfield1_scancode(){}

方法

方法一般使用于各类事件中,调用即可生效

方法名称说明参数和示例
focus组件聚焦this.refs.input1.focus()

属性

属性名称说明示例
reference设置组件的refsrefs:textfield1
modal设置组件的modal值名bind:{value:'{whName}'}
hidden隐藏或显示组件,默认为falsehidden:false
appendIcon设置附加图标,默认为空appendIcon:'search'
fieldLabel标签名fieldLabel:'字段1'
required组件是否必填,默认为falserequired:false
weight权重的宽度,6中选择,1、2、3、4、5、6,默认为1weight:1
labelWidth标签宽度,默认为autolabelWidth:80
size设置组件的尺寸大小,三种选项large(大)、default(中)、small(小),默认为falsesize:default
disabled是否禁用组件,默认为falsedisabled:false
textarea是否显示为多行文本,默认为falsetextarea:true
maxlength最大长度,默认为空maxlength:''
showPassword是否是密码框,默认为falseshowPassword:true(设置为true则显示为密码输入框)
readonly是否允许只读,默认为falsereadonly:false
paddingTop距上的内边距,默认为0paddingTop:5
paddingRight距右的内边距,默认为0paddingRight:5
paddingBottom距下的内边距,默认为0paddingBottom:5
paddingLeft距左的内边距,默认为0paddingLeft:5
cssBackgroundColor设置整个组件的背景色,默认为nonecssBackgroundColor:"#722ed1"
labelBackgroundColor设置组件label的背景色,默认为nonelabelBackgroundColor: '#eb2f96'
labelSize设置组件label的文字大小,默认为14pxlabelSize: '12px'
labelColor设置组件label的文字颜色,默认为'#606266'labelColor: '#fbadd2'
isLabelBlod是否设置label的字题为粗体,默认为falseisLabelBlod:true
valueBackgroundColor设置组件value的背景色,默认为nonevalueBackgroundColor: '#eb2f96'
valueSize设置组件value的文字大小,默认为14pxvalueSize: '12px'
valueColor设置组件value的文字颜色,默认为'#606266'valueColor: '#fbadd2'
isValueBlod是否设置value的字题为粗体,默认为falseisValueBlod:true