无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/meta.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubcss.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/menu.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/top.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/head.htm

[ lyuif-field ] 输入框

时间:2020-09-19 23:23来源:www.lyuid.com 作者:前沿视觉网 点击:
V1.1.1 [ lyuif-field ] 输入框 # 效果预览 Demo 参数说明 API 输入框分为inpu和textarea富文本框,简单配置,官网文档简写操作,即可实现相同效果 参数 说明 类型 默认值 ui 组件容器-外部class类 Strting

V1.1.1 [ lyuif-field ] 输入框#

效果预览 Demo

 
参数说明 API
输入框分为inpu和textarea富文本框,简单配置,官网文档简写操作,即可实现相同效果
参数 说明 类型 默认值
ui 组件容器-外部class类 Strting /
css 组件容器-style样式 Strting /
dis 是否禁用状态 Boolean false
c 组件容器-字体颜色 Strting /
bc 组件容器-背景颜色 Strting /
ali 容器内容-是否垂直居中对齐 Boolean false
ico 图标-是否显示 String user
ico-name 图标名称 String user
ico-size 字体图标大小(字体大小) String 36rpx
ico-c 图标颜色 String #666
ico-dir 图标旋转方向(t/r/b/l 上/右/下/左) String /
label 左侧文本 String /
label-ui 左侧文本-组件容器-外部class类 String /
label-css 左侧文本-组件容器-style样式 String /
label-w 左侧文本-宽度 String /
must 是否为必填项(显示红色星号) String *
must-ui 必填项-组件容器-外部class类 String /
must-css 必填项-组件容器-style样式 String /
tit-ui 左侧文本-组件容器-外部class类 String /
tit-css 左侧文本-组件容器-style样式 String /
input-ui 输入框-组件容器-外部class类 String /
input-css 输入框-组件容器-style样式 String /
tips 输入框-提示placeholder-输入框文本 String /
tips-ui 输入框-提示placeholder-组件容器-外部class类 String /
tips-css 输入框-提示placeholder-组件容器-style样式 String /
val 输入框-内容value String /
type 输入框-类型:
 text / 文本输入键盘
 number / 数字输入键盘
 idcard / 身份证输入键盘
 digit / 带小数点的数字键盘
String /
confirm-type 输入框-设置键盘右下角按钮的文字,仅在type=" text "时生效
 send / 右下角按钮为 "发送" 
 search / 右下角按钮为 "搜索" 
 next / 右下角按钮为 "下一个" 
 go / 右下角按钮为 "前往" 
 done / 右下角按钮为 "完成"
String /
pwd 输入框-是否是密码类型 Boolean false
max 输入框-最大输入长度 Boolean false
focus 输入框-获取焦点 Boolean false
afocus 输入框-(即将废弃,请直接使用 focus ) 自动聚焦,拉起键盘 Boolean false
cur 输入框-指定focus时的光标位置 Number /
curp 输入框-指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 Number 0
start 输入框-光标起始位置,自动聚集时有效,需与selection-end搭配使用 Number -1
end 输入框-光标结束位置,自动聚集时有效,需与selection-end搭配使用 Number -1
adjust 输入框-键盘弹起时,是否自动上推页面 Boolean false
error 是否显示-错误状态-提示信息 Boolean false
error-ui 是否显示-错误状态-组件容器-外部class类 String /
error-css 是否显示-错误状态-组件容器-style样式 String /

Lyuif组件源码展示

  1. <lyuif-field
  2.     ali="{{false}}"
  3.     ico="{{true}}"
  4.     ico-name="user"
  5.     ico-size="36rpx"
  6.     ico-c="#ff8300"
  7.     label="用户名"
  8.     type="text"
  9.     val="输入框内容"
  10.     max="24"
  11. />
  12.  
事件 Events
 
参数 说明 类型 默认值
bind:label 点击左侧文本触发 eventhandle /
bind:ico 点击左侧图标触发 eventhandle /
bind:input 输入内容时触发 eventhandle /
bind:focus 输入框焦点时触发 eventhandle /
bind:blur 输入框失去焦点时触发 eventhandle /
bind:action 点击右侧按钮时触发 eventhandle /
bind:confirm 点击完成按钮时触发 eventhandle /
bind:keyboard 键盘高度发生变化的时候触发 eventhandle /

Lyuif组件源码展示

  1. <lyuif-field
  2.     bind:label="label"
  3.     bind:ico="ico"
  4.     bind:action="action"
  5.     bind:input="input"
  6.     bind:focus="focus"
  7.     bind:confirm="confirm"
  8.     bind:keyboard="keyboard"
  9.  
  10. />
  11.  
  12.  
  13. ({Page
  14.     label(){
  15.     console.log('label')
  16.     },
  17.     ico(){
  18.     console.log('ico')
  19.     },
  20.     action(){
  21.     console.log('action')
  22.     },
  23.     input(e){
  24.     console.log(e.detail.value)
  25.     },
  26.     focus(e){
  27.     console.log(e.detail.value)
  28.     },
  29.     blur(e){
  30.     console.log(e.detail.value)
  31.     },
  32.     confirm(e){
  33.     console.log(e.detail.value)
  34.     },
  35.     keyboard(e){
  36.     console.log(e.detail.value)
  37.     },
  38. })
  39.  
前端UI框架,UI框架组件,小程序组件,Lyuif前端框架专注于高效UI解决方案.lyuif是一款HTML/CSS前端框架,高效组件搭配lyui基因碎片化组合完美适配设计稿以及迭代更新,高效前端开发解决方案
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footer.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/side.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footbar.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubjs.htm