介绍
基本用法
输入内容后,输入框尾部会显示清除按钮,点击可清除内容,如不需要展示图标,clearable
属性设置为 false
即可
clearable
属性设置为 true
,输入框聚焦且内容不为空时,才会显示内容
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
输入框带左右图标
设置 prefixIcon
属性来显示输入框的头部图标
设置 suffixIcon
属性来显示输入框的尾部图标
注意图标当前只支持 uni-icons
内置的图标,当配置 suffixIcon
属性后,会覆盖 :clearable="true"
和 type="password"
时的原有图标
绑定 @iconClick
事件可以触发图标的点击 ,返回 prefix
表示点击左侧图标,返回 suffix
表示点击右侧图标
<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
插槽
设置 right
属性来设置右侧内容 插槽。
<uni-easyinput>
<template #right>
<view>密码</view>
</template>
</uni-easyinput>
输入框禁用
设置 disable
属性可以禁用输入框,此时输入框不可编辑
<uni-easyinput disabled v-model="value" placeholder="请输入内容"></uni-easyinput>
密码框
设置 type="password"
时,输入框内容将会不可见,由实心点代替,同时输入框尾部会显示眼睛图标,点击可切换内容显示状态
<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
输入框聚焦
设置 focus
属性可以使输入框聚焦
如果页面存在多个设置 focus
属性的输入框,只有最后一个输入框的 focus
属性会生效
<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>
多行文本
设置 type="textarea"
时可输入多行文本
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
多行文本自动高度
设置 type="textarea"
时且设置 autoHeight
属性,可使用多行文本的自动高度,会跟随内容调整输入框的显示高度
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
取消边框
设置 :inputBorder="false"
时可取消输入框的边框显示,同时搭配 uni-forms
的 :border="true"
有较好的效果
<uni-forms border>
<uni-forms-item label="姓名">
<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
</uni-forms-item>
<uni-forms-item label="年龄">
<uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput>
</uni-forms-item>
</uni-forms>