Input 输入框

使用

import { KInput } from "@ksware/ksw-ux";

通过鼠标或键盘输入内容，是最基础的表单域的包装。

基础用法

禁用状态

一键清空

使用 clearable 属性即可得到一个可一键清空的输入框

格式化

在 formatter 的情况下显示值，我们通常同时使用 parser

密码框

使用 show-password 属性即可得到一个可切换显示隐藏的密码框

带图标的输入框

带有图标标记输入类型

要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。另外， prefix 和 suffix 命名的插槽也能正常工作。

文本域

用于输入多行文本信息可缩放的输入框。添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

文本域高度可通过 rows 属性控制

自适应文本域

设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。你可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。

下拉选择

设置selectable属性可以开启下拉选择功能，并通过 options 属性传入选项列表。

前后插槽

可以在输入框中前置或后置一个元素，通常是标签或按钮。

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

尺寸

使用 size 属性改变输入框大小。除了默认大小外，还有另外两个选项： large, small。

输入长度限制

使用 maxlength 和 minlength 属性, 来控制输入内容的最大字数和最小字数。 "字符数"使用JavaScript字符串长度来衡量。为文本或文本输入类型设置 maxlength prop可以限制输入值的长度。允许你通过设置 show-word-limit 到 true 来显示剩余字数。

API

Props

参数名	描述	类型	默认值
model-value/v-model	绑定值	`string \| number`	`-`
type	类型	`enum`	`'text'`
placeholder	输入框占位文本	`string`	`-`
clearable	`type` 不为 `textarea` 时生效，是否显示清除按钮	`boolean`	`false`
size	输入框大小	`enum`	`'base'`
prefix-icon	自定义前缀图标	`string \| Component`	`-`
suffix-icon	自定义后缀图标	`string \| Component`	`-`
disabled	是否禁用	`boolean`	`false`
show-password	`type` 为 `password` 时生效，是否显示密码	`boolean`	`false`
formatter	`type` 为 `text` 时生效，格式化输入框内容	`Function`	`-`
selectable 1.1.19	是否开启下拉选择功能	`boolean`	`false`
options 1.1.19	下拉选择的选项列表	`array`	`-`
teleported 1.1.19	是否将 `popper` 的下拉列表插入至 `body` 元素	`boolean`	`true`
popper-class 1.1.19	为 `popper` 添加类名	`string`	`-`
popper-style 1.1.19	为 `popper` 自定义样式	`object`	`-`
filterable 1.1.20	`selectable` 为 `true` 时生效，是否开启输入过程中过滤下拉选项功能	`boolean`	`false`
allow-resize 1.2.4	`type` 为 `textarea` 时生效，是否允许手动调整 textarea 的高度	`boolean`	`true`

Events

事件名	描述	类型
blur	输入框失去焦点时触发	`Function`
focus	输入框获得焦点时触发	`Function`
change	仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发	`Function`
input	输入框内容变化时触发	`Function`
clear	在点击由 clearable 属性生成的清空按钮时触发	`Function`
popper-show 1.1.19	下拉列表显示时触发	`Function`
popper-hide 1.1.19	下拉列表隐藏时触发	`Function`

Slots

插槽名	描述	参数
default 1.1.19	下拉框无数据时显示的内容	`-`
prefix	输入框头部内容，只对非type='textarea' 有效	`-`
suffix	输入框尾部内容，只对非type='textarea' 有效	`-`
prepend	自定义前置内容, 只对非type='textarea' 有效	`-`
append	自定义后置内容, 只对非type='textarea' 有效	`-`

Methods

方法名	描述	类型
blur	使输入框失去焦点	`Function`
focus	使输入框获得焦点	`Function`
clear	清空输入框内容	`Function`
select	选中输入框内容	`Function`
resizeTextarea	改变textarea的大小	`Function`

Input 输入框 ​

基础用法 ​

禁用状态 ​

一键清空 ​

格式化 ​

密码框 ​

带图标的输入框 ​

文本域 ​

自适应文本域 ​

下拉选择 ​

前后插槽 ​

尺寸 ​

输入长度限制 ​

API ​

Props ​

Events ​

Slots ​

Methods ​