更新记录

1.2.5(2024-02-19)

  • 修复一些样式问题。

1.2.4(2023-12-28)

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

1.2.3(2023-12-10)

  • 新增文本框是否圆角
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

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

属性名 类型 默认值 说明
modelValue Number/String - 绑定值
type String text 文本框类型(text / password / textarea)
size String default 尺寸(large / default / small)
disabled Boolean false 禁用状态
clearable Boolean false 是否可清空
showPassword Boolean false 是否切换密码
circle Boolean false 是否圆角
prefixIcon String - 输入框左侧图标
suffixIcon String - 输入框右侧图标
placeholder String - 输入框占位提示
maxlength Number -1 最大输入长度
autofocus Boolean false 自动获取焦点
autosize Boolean/Object false 自适应内容高度(仅type为textarea生效)

事件

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

💝最后

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问