Input 输入框

引用

import { Input, regist, CloseFilledIcon } from "litos-ui";

regist(Input);
regist(CloseFilledIcon); // 需要使用 clearable 功能时

演示

基础用法

文本输入的基础用法。

禁用状态

通过 disabled 属性设置输入框为禁用状态。

限制输入

通过传递 allow-input 来限制输入的值。integer 只能输入正整数, number 只能输入正数；以 - 开头表明允许输入负数; 以 .2 结尾表明小数点后精度; 例如: -number.4 表明允许输入数字，且小数点后保留 4 位小数。

输入解析

通过 setParser 给节点设置自定义 parser 在接受到输入值的时候进行解析，例如：只允许输入正整数

带图标的输入框

要在输入框中添加图标，只需要使用 prefix 和 suffix 命名的插槽。

带清除图标

使用 clearable 属性即可显示一个清除图标，点击图标删除所有内容。

API

Input Attributes

名称	说明	类型	默认值
type	原始的 type	string	text
placeholder	占位文本	string	-
allow-input	允许输入的值; number、integer,前面包含 - 表明允许负数, 以 .2 结尾表明小数点后精度	string	-
block	宽度是否铺满父元素	boolean	false
width	宽度	string	-
autofocus	原生属性，自动获取焦点	boolean	false
clearable	是否显示清除按钮	boolean	false
inputmode	输入模式, inputmode	string	text
maxlength	最大输入长度	number	-
maxlength	最大输入长度	number	-

Input Methods

名称	说明	参数
setParser	设置输入解析	(parser: (val: string) => string): void
focus	聚焦	(): void

Input Slots

名称	说明
default	内容
prefix	前缀图标
suffix	后缀图标

样式变量

名称	描述	默认值
--l-btn-text-color	按钮的文字颜色	rgba(0, 0, 0, 0.65)