Input 输入框

通过鼠标或键盘输入字符。

基础用法

通过placeholder属性，可自定义输入框提示

<template>
    <kl-input v-model="input" placeholder="Please input"></kl-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')
</script>

密码框

通过设置type属性为password，可设置为密码框，添加showPassword属性可以控制密码是否可查看(showPassword属性依赖于 icon，使用之前请先导入 icon 图标库，详细请看icon)。

<template>
    <kl-input v-model="password" type="password" placeholder="Please input"> </kl-input>
    <kl-input v-model="password1" type="password" placeholder="Please input password" showPassword>
    </kl-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const password = ref('')
const password1 = ref('')
</script>

<style scoped>
.kl-input {
    margin-top: 5px;
}
</style>

禁用状态

添加disabled属性，可设置为禁用状态的输入框。

<template>
    <kl-input v-model="password" placeholder="Please input" disabled> </kl-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const password = ref('')
</script>

尺寸

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

<template>
    <kl-input v-model="inputLarge" placeholder="Please input" size="large"></kl-input>
    <kl-input v-model="inputDefault" placeholder="Please input" size="default"></kl-input>
    <kl-input v-model="inputSmall" placeholder="Please input" size="small"></kl-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputLarge = ref('')
const inputDefault = ref('')
const inputSmall = ref('')
</script>

<style scoped>
* {
    margin-top: 5px;
}
</style>

文本框

通过设置type属性为textarea，可以自定义为文本框；rows属性可以设置文本框的高度，默认为 4 行；disabled属性可以禁用文本框

<template>
    <kl-input v-model="input" placeholder="Please input text" type="textarea" :rows="4"></kl-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')
const input1 = ref('')
</script>

API

属性

属性名	说明	类型	默认值
placeholder	自定义输入框提示	String	—
type	类型	String	text
v-model	绑定值	string/number	—
clearable	是否显示清除按钮，只有当 type 不是 textarea 时生效	boolean	fales
show-password	是否显示切换密码图标	boolean	fales
disabled	是否禁用	boolean	fales
rows	输入框行数，仅 type 为 'textarea' 时有效	number	4
name	等价于原生 input name 属性	string	—
readonly	原生 readonly 属性，是否只读	boolean	false
size	输入框尺寸，只在 type 不为 'textarea' 时有效	'large' / 'default' / 'small'	default
max	原生 max 属性，设置最大值	—	—
min	原生属性，设置最小值	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—
autofocus	原生属性，自动获取焦点	boolean	false
form	原生属性	string	—
input-style	input 元素或 textarea 元素的 style	string/object	{}

事件

事件名	说明	回调参数
change	仅当 modelValue 改变时触发	val
clear	在点击由 clearable 属性生成的清空按钮时触发	—

Input 输入框 #

基础用法 #

密码框 #

禁用状态 #

尺寸 #

文本框 #

API #

属性 #

事件 #

Input 输入框

基础用法

密码框

禁用状态

尺寸

文本框

API

属性

事件