Input 输入框

用于单行文本输入，并提供搜索、密码和组合输入等扩展形态。

基础用法

<template>
  <x-input v-model="value" placeholder="请输入" allow-clear />
</template>

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

const value = ref('');
</script>

前缀与后缀

<template>
  <x-input v-model="value" placeholder="请输入">
    <template #prefix>https://</template>
    <template #suffix>.com</template>
  </x-input>
</template>

前置与后置标签

<template>
  <x-input v-model="value" placeholder="请输入域名">
    <template #prepend>https://</template>
    <template #append>.com</template>
  </x-input>
</template>

关联组件

<template>
  <x-input-search placeholder="搜索" />
  <x-input-password placeholder="密码" />
  <x-input-group>
    <x-input placeholder="省" />
    <x-input placeholder="市" />
  </x-input-group>
</template>

按需导入

import { Input, InputSearch, InputPassword, InputGroup } from 'x-next';

Input Props

参数	说明	类型	默认值
modelValue	绑定值	string	-
defaultValue	默认值，非受控模式	string	''
size	输入框尺寸	'mini' | 'small' | 'medium' | 'large'	跟随全局配置
allowClear	是否允许清空	boolean	false
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
error	是否为错误状态	boolean	false
placeholder	占位提示	string	-
maxLength	最大长度，支持仅提示错误	number | { length: number; errorOnly?: boolean }	0
showWordLimit	是否显示字数统计	boolean	false
wordLength	字符长度计算方法	(value: string) => number	-
wordSlice	超长时的截取方法	(value: string, maxLength: number) => string	-
inputAttrs	内部 input 元素属性	object	-

Input Events

事件名	说明	回调参数
update:modelValue	值更新时触发	value
input	用户输入时触发	value, event
change	失焦或按下回车且值变化时触发	value, event
press-enter	按下回车时触发	event
clear	点击清除按钮时触发	event
focus	获取焦点时触发	event
blur	失去焦点时触发	event

Input Slots

插槽名	说明
prefix	前缀内容
suffix	后缀内容
prepend	前置标签
append	后置标签

Input Methods

方法	说明
focus	使输入框获取焦点
blur	使输入框失去焦点