Input 输入框

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-input": "wuss-weapp/w-input/index",
  3. }

图片演示

Input 输入框 - 图1

代码演示

  1. <!--pages/w-input/index.wxml-->
  2. <w-pane title="Input" desc="输入框" />
  3. <w-pane desc="textarea" />
  4. <w-cell-group>
  5.     <w-input
  6.      clear
  7.      count="100"
  8.      type="textarea"
  9.      placeholder="输入"
  10.     />
  12. </w-cell-group>
  14. <w-pane desc="extra" />
  15. <w-cell-group>
  16.     <w-input
  17.      extra="￥"
  18.      type="digit"
  19.      bindextraClick="extraClick"
  20.      placeholder="00"
  21.      label="金额"
  22.     />
  24. </w-cell-group>
  26. <w-pane desc="Format" />
  27. <w-cell-group>
  28.     <w-input
  29.      type="mobile"
  30.      bindblur="iBlur"
  31.      placeholder="请输入你的手机号"
  32.      label="手机号"
  33.     />
  34.     <w-input
  35.      type="bankCard"
  36.      label="银行卡"
  37.      placeholder="请输入银行卡号"
  38.     />
  39.     <w-input
  40.      type="password"
  41.      label="密码"
  42.      placeholder="请输入你的密码"
  43.     />
  44. </w-cell-group>
  45. <w-pane desc="受控" />
  46. <w-cell-group>
  47.     <w-input
  48.      bindchange="iChange"
  49.      label="标题"
  50.      placeholder="随意输入"
  51.     />
  52. </w-cell-group>
  53. <w-pane desc="clear清空" />
  54. <w-cell-group>
  55.     <w-input
  56.      bindchange="iChange"
  57.      placeholder="随意输入"
  58.      label="标题"
  59.      clear
  60.     >
  61.     </w-input>
  62. </w-cell-group>
  63. <w-pane desc="readOnly and disabled" />
  64. <w-cell-group>
  65.     <w-input
  66.      readOnly
  67.      value="我是值只读"
  68.      placeholder="只读"
  69.      label="标题"
  70.     />
  71.     <w-input
  72.      disabled
  73.      label="标题"
  74.      placeholder="我被禁用了"
  75.     />
  76. </w-cell-group>
  77. <w-pane desc="focus" />
  78. <w-cell-group>
  79.     <w-input
  80.      type="text"
  81.      focus="{{ focus }}"
  82.      bindfocus="iFocus"
  83.      placeholder="click button below to foucus"
  84.      label="标题"
  85.     />
  87. </w-cell-group>
  89. <w-button type="info" bind:onClick="handleFocus">click to Focus</w-button>
  1. data: {
  2.   focus: false,
  3. },
  4. handleFocus() {
  5.   this.setData({
  6.     focus: true,
  7.   });
  8. },
  9. iChange(e) {
  10.   console.log('我改变了', e.detail.value);
  11. },
  12. iFocus(e) {
  13.   console.log('我获取到焦点了', e.detail.value);
  14. },
  15. iBlur(e) {
  16.   console.log('我失去焦点了', e.detail.value);
  17. },
  18. extraClick(e) {
  19.   console.log('注释被点击了', e);
  20. },

API

Attribute 属性

属性说明类型默认值
value默认绑定的值string-
type输入框的类型，有 [mobile/bankCard/textarea]string-
disabled禁用booleanfalse
maxlength最大输入长度number-
placeholder占位符string-
placeholderStyle占位符样式string-
placeholderClass占位符类名string-
cursor指定focus时的光标位置number-
cursorSpacing指定光标与键盘的距离number/string-
focus获取焦点booleanfalse
selectionStart光标起始位置，自动聚集时有效，需与selection-end搭配使用number-
selectionEnd光标结束位置，自动聚集时有效，需与selection-start搭配使用number-
adjustPosition键盘弹起时，是否自动上推页面booleanfalse
autoHeight自动高度booleanfalse
fixed如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
label左侧标签名string-
moneyKeyboardAlign输入框对齐方式string-
labelSpan左侧占位宽度[1-5]number-
extra额外的内容string-
clear是否显示清除按钮booleanfalse
count类型为type=textarea时是否显示输入字符的长度number-
readOnly只读模式booleanfalse

Event 事件

| 事件名 | 说明 | 参数 || onChange | input改变时触发 | —— || input | input改变时触发 | —— || onFocus | 被激活触发 | —— || onConfirm | 回车或点击键盘确定触发 | —— || onBlur | 失去焦点触发 | —— || extraClick | 副标题被点击 | —— || lineChange | 输入框行数变化时调用,仅textarea支持 | —— || clearClick | 清除按钮被点击时触发 | —— |

Slot 插槽

| 名称 | 说明 || icon | 设置input左边图标 |

Class 自定义类名

类名说明
wuss-class无
wuss-class-label无
wuss-class-input-wrap无
wuss-class-input无