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

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 无