Input 输入框

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

基础用法

<template>
  <h-input v-model="input" placeholder="请输入内容" />
</template>

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

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

禁用状态

通过 disabled 属性指定是否禁用 input 组件

<template>
  <h-input v-model="input" disabled placeholder="禁用状态" />
</template>

可清空

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

<template>
  <h-input v-model="input" clearable placeholder="请输入内容" />
</template>

密码框

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

<template>
  <h-input v-model="input" show-password placeholder="请输入密码" />
</template>

API

属性

参数	说明	类型	可选值	默认值
v-model	绑定值	string / number	—	—
placeholder	输入框占位文本	string	—	—
disabled	是否禁用	boolean	—	false
clearable	是否可清空	boolean	—	false
show-password	是否显示切换密码图标	boolean	—	false
size	输入框尺寸	string	large/default/small	default

事件

事件名称	说明	回调参数
input	在输入框值改变时触发	(value: string | number) => void
change	在输入框失去焦点或按下回车时触发	(value: string | number) => void
clear	在点击由 clearable 属性生成的清空按钮时触发	() => void
blur	在输入框失去焦点时触发	(event: FocusEvent) => void
focus	在输入框获得焦点时触发	(event: FocusEvent) => void