xtf-input

组件说明

xtf-input 是输入框组件，支持单行输入和多行文本域。提供前缀/后缀图标、密码切换、清除按钮、字数统计、校验状态和搜索按钮，适用于表单输入、搜索框和文本编辑等场景。

---

基础用法

1. 基础输入

通过 v-model 双向绑定值：

<template>
  <xtf-input v-model="username" label="用户名" placeholder="请输入用户名" clearable />
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>

2. 密码输入

通过 type="password" 设置密码输入框；传入 show-password-toggle 才显示切换按钮：

<template>
  <xtf-input
    v-model="password"
    label="密码"
    type="password"
    show-password-toggle
    placeholder="请输入密码"
  />
</template>

<script>
export default {
  data() {
    return {
      password: ''
    }
  }
}
</script>

3. 搜索框

通过 search-action-text 显示搜索按钮：

<template>
  <xtf-input
    v-model="keyword"
    type="search"
    prefix-icon="search"
    search-action-text="搜索"
    @search="onSearch"
  />
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    onSearch() {
      console.log('搜索:', this.keyword)
    }
  }
}
</script>

4. 多行文本域

通过 type="textarea" 设置多行文本域：

<template>
  <xtf-input
    v-model="remark"
    type="textarea"
    label="备注"
    placeholder="请输入备注"
    :maxlength="200"
    show-word-limit
    :auto-height="true"
  />
</template>

<script>
export default {
  data() {
    return {
      remark: ''
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
value	String | Number	''	输入值	双向绑定
modelValue	String | Number	undefined	输入值(v-model)	双向绑定
type	String	'text'	输入类型	类型
label	String	''	标签	标签
placeholder	String	''	占位文字	提示
placeholderClass	String	''	原生输入框占位文字类名	自定义占位样式
disabled	Boolean	false	是否禁用	禁用
readonly	Boolean	false	是否只读	只读
clearable	Boolean	false	是否可清除	清除
maxlength	String | Number	140	最大长度	限制
showWordLimit	Boolean	false	是否显示字数	字数
prefixIcon	String	''	前缀图标	图标
suffixIcon	String	''	后缀图标	图标
required	Boolean	false	是否必填	必填
theme	String	'primary'	主题色	主题
status	String	''	校验状态	状态
message	String	''	提示信息	提示
searchActionText	String	''	非空时显示搜索按钮及其文字	搜索
autoHeight	Boolean | Object	true	文本域自动高度；对象可设置 minRows、maxRows	文本域
inputmode	String	''	H5 输入模式提示	移动端键盘优化
autosize / rows / maxHeight	Boolean | Object / String | Number	undefined / 4 / ''	文本域自适应行数和上限	文本域
variant / size / color / labelWidth	String / String / String / 多类型	'surface' / '' / '' / ''	外观与标签布局	样式
clearTrigger / showCount / showStatusIcon	String / Boolean	'always' / false	清除触发、计数、状态图标	交互
formatter / parser / rules	Function / Function / Array	null / null / []	值处理和内部校验	表单
adjustPosition	Boolean	true	是否自动调整位置	键盘
confirmType	String	'done'	键盘确认按钮类型	键盘
confirmHold	Boolean	false	确认后是否保持键盘	输入确认交互
focus / autoFocus	Boolean	false	受控聚焦或初始化自动聚焦	自动输入
cursorSpacing	String | Number	24	键盘与输入框的间距	键盘避让
cursor / selectionStart / selectionEnd	String | Number	-1	光标和选区位置	编辑态控制
holdKeyboard / autoBlur	Boolean	false	是否保持键盘、是否自动失焦	键盘交互
ignoreCompositionEvent	Boolean	true	是否忽略输入法组合事件	输入法兼容
showConfirmBar / fixed / disableDefaultPadding	Boolean	true / false / false	文本域确认栏、固定定位和默认内边距控制	文本域原生能力
showPasswordToggle	Boolean	false	密码输入时是否显示明文切换按钮	密码输入
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
input	输入时触发	(value)	输入值
change	值变化时触发	(value)	新值
focus	获得焦点时触发	(event)	事件对象
blur	失去焦点时触发	(event)	事件对象
confirm	点击确认按钮时触发	(value)	确认值
clear	清除时触发	-	-
search	点击搜索时触发	(value)	搜索值
update:modelValue / update:value	输入或清除时	(value)	双向同步
linechange / keyboardheightchange	文本行数或键盘高度变化	(event)	原生事件

插槽示例

<template>
  <xtf-input v-model="amount" label="金额">
    <template #prefix><text>¥</text></template>
    <template #message><text>仅支持整数</text></template></xtf-input>

</template>
<script>
export default {
  data() {
    return { amount: '' }
  }
}
</script>

---

插槽

插槽名称	说明
label	自定义标签
prefix	自定义前缀
suffix	自定义后缀
message	自定义提示信息

---

主题说明

• 支持 primary、success、warning、danger、info 主题色
• 聚焦时边框和图标使用主题色
• 错误状态使用 danger 主题色
• 清除按钮和密码切换使用 xtf-icon 组件

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。