lighting-ui/packages/lc-keyboard/README.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-keyboard

> 安全键盘组件，支付确认时使用

### 规则
  - 一般与popup组件结合使用，需要用户提供密码确认
  
## [Demo](http://res.lightyy.com/lightui/example/keyboard/?_wx_tpl=http%3A%2F%2Fres.lightyy.com%2Flightui%2Fexample%2Fkeyboard%2Findex.native.js)

<img src="./keyboard.png" width="240"/>
<img src="./keyboard-scan.png" width="160">

## 使用方法

```vue
<template>
  <div class="wxc-demo">
    <title title="lc-keyboard"></title>
    <category title="使用案例"></category>
    <lc-keyboard ref="pwd" class="align-bottom" @complete="completeHandler" @forgetClicked="forgetHandler" :showError="isErr" :showForget="isForgot" :chance="chance"></lc-keyboard>
  </div>
</template>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
  }

  .align-bottom{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
  }

</style>

<script>
  import { LcPopup, LcKeyboard } from '../../index';
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';

  export default {
    components: { Title, Category, LcPopup, LcKeyboard },
    data: () => ({
      isErr: false,
      isForgot: true,
      chance: 3
    }),
    created () {
    },
    methods: {
      completeHandler(data){
        console.log('input complete with result: ');
        console.log(data)
        if(data.join('') !== '123456'){
          this.isErr = true;
          setTimeout(() => {
            this.isErr = false;
            this.$refs['pwd'].clear();
          }, 1500)
          this.chance--;
        }else{
          console.log('密码正确')
        }
      },
      forgetHandler(){
        console.log('忘记密码了')
      }
    }
  };
</script>


```

### API
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| **`length`** | `Number` | `N` | `6` | `密码长度` |
| **`showError`** | `Boolean` | `N` | `false` | `是否显示错误状态` |
| **`showForget`** | `Boolean` | `N` | `false` | `是否显示忘记密码` |
| **`marginTop`** | `Number` | `N` | `60` | `键盘与密码框的距离` |
| **`chance`** | `Number` | `N` | `3` | `输错密码的机会` |
| **`complete`** | `Function` | `Y` | `null` | `输入完成后的回调` |
| **`forgetClicked`** | `Function` | `N` | `null` | `点击忘记密码后的回调` |

- *1：`this.$refs['input'].clear()` 可以调用组件的清空输入方法