跳到主要内容

单行输入

WdInput

适用场景

用于单行内容的输入。

基础能力说明

1、绑定「文本」类型字段,表单容器绑定数据模型后,模型中的文本字段会自动渲染为单行输入组件,实现单行数据的录入。可配置输入值、占位文字、组件尺寸和是否横向占满(组件尺寸和是否横向占满在 PC 端生效,在移动端不生效)。

2、支持标题的个性化配置,包含标题的内容、对齐方式、是否换行(开启时,标题字数超过一行时换行展示;关闭时,标题字数超过一行时省略展示)、标题位置、宽度、和标题的提示语。

3、支持输入框的个性化配置,包含输入框是否显示清空按钮、前后缀文字、前后缀图标、下方提示、是否展示为密码、输入键盘类型、是否显示字数、是否自动获取焦点、移动端是否展示下划线/PC 端是否展示输入框。

注:

  • 前后缀文本在表单中会跟随输入内容一起提交到数据模型中;
  • 尺寸配置仅针对 PC 端生效;
  • 如果组件在表单容器中,组件尺寸,标题对齐、位置、换行、宽度默认会跟随表单容器的属性配置

了解更多的表单组件使用场景,可查阅 表单常见场景实践指南

示例

交互式预览

组件装饰

组件大小

组件对齐方式

组件输入密码

组件输入状态

样式 API 示例

#wd-page-root .wd-form-item .wd-input-input {
border-color: cyan;
color: cyan;
background-color: black;
border-width: 2px;
border-radius: 6px;
}

属性

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
标题内容labelstring标题"标题"-
显示标题labelVisibleboolean标题true-
标题对齐labelAlign""|"left"|"right"标题""表单场景下默认会跟随表单容器的标题对齐配置
标题换行labelWrapboolean标题false如果标题内容过长关闭时只显示一行、溢出省略;开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置
标题位置layout""|"horizontal"|"vertical"标题""设置标题在表单组件的展示位置,表单场景下默认会跟随表单容器的标题的位置配置
标题宽度labelWidthstring标题-表单场景下默认会跟随表单容器的标题宽度配置
标题提示(移动端,PC端,WEB端)labelTipsstring标题-配置标题的工具提示内容
显示清空按钮clearableboolean输入框true开启后提供快捷清空按钮
前缀文字beforestring输入框-表单输入框显示前缀文字,表单提交场景下前缀文字会作为表单内容一起提交到数据模型中
后缀文字afterstring输入框-表单输入框显示后缀文字,表单提交场景下后缀文字会作为表单内容一起提交到数据模型中
前缀图标类型prefixType""|"inner"|"custom"输入框""选择图标的类型
前缀图标prefixIconstring输入框"success"表单输入框中展示前图标
前缀图标prefixSrcstring输入框""设置自定义图标地址
后缀图标类型suffixType""|"inner"|"custom"输入框""选择图标的类型
后缀图标suffixIconstring输入框"success"表单输入框中展示后图标
后缀图标suffixSrcstring输入框""设置自定义图标地址
下方提示extrastring输入框-配置后提示内容常显在输入框下方
展示为密码passwordboolean输入框false输入内容以密码的形式展示
输入键盘类型type"text"|"number"|"idcard"|"digit"输入框"text"控制移动端输入键盘的展示形式
显示字数counterVisibleboolean输入框false-
自动获取焦点focusboolean输入框false开启后页面加载后光标自动定位到该输入框
移动端显示下划线borderedH5boolean输入框true关闭后移动端不显示底部下划线
PC端显示输入边框borderedPcboolean输入框true关闭后PC端不显示输入边框
小程序端获取微信昵称(小程序)isNickNameTypeboolean小程序能力false-
最大长度maxLengthnumber状态/校验140-
校验规则rulesarray状态/校验[]-
状态status"edit"|"disabled"|"readOnly"状态/校验"edit"-
必填requiredboolean状态/校验false-
必填标识requiredFlagboolean状态/校验true启用后,组件若要求必填,则会显示必填星号标记
必填校验提示requiredMsgstring状态/校验"该项为必填项"-
绑定字段namestring通用"formInput"表单字段的Key值,用于提交数据时,匹配数据模型字段标识。页面内需保证唯一。
输入值inputValuestring通用""-
占位文字placeholderstring通用"请输入"-
组件尺寸(PC端)size""|"lg"|"md"|"sm"通用""尺寸配置仅对PC端生效,表单场景下默认会跟随表单容器的组件尺寸配置
横向占满(PC端)blockboolean通用true-

事件

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
输入改变change
  • value:string输入值
兼容三端-
聚焦focus
  • value:string输入值
兼容三端-
失焦blur
  • value:string输入值
兼容三端-
回车confirm
  • value:string输入值
兼容三端-
清除内容clear
  • originValue:string输入被清除前的值
兼容三端-

属性 API

通过属性 API,可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
绑定字段namestring表单字段的Key值,用于提交数据时,匹配数据模型字段标识。页面内需保证唯一。
输入值valuestring
标题内容labelstring
前缀文字beforestring表单输入框显示前缀文字,表单提交场景下前缀文字会作为表单内容一起提交到数据模型中
后缀文字afterstring表单输入框显示后缀文字,表单提交场景下后缀文字会作为表单内容一起提交到数据模型中
必填requiredboolean
是否展示visibleboolean组件是否展示
是否禁用disabledboolean组件是否禁用
是否只读readOnlyboolean组件是否只读

方法 API

通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等

方法名
方法标识
方法说明
设置值setValue通过 $w.id1.setValue("weda") 设置组件值
设置显隐setVisible通过 $w.id1.setVisible(false) 设置组件为隐藏
设置禁用setDisabled通过 $w.id1.setDisabled(true) 设置组件为禁用
清空值clearValue通过 $w.id1.clearValue() 清空组件值
设置只读setReadOnly通过 $w.id1.setReadOnly(true) 设置组件为只读
触发校验handleValidate通过 $w.id1.handleValidate() 校验组件值
清除校验clearValidate通过 $w.id1.clearValidate() 清除组件校验

样式 API

通过样式 API,可以覆盖组件中内部元素的样式来实现自定义

名称
类名
说明
根元素.wd-input-root组件最外层元素
H5 端根元素.wd-h5-input-root可设定 H5 端的根元素样式
PC 端根元素.wd-pc-input-root可设定 PC 端的根元素样式
小程序端根元素.wd-mp-input-root可设定小程序端的根元素样式
无边框状态.wd-input-root.is-borderless设置组件无边框状态样式
必填状态.wd-input-root.is-required设置组件必填状态样式
标题.wd-input__label组件标题元素
标题禁用状态.wd-input__label.is-disabled设置组件标题禁用状态样式
标题不换行.wd-input__label.is-nowrap设置组件标题不换行时状态样式
前缀文字.wd-input__text-before设置组件前缀文字样式
后缀文字.wd-input__text-after设置组件后缀文字样式
前缀图标.wd-input__icon-before设置组件前缀图标样式
后缀图标.wd-input__icon-after设置组件后缀图标样式
提示文字.wd-input__help设置组件提示文字样式
校验信息.wd-input__error设置组件校验信息样式
组件本身.wd-input-input组件本身元素
组件输入禁用状态.wd-input-input.is-disabled组件本身元素

了解样式 API

版本变化

  • 属性变化
  • 样式变化
  • widget api 变化