更新记录

1.2.5（2024-02-19） 下载此版本

• 修复一些样式问题。

1.2.4（2023-12-28） 下载此版本

• 修复一些小程序样式问题

1.2.3（2023-12-10） 下载此版本

• 新增文本框是否圆角

平台兼容性

uni-app

其他

uniapp input多功能输入框【增强版】

组件名：uaInput 代码块： <ua-input>

uainput组件是基于uniapp input自定义加强版文本框输入，支持单行/多行输入(type="textarea")、自适应高度、禁用输入、一键清空、密码框、自定义输入框前缀/后缀插槽等功能。

注意事项 如果想自定义图标，需要自己引入iconfont图标

引入方式

本组件符合easycom规范，只需将本组件放在components目录，在页面template中即可直接使用。

基本用法

示例

• 基础用法

<ua-input v-model="value" placeholder="请输入" />

• 密码框/自动获取焦点

<ua-input v-model="value" showPassword autofocus />

• 多行输入/自适应高度/清除功能

<ua-input
    ref="inputRef"
    v-model="inputValue"
    type="textarea"
    :autosize="{maxRows: 6}"
    clearable
    placeholder="多行文本..."
    style="margin: 0 5px; width: 100%;"
/>

• 自定义自适应最大高度、清除事件、前置/后置插槽

<ua-input
    class="flex1"
    v-model="editorText"
    type="textarea"
    :autosize="{maxRows: 6}"
    clearable
    placeholder="Prompt..."
    @clear="handleClear"
    style="margin: 0 5px; width: 100%;"
/>
    <template #prefix>
        <text class="iconfont ve-icon-search"></text>
    </template>
    <template #suffix>
        <text class="iconfont ve-icon-photo"></text>
        <text class="iconfont ve-icon-audio"></text>
    </template>
</ua-input>

API

uaInput Props

事件

• @change
• @input
• @focus
• @blur
• @clear
• @search

💝最后

基于uniapp+vue3仿微信app聊天实例同步到我的原创作品集，希望对你有帮助！ https://gf.bilibili.com/item/detail/1105801011

开发不易，希望各位小伙伴们多多支持下哈~~ ☕️☕️