UniApp 组件 · 实验

UGInput 输入框

带标签、错误信息与帮助文本的文本输入框。

组件预览

以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。

使用方式

配置 easycom 后直接使用 <ug-input>，无需在页面脚本中导入组件。

vue

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

const keyword = ref('')

function search(value: string) {
  // 使用确认值发起业务搜索
}
</script>

<template>
  <ug-input
    v-model="keyword"
    label="搜索组件"
    placeholder="输入组件名称"
    helper-text="支持原生输入与一键清除"
    clearable
    @confirm="search"
  />
</template>

easycom 公开入口：@ug666/ui-uniapp/components/ug-input/ug-input.vue

属性

属性	类型	默认值	说明
modelValue	string \| number	''	通过 v-model 管理的输入值；写回时为字符串。
label	string	—	输入框标签。
helperText	string	—	未出错时的辅助说明。
error	string	—	错误文字，同时切换错误视觉状态。
placeholder	string	—	原生输入占位内容。
type	'text' \| 'number' \| 'idcard' \| 'digit' \| 'tel'	'text'	UniApp 原生输入类型。
password	boolean	false	是否作为密码输入。
disabled	boolean	Provider	禁用原生输入。
readonly	boolean	false	保持当前值且禁止编辑。
clearable	boolean	false	有值且可编辑时显示清空操作。
maxlength	number	-1	原生最大输入长度。
confirmType	string	'done'	键盘确认按钮类型。
size	'sm' \| 'md' \| 'lg'	Provider	控件尺寸，未传时读取 Provider。

事件

事件	参数	说明
update:modelValue	value: string	输入或清空后更新 v-model。
input	value: string	输入值发生变化时触发。
clear	—	点击清空操作时触发。
confirm	value: string	触发原生键盘确认时返回当前值。
focus	event	原生输入获得焦点时触发。
blur	event	原生输入失去焦点时触发。

注意事项

业务校验、请求和持久化留在页面或业务层。
readonly 当前通过禁用原生输入保证不可编辑，真机可用性仍需验证。

平台边界

总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。

MP-WEIXIN 已编译开发者工具与真机待验证