组件

Input 输入框

通过鼠标或键盘输入内容,可组合使用,常用于查询条件、表单、新建或修改等场景。 API文档 组件问题反馈和讨论

使用方法

  • 文本框一般用于接收较短的字符串,如账号、密码、姓名等。文本框高度和宽度固定,显示的文本一般左对齐。
  • 当用户输入的内容超出文本框范围时显示最后输入的文本位置,横向滑动可查看已输入的内容。如要显示较长的字符串,请改用“多行文本框”。

基础样式 #

最基础输入框的使用状态有默认状态和禁用状态,只需要添加样式 nv-input ;input标签有 disabled 属性时会显示成禁用状态。
<code>
显示代码

输入框尺寸 #

定义了输入框三种尺寸:大、中(默认)、小;高度分别为 40px 32px 24px; 大尺寸和小尺寸需额外增加样式 nv-input-lgnv-input-sm
<code>
显示代码

可清除输入内容 #

输入状态下点击右侧icon,可清除输入内容;只需增加样式 nv-input-clear
<code>
显示代码

带icon的输入框 #

带有icon的输入框,分为两种:可操作的icon置于输入框的右侧(默认状态);
<code>
显示代码

文本域 #

用于输入多行文本信息,需配置 maxlength 属性用于显示最大输入字符数。
<code>
显示代码

组合输入框 #

可前置或后置元素,一般为下拉标签或按钮;默认状态为标签,按钮需额外增加样式 nv-input-btn,input默认在右侧,如果在左侧需额外增加样式 nv-input-wapper-left
<code>
显示代码

自定义DOM监听事件 #

1.3.3版本后组件在原生的DOM对象上挂载了onnvchange方法,需要改变textarea后重新渲染页面的话可以使用此方法(需升级为1.3.3及以后的版本)。
<code>
显示代码
onnvchange 参数
属性
类型
描述
inserted
String
默认为false,动态改变输入框的值。eg:{inserted:'我是新添加的内容'}
beforeFn
Function
前置回调函数,在onnvchange最开始执行。eg: {beforeFn: function(){}}
afterFn
Function
后置回调函数,在onnvchange最后执行。eg: {afterFn: function(){}}