# 验证码

拖拽式验证码、普通验证码、图片拖拽还原验证码

## 案例演示

### InputCode 基本使用

字符验证码

---demo
```js
import { SlideCode, Button } from 'amos-framework';

const { InputCode } = SlideCode;

class Demo extends Component {

  onChange = (code) => {
    console.log(code);
  }

  reset = () => {
    this.icRef.drawCode();
  }

  render() {
    return (
      <div style={{ width: '30em' }}>
        <div style={{ display: 'flex', marginBottom: '1em' }}>
          <InputCode onChange={this.onChange} ref={node => this.icRef = node} />
          <Button onClick={this.reset}>外部重置</Button>
        </div>
        <div>
          <InputCode type="number" />
          <br />
          <InputCode type="letter" />
          <br />
          <InputCode type="letter" letters={['大', '小', '上', '下', '左', '右', '一']} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### SlideCode 基本使用

基本拖拽验证码

---demo
```js
import { SlideCode, Button } from 'amos-framework';

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      verifyState: false
    };
  }

  onSuccess = (finished) => {
    this.setState({
      verifyState: finished
    });
    if (finished){
      // 验证成功
    }
  }

  reset = () => {
    this.setState({
      verifyState: false
    });
  }

  render() {
    const { verifyState } = this.state;
    return (
      <div style={{ width: '30em' }}>
        <SlideCode onSuccess={this.onSuccess} verifyState={verifyState} />
        <SlideCode onSuccess={this.onSuccess} verifyState={verifyState} height={50} />
        <Button disabled={!verifyState} onClick={this.reset}>重新验证</Button>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### SlideImgCode 基本使用

图片拖拽补全验证码

---demo
```js
import { SlideCode } from 'amos-framework';

const { SlideImgCode } = SlideCode;

const codeImgs = [
  '/example/assets/imgs/0.jpg',
  '/example/assets/imgs/1.jpg',
  '/example/assets/imgs/2.jpg'
];

// const codeImgs = [
//   '/src/assets/imgs/0.jpg',
//   '/src/assets/imgs/1.jpg',
//   '/src/assets/imgs/2.jpg'
// ];

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      verifyState: false,
      referencePlate: codeImgs[0]
    };
  }

  onSuccess = (finished) => {
    this.setState({
      verifyState: finished
    });
    if (finished){
      // 验证成功
    }
  }

  onRefresh = () => {
    const index = Math.round(Math.random() * 2)
    this.setState({
      referencePlate: codeImgs[index]
    });
  }

  render() {
    const { verifyState, referencePlate } = this.state;
    return (
      <div style={{ width: '30em' }}>
        <SlideImgCode
          onSuccess={this.onSuccess}
          verifyState={verifyState}
          referencePlate={referencePlate}
          onRefresh={this.onRefresh}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## API

### InputCode

```js
import { SlideCode } from 'amos-framework';

const { InputCode } = SlideCode;
```

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| width | string or number | 100 | 验证码宽度 |
| height | string or number | 30 | 验证码高度 |
| type | string | blend | 类型，可选值为 `blend`、`number`、`letter` |
| onChange | function | `() => {}` | 验证码改变时回调 |
| len | number | 4 | 生成的验证码长度 |
| numbers | Number[] | `[0~9]` | 验证码数字集合 |
| letters | String[] | `[a~z,A~Z]` | 验证码字符集合 |

### SlideCode

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| style | object | - | 自定义样式 |
| tip | string | '拖动滑块验证' | 初始化提示信息 |
| successTip | string | '验证成功' | 验证成功提示 |
| width | string or number | '100%' | 验证码宽度 |
| height | string or number | '40px' | 验证码高度，默认40px |
| verifyState | boolean | false | 验证状态 |
| onSuccess | function | - | 验证成功回调， `(verifyState: boolean) => {}` |
| onError | function | - | 验证失败回调 |

### SlideImgCode

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| tips | string | '滑动填充图案' | 初始化提示信息 |
| successTip | string | '验证成功' | 验证成功提示 |
| width | number | 310 | 验证码宽度 |
| height | number | 210 | 验证码高度 |
| verifyState | boolean | false | 验证状态 |
| referencePlate | string | - | 验证码图片，必填字段 |
| onSuccess | function | - | 验证成功回调， `(verifyState: boolean) => {}` |
| onRefresh | function | - | 刷新回调，可以在此处更改验证码的图片路径 |
| onFail | function | - | 验证失败回调 |