更新记录

1.0.1（2025-12-07） 下载此版本

适配鸿蒙系统

1.0.0（2025-12-07） 下载此版本

appx-input 是一款基于 UTS 语法开发的通用输入框组件，适配 uni-app 生态，支持文本、数字、密码等多种输入类型，提供前置 / 后置图标、清除按钮、字数统计、自定义样式等丰富功能，同时支持输入格式化、多状态样式控制，满足各类表单输入场景需求。

平台兼容性

uni-app x(4.87)

appx-input 输入框组件帮助文档

组件介绍

appx-input 是一款基于UTS语法开发的通用输入框组件，适配uni-app生态，支持文本、数字、密码等多种输入类型，提供前置/后置图标、清除按钮、字数统计、自定义样式等丰富功能，同时支持输入格式化、多状态样式控制，满足各类表单输入场景需求。

组件特性

• 支持多输入类型：文本、数字、身份证、小数、密码等；
• 内置清除按钮，可一键清空输入内容；
• 支持前置/后置图标自定义，样式可灵活配置；
• 提供字数统计功能，支持无限长度配置；
• 支持输入内容格式化处理；
• 多状态样式控制：禁用、聚焦、只读等；
• 灵活的边框、形状、对齐方式配置；
• 完整的事件回调：输入、确认、聚焦、失焦等。

基本使用

<template>
  <appx-input 
    v-model="inputValue" 
    placeholder="请输入内容" 
    clearable
    show-word-limit
    maxlength="20"
  />
</template>

<script lang="uts" setup>
const inputValue = ref('');
</script>

属性说明

事件说明

高级用法

1. 带格式化的输入框

<template>
  <appx-input 
    v-model="phoneValue" 
    placeholder="请输入手机号" 
    :formatter="formatPhone"
    maxlength="11"
    type="number"
  />
</template>

<script lang="uts" setup>
const phoneValue = ref('');

// 手机号格式化：每3位加空格
const formatPhone = (value) => {
  // 去除所有非数字字符
  const pureNum = value.replace(/\D/g, '');
  // 格式化
  if (pureNum.length > 3 && pureNum.length <= 7) {
    return `${pureNum.slice(0,3)} ${pureNum.slice(3)}`;
  } else if (pureNum.length > 7) {
    return `${pureNum.slice(0,3)} ${pureNum.slice(3,7)} ${pureNum.slice(7)}`;
  }
  return pureNum;
};
</script>

2. 带前置/后置图标的输入框

<template>
  <appx-input 
    v-model="searchValue" 
    placeholder="请输入搜索内容" 
    prefixIcon="🔍"
    suffixIcon="✓"
    :prefixIconStyle="{color: '#409eff', fontSize: '16px'}"
    :suffixIconStyle="{color: '#67c23a', fontSize: '16px'}"
    border="bottom"
  />
</template>

<script lang="uts" setup>
const searchValue = ref('');
</script>

3. 圆形密码输入框

<template>
  <appx-input 
    v-model="pwdValue" 
    placeholder="请输入密码" 
    password
    shape="circle"
    clearable
    disabledColor="#f0f2f5"
  />
</template>

<script lang="uts" setup>
const pwdValue = ref('');
</script>

样式定制

组件支持通过以下方式定制样式：

1. customStyle 属性：自定义容器整体样式；
2. prefixIconStyle/suffixIconStyle：定制前置/后置图标样式；
3. placeholderStyle：定制占位符样式；
4. CSS变量：可通过:style覆盖内置CSS变量，如--input-color、--border-radius等；
5. 全局样式：通过非scoped的style标签覆盖组件内置类名样式。

注意事项

1. password 属性优先级高于type，设置password=true时，输入框类型强制为密码框；
2. 字数统计仅对type="text"或type="textarea"生效；
3. formatter 格式化函数会改变输入框的显示值，同时也会同步到绑定值中；
4. 清除按钮点击时，会同时清空本地绑定值和DOM值，确保状态一致；
5. 组件基于UTS语法开发，需确保uni-app项目支持UTS编译环境。