| uni | 您所在的位置：网站首页 › 输入框提示文字样式怎么设置出来 › uni |
|
# uni-easyinput 增强输入框 组件名：uni-easyinput 代码块： uEasyinput 点击下载&安装 easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input 所有功能 # 介绍 # 基本用法输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，clearable 属性设置为 false 即可 clearable 属性设置为 true ，输入框聚焦且内容不为空时，才会显示内容 # 输入框带左右图标设置 prefixIcon 属性来显示输入框的头部图标 设置 suffixIcon 属性来显示输入框的尾部图标 注意图标当前只支持 uni-icons 内置的图标，当配置 suffixIcon 属性后，会覆盖 :clearable="true" 和 type="password" 时的原有图标 绑定 @iconClick 事件可以触发图标的点击 ，返回 prefix 表示点击左侧图标，返回 suffix 表示点击右侧图标 # 插槽设置 right 属性来设置右侧内容 插槽。 密码 # 输入框禁用设置 disable 属性可以禁用输入框，此时输入框不可编辑 # 密码框设置 type="password" 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态 # 输入框聚焦设置 focus 属性可以使输入框聚焦 如果页面存在多个设置 focus 属性的输入框，只有最后一个输入框的 focus 属性会生效 # 多行文本设置 type="textarea" 时可输入多行文本 # 多行文本自动高度设置 type="textarea" 时且设置 autoHeight 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度 # 取消边框设置 :inputBorder="false" 时可取消输入框的边框显示，同时搭配 uni-forms 的 :border="true" 有较好的效果 # API # Easyinput Props 属性名 类型 可选值 默认值 说明 value String/ Number - - 输入内容 type String 见 type Options text 输入框的类型（默认text） clearable Boolean - true 是否显示右侧清空内容的图标控件(输入框有内容且不禁用时显示)，点击可清空输入框内容 autoHeight Boolean - false 是否自动增高输入区域，type为textarea时有效 placeholder String - - 输入框的提示文字 placeholderStyle String - - placeholder的样式(内联样式，字符串)，如"color: #ddd" focus Boolean - false 是否自动获得焦点 disabled Boolean - false 是否不可输入 maxlength Number - 140 最大输入长度，设置为 -1 的时候不限制最大长度 confirmType String - done 设置键盘右下角按钮的文字，仅在type="text"时生效 clearSize Number - 24 清除图标的大小，单位px prefixIcon String - - 输入框头部图标 suffixIcon String - - 输入框尾部图标 trim Boolean/String 见 trim Options false 是否自动去除空格，传入类型为 Boolean 时，自动去除前后空格 inputBorder Boolean - true 是否显示input输入框的边框 styles Object - - 样式自定义 passwordIcon Boolean - true type=password 时，是否显示小眼睛图标 adjust-position Boolean - true 弹起键盘时，是否上推页面，平台差异性与内置input组件一致 primaryColor String - #2979ff 设置清除按钮focus时的颜色 cursorSpacing Number - 0 指定光标与键盘的距离，单位 px 。取 textarea/input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离。详见textarea /input # Type Options 属性名 说明 text 文本输入键盘 textarea 多行文本输入键盘 password 密码输入键盘 number 数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式 idcard 身份证输入键盘，仅支持微信、支付宝、百度、QQ小程序 digit 带小数点的数字键盘，均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数（原生键盘不支持负号） # ConfirmType Options平台差异与 input 相同 属性名 说明 send 右下角按钮为“发送” search 右下角按钮为“搜索” next 右下角按钮为“下一个” go 右下角按钮为“前往” done 右下角按钮为“完成” # Styles Options 属性名 默认值 说明 color #333 输入文字颜色 disableColor #eee 输入框禁用背景色 borderColor #e5e5e5 边框颜色 # Trim Options传入类型为 Boolean 时，自动去除前后空格,传入类型为 String 时，可以单独控制，下面是可选值 属性名 说明 both 去除两端空格 left 去除左侧空格 right 去除右侧空格 all 去除所有空格 none 不去除空格 # Easyinput Events 事件称名 说明 返回值 兼容说明 @input 输入框内容发生变化时触发 - @clear 点击右侧叉号图标时触发 - 1.1.0新增 @focus 输入框获得焦点时触发 - @blur 输入框失去焦点时触发 - @confirm 点击完成按钮时触发 - @iconClick 点击图标时触发 prefix/suffix @change 仅在输入框失去焦点或用户按下回车时触发 1.1.0新增 @keyboardheightchange 键盘高度发生变化时触发 1.1.6新增 # 示例注意 示例依赖了 uni-card uni-section uni-scss 等多个组件，直接拷贝示例代码将无法正常运行 。 请到 组件下载页面 ，在页面右侧选择 使用 HBuilderX导入示例项目 ，体验完整组件示例。 Template Script Ｓtyle easyinput 组件是对原生input组件的增强 ，是专门为配合表单组件 uni-forms 而设计的，easyinput 内置了边框，图标等，同时包含 input所有功能 输入内容：{{ '"'+value+'"' }}完整示例演示 |
| CopyRight 2018-2019 实验室设备网 版权所有 |