# code-input

**Repository Path**: erhadong/code-input

## Basic Information

- **Project Name**: code-input
- **Description**: 一个基于quarkc封装的VUE react html都可以使用的验证码输入组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-26
- **Last Updated**: 2023-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

使用
无论是`Vue`，`React`，`Angular`还是`Jq`项目，该组件都可以被使用。

```js
import "code-input/lib";

<code-input/>;

let code = document.getElementById('codeInput')
code.addEventListener('complete', (evt) => {
    console.log(evt.detail)
})
code.addEventListener('change', (evt) => {
    console.log(evt.detail)
})
< /script>
```

```vue 
<!--vue3写法-->
<template>
  <code-input @Change="change" @Complete="complete"></code-input>
</template>
<script setup>
import "code-input/lib";

function change(evt) {
  console.log(evt.detail)
}

function complete(evt) {
  console.log(evt.detail)
}

</script>

```vue
<template>
  <code-input @Change="change" @Complete="complete"></code-input>
</template>
<script>
import "code-input/lib";

export default {
  methods: {
    change(evt) {
      console.log(evt.detail)
    },
    complete(evt) {
      console.log(evt.detail)
    }
  }
}
</script>
```


```js
import "code-input/lib";
class App extends React.Component {
    constructor(...args) {
        super(...args);

    }

    componentDidMount() {
        const {codeInput} = this.refs;
        codeInput.addEventListener('change', this.change);
        codeInput.addEventListener('complete', this.complete);
    }

    change = (e) => {
        console.log(e.detail);
    }

    complete = (e) => {
        console.log(e.detail);
    }

    click(e) {
    }


    render() {
        return (<div>
            <code-input
                ref={"codeInput"}
            ></code-input>
        </div>);
    }
}

```

|     Key     |  Type  |              Desc               |
|:-----------:|:------:|:-------------------------------:|
|    type     |  text  |      one of number or text      |
|   fields    | number |     The count of characters     |
|  onChange   |  func  |   Trigger on character change   |
| onComplete  |  func  | Trigger on all character inputs |
| fieldWidth  | number |           input width           |
| fieldHeight | number |          input height           |
|  autoFocus  |  bool  | auto focus first input on init  |
|    title    | string |        code input title         |
|   loading   |  bool  |        show loading flag        |
|  className  | string |           class name            |
|   values    | array  |         default values          |