Awesome

input-frame

小程序输入框组件，适用于支付密码、登录密码 等。

Screenshots

安装

安装完成在开发者工具执行 npm build

npm install weapp-input-frame -S

使用

*.json

"usingComponents": {
  "input-frame": "miniprogram_npm/weapp-input-frame/index"
}

*.wxml

<input-frame />

API

• value 输入框默认值
• plaintext 是否明文显示, 默认 false
• focus 是否获取焦点, 默认 false
• bind:change 输入发生变化触发
• bind:finished 输入完成时触发
• space 输入框的格子数量，一般 4 - 6， 默认 6
• frameStyle 输入框的风格， divider / '' , 默认 ''
• custom-class 自定义组件class

<input-frame
  value="123456"
  plaintext
  focus="{{ true }}"
  bind:change="onChange"
  bind:finished="onFinished"
/>

暴露方法

• getValue 获取输入框值
• setValue 动态设置输入框值

wxml

<input-frame id="input-frame />

js

// Demo
Page({
  onLoad() {
    const el = this.selectComponent('#input-frame');
    el.getValue();
  },
  setVal() {
    const el = this.selectComponent('#input-frame');
    el.setValue(282828);
  }
})

License

MIT